Add upload progress dialog

src/js/client.js

@@ -2439,21 +2439,33 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
         });
     };
 
-    Client.prototype.filesUpload = function (appId, path, file, callback) {
+    Client.prototype.filesUpload = function (appId, path, file, progressHandler, callback) {
         var fd = new FormData();
         fd.append('file', file);
 
-        var config = {
-            headers: { 'Content-Type': undefined },
-            transformRequest: angular.identity
-        };
-
-        post('/api/v1/apps/' + appId + '/files/' + path, fd, config, function (error, data, status) {
+        function done(error, data, status) {
             if (error) return callback(error);
             if (status !== 200) return callback(new ClientError(status, data));
 
             callback(null, data);
-        });
+        }
+
+        $http({
+            url: client.apiOrigin + '/api/v1/apps/' + appId + '/files/' + path,
+            method: 'POST',
+            data: fd,
+            transformRequest: angular.identity,
+            headers: {
+                'Content-Type': undefined,
+                Authorization: 'Bearer ' + token
+            },
+
+            uploadEventHandlers: {
+                progress: function (e) {
+                    progressHandler(e.loaded);
+                }
+            }
+        }).success(defaultSuccessHandler(done)).error(defaultErrorHandler(done));
     };
 
     client = new Client();

src/js/filemanager.js

@@ -94,7 +94,9 @@ app.controller('FileManagerController', ['$scope', 'Client', function ($scope, C
 
     $scope.uploadStatus = {
         busy: false,
+        fileName: '',
         count: 0,
+        countDone: 0,
         size: 0,
         done: 0,
         percentDone: 0
@@ -103,8 +105,15 @@ app.controller('FileManagerController', ['$scope', 'Client', function ($scope, C
     function uploadFiles(files) {
         if (!files || !files.length) return;
 
+        // prevent it from getting closed
+        $('#uploadModal').modal({
+            backdrop: 'static',
+            keyboard: false
+        });
+
         $scope.uploadStatus.busy = true;
         $scope.uploadStatus.count = files.length;
+        $scope.uploadStatus.countDone = 0;
         $scope.uploadStatus.size = 0;
         $scope.uploadStatus.done = 0;
         $scope.uploadStatus.percentDone = 0;
@@ -114,16 +123,28 @@ app.controller('FileManagerController', ['$scope', 'Client', function ($scope, C
         }
 
         async.eachSeries(files, function (file, callback) {
-            $scope.uploadStatus.done += file.size;
-            $scope.uploadStatus.percentDone = $scope.uploadStatus.done * 100 / $scope.uploadStatus.size;
-
             var filePath = sanitize($scope.cwd + '/' + (file.webkitRelativePath || file.name));
 
-            Client.filesUpload($scope.appId, filePath, file, callback);
+            $scope.uploadStatus.fileName = file.name;
+
+            Client.filesUpload($scope.appId, filePath, file, function (loaded) {
+                $scope.uploadStatus.percentDone = ($scope.uploadStatus.done+loaded) * 100 / $scope.uploadStatus.size;
+            }, function (error) {
+                if (error) return callback(error);
+
+                $scope.uploadStatus.done += file.size;
+                $scope.uploadStatus.percentDone = $scope.uploadStatus.done * 100 / $scope.uploadStatus.size;
+                $scope.uploadStatus.countDone++;
+
+                callback();
+            });
         }, function (error) {
             if (error) console.error(error);
 
+            $('#uploadModal').modal('hide');
+
             $scope.uploadStatus.busy = false;
+            $scope.uploadStatus.fileName = '';
             $scope.uploadStatus.count = 0;
             $scope.uploadStatus.size = 0;
             $scope.uploadStatus.done = 0;