diff --git a/src/filemanager.html b/src/filemanager.html
index bf3550487..aecb4d0a1 100644
--- a/src/filemanager.html
+++ b/src/filemanager.html
@@ -126,6 +126,26 @@
     </div>
   </div>
 
+  <!-- Modal upload -->
+  <div class="modal fade" id="uploadModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h4 class="modal-title">Uploading files ({{ uploadStatus.countDone }}/{{ uploadStatus.count }})</h4>
+        </div>
+        <div class="modal-body">
+          <div class="progress progress-striped active">
+            <div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ uploadStatus.percentDone || 0 }}%"></div>
+          </div>
+          <p class="no-wrap">{{ uploadStatus.fileName }}</p>
+        </div>
+        <div class="modal-footer" style="text-align: left;">
+          <small>Do not refresh the page until upload has finished.</small>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <div class="main-container animateMe ng-hide layout-root" ng-show="initialized">
     <div class="layout-content container">
       <br/>
@@ -161,12 +181,6 @@
 
             <br/>
 
-            <div ng-show="uploadStatus.busy">
-              <div class="progress progress-striped active animateMeOpacity">
-                <div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ uploadStatus.percentDone || 5 }}%">Uploading files</div>
-              </div>
-            </div>
-
             <table class="table table-hover" style="margin: 0;">
               <thead>
                 <tr>
diff --git a/src/js/client.js b/src/js/client.js
index bdac265b9..5df3df9ae 100644
--- a/src/js/client.js
+++ b/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();
diff --git a/src/js/filemanager.js b/src/js/filemanager.js
index 32c9f03c7..bfedd4adb 100644
--- a/src/js/filemanager.js
+++ b/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;
diff --git a/src/theme.scss b/src/theme.scss
index 1e6c6b393..f4b63612c 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -1366,6 +1366,7 @@ footer {
 .no-wrap {
     text-overflow: ellipsis;
     white-space: nowrap;
+    overflow: hidden;
 }
 
 .users-filter {