pick file

public/app/controllers/upload.controller.js

@@ -4,6 +4,20 @@ angular.module('app')
 
             $scope.image = null;
 
+            $scope.input = angular.element(angular.element("#filePicker")[0]);
+            $scope.input.on("change", function (e) {
+                var reader = new FileReader();
+                var f = e.target.files[0];
+                reader.readAsBinaryString(f);
+                reader.onload = (function(file) {
+                    return function(e) {
+                        $scope.$apply(function() {
+                            $scope.fileDropped(e.target.result, file);
+                        });
+                    };
+                })(f);
+            });
+
             $scope.fileDropped = function(content, file)
             {
                 $scope.image = {
@@ -11,4 +25,9 @@ angular.module('app')
                     name: file.name
                 };
             };
+
+            $scope.pickFile = function()
+            {
+                $scope.input.click();
+            };
     }]);

public/app/less/app.less

@@ -61,4 +61,10 @@
     width: auto;
     height: auto;
   }
+}
+
+.hidden-input {
+  width: 0;
+  height: 0;
+  overflow: hidden;
 }

public/app/views/upload.html

@@ -4,7 +4,8 @@
     <div image-dropzone="fileDropped(content, file)" class="dropzone">
         <img ng-show="image != null" ng-src="{{ image.content | toDataUrl }}">
         <p ng-hide="image != null">
-            Drag a file here
+            Drag a file here or <a href="" ng-click="pickFile()">pick one</a>
         </p>
     </div>
+    <input type="file" class="hidden-input" id="filePicker">
 </div>