Proper working simple implementation of ng-file-upload

Author: durasj

src/css/main.css

@@ -238,6 +238,21 @@ textarea.code {
 .upload-dragover {
   background-color: #EEEEEE;
 }
+.upload-dragover:before {
+  content: "\e198";
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 100;
+  color: rgba(102, 102, 102, 0.5);
+  font-size: 80px;
+  font-family: 'Glyphicons Halflings';
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+}
 
 .upload-list {
   margin-top: 20px;

src/js/controllers/main.js

@@ -316,11 +316,13 @@
 
         $scope.removeFromUpload = function(index) {
             $scope.uploadFileList.splice(index, 1);
-        };        
+        };
 
         $scope.uploadFiles = function() {
             $scope.apiMiddleware.upload($scope.uploadFileList, $scope.fileNavigator.currentPath).then(function() {
                 $scope.fileNavigator.refresh();
+                $scope.uploadFileList = [];
+
                 $scope.modal('uploadfile', true);
             }, function(data) {
                 var errorMsg = data.result && data.result.error || $translate.instant('error_uploading_files');

src/js/services/apihandler.js

@@ -1,7 +1,7 @@
 (function(angular, $) {
     'use strict';
-    angular.module('FileManagerApp').service('apiHandler', ['$http', '$q', '$window', '$translate', 
-        function ($http, $q, $window, $translate) {
+    angular.module('FileManagerApp').service('apiHandler', ['$http', '$q', '$window', '$translate', 'Upload',
+        function ($http, $q, $window, $translate, Upload) {
 
         $http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
@@ -114,23 +114,36 @@
             return deferred.promise;
         };
 
-        ApiHandler.prototype.upload = function(apiUrl, form) {
+        ApiHandler.prototype.upload = function(apiUrl, destination, files) {
             var self = this;
             var deferred = $q.defer();
             self.inprocess = true;
             self.error = '';
-            $http.post(apiUrl, form, {
-                transformRequest: angular.identity,
-                headers: {
-                    'Content-Type': undefined
-                }
-            }).success(function(data) {
-                self.deferredHandler(data, deferred);
-            }).error(function(data) {
-                self.deferredHandler(data, deferred, 'Unknown error uploading files');
-            })['finally'](function() {
-                self.inprocess = false;
-            });
+
+            var data = {
+                destination: destination
+            };
+
+            for (var i = 0; i < files.length; i++) {
+                data['file-' + i] = files[i];
+            }
+
+            if (files && files.length) {
+                Upload.upload({
+                    url: apiUrl,
+                    data: data
+                }).then(function (response) {
+                    self.deferredHandler(response.data, deferred);
+                }, function (response) {
+                    if (response.status > 0) {
+                        self.deferredHandler(data, deferred, 'Unknown error uploading files (' + response.status + ')');
+                    }
+                }, function (evt) {
+                    var progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
+
+                    if(progress == 100) self.inprocess = false;
+                });
+            }
 
             return deferred.promise;
         };

src/js/services/apimiddleware.js

@@ -40,19 +40,14 @@
             return this.apiHandler.remove(fileManagerConfig.removeUrl, items);
         };
 
-        ApiMiddleware.prototype.upload = function(fileList, path) {
+        ApiMiddleware.prototype.upload = function(files, path) {
             if (! $window.FormData) {
                 throw new Error('Unsupported browser version');
             }
-            var form = new $window.FormData();
-            form.append('destination', this.getPath(path));
 
-            for (var i = 0; i < fileList.length; i++) {
-                var fileObj = fileList.item(i);
-                fileObj instanceof $window.File && form.append('file-' + i, fileObj);
-            }
+            var destination = this.getPath(path);
 
-            return this.apiHandler.upload(fileManagerConfig.uploadUrl, form);
+            return this.apiHandler.upload(fileManagerConfig.uploadUrl, destination, files);
         };
 
         ApiMiddleware.prototype.getContent = function(item) {