WIP on image uploading

UX work - broken atm.

src/Umbraco.Web.UI.Client/src/views/propertyeditors/folderbrowser/folderbrowser.controller.js

@@ -1,10 +1,18 @@
 angular.module("umbraco")
 .controller("Umbraco.Editors.FolderBrowserController",
-    function ($rootScope, $scope, assetsService, $routeParams, umbRequestHelper, mediaResource, imageHelper) {
+    function ($rootScope, $scope, assetsService, $routeParams, $timeout, umbRequestHelper, mediaResource, imageHelper) {
         var dialogOptions = $scope.$parent.dialogOptions;
+
+        $scope.filesUploading = [];
+
         $scope.options = {
             url: umbRequestHelper.getApiUrl("mediaApiBaseUrl", "PostAddFile"),
             autoUpload: true,
+            disableImageResize: /Android(?!.*Chrome)|Opera/
+            .test(window.navigator.userAgent),
+            previewMaxWidth: 100,
+            previewMaxHeight: 100,
+            previewCrop: true,
             formData:{
                 currentFolder: $routeParams.id
             }
@@ -23,7 +31,33 @@ angular.module("umbraco")
 
         $scope.$on('fileuploadstop', function(event, files){
             $scope.loadChildren($scope.options.formData.currentFolder);
+            $scope.queue = [];
         });
+
+        $scope.$on('fileuploadprocessalways', function(e,data) {
+            var i;
+            console.log('processing');
+
+            $scope.$apply(function() {
+                $scope.filesUploading.push(data.files[data.index].preview);
+            });
+        })
+
+
+        // All these sit-ups are to add dropzone area and make sure it gets removed if dragging is aborted! 
+        $scope.$on('fileuploaddragover', function(event, files) {
+            if (!$scope.dragClearTimeout) {
+                $scope.$apply(function() {
+                    $scope.dropping = true;
+                });
+            } else {
+                $timeout.cancel($scope.dragClearTimeout);
+            }
+            $scope.dragClearTimeout = $timeout(function () {
+                $scope.dropping = null;
+                $scope.dragClearTimeout = null;
+            }, 100);
+        })
         
         //init load
         $scope.loadChildren($routeParams.id);

src/Umbraco.Web.UI.Client/src/views/propertyeditors/folderbrowser/folderbrowser.html

@@ -8,6 +8,16 @@ data-ng-class="{'fileupload-processing': processing() || loadingFiles}">
         <div style="height: 10px; margin: 10px 0px 10px 0px" class="umb-loader" 
         	ng-hide="active() == 0"></div>
 
+        <div class="umb-upload-drop-zone" ng-show="dropping">DROP HERE</div>
+        
+        <div class="umb-upload-upload-progress" ng-show="filesUploading.length">
+            NOW UPLOADING...
+            <ul>
+                <li ng-repeat="file in filesUploading">{{file | json}}</li>
+            </ul>
+        </div>
+
+
         <ul class="umb-thumbnails thumbnails">
 	        <li class="span2 folder" ng-repeat="image in images | orderBy:'contentTypeAlias' | filter:searchTerm">
 			    <a href="#/media/media/edit/{{image.id}}" class="thumbnail">

src/Umbraco.Web/UI/JavaScript/JsInitialize.js

@@ -32,7 +32,9 @@
 
     /* App-wide file-upload helper */
     'lib/jquery/jquery.upload/js/jquery.fileupload.js',
+    'lib/jquery/jquery.upload/js/load-image.min.js',
     'lib/jquery/jquery.upload/js/jquery.fileupload-process.js',
+    'lib/jquery/jquery.upload/js/jquery.fileupload-image.js',
     'lib/jquery/jquery.upload/js/jquery.fileupload-angular.js',
 
     'lib/bootstrap/js/bootstrap.js',