Upload drag & dropped files sequentially

docs-web/src/main/webapp/src/app/docs/controller/DocumentDefault.js

@@ -26,29 +26,40 @@ angular.module('docs').controller('DocumentDefault', function($scope, $state, Re
    */
   $scope.fileDropped = function(files) {
     if (files && files.length) {
-      for (var i = 0; i < files.length; i++) {
-        var file = files[i];
-        $scope.uploadFile(file);
-      }
-    }
-  };
-
-  /**
-   * Uppload a file.
-   * @param file
-   */
-  $scope.uploadFile = function(file) {
-    // Add the uploading file to the UI
+      // Adding files to the UI
+      var newfiles = [];
+      _.each(files, function(file) {
         var newfile = {
           progress: 0,
           name: file.name,
           create_date: new Date().getTime(),
-      mimetype: file.type
+          mimetype: file.type,
+          status: 'Pending...'
         };
         $scope.files.push(newfile);
+        newfiles.push(newfile);
+      });
 
+      // Uploading files sequentially
+      var key = 0;
+      var then = function() {
+        if (files[key]) {
+          $scope.uploadFile(files[key], newfiles[key++]).then(then);
+        }
+      };
+      then();
+    }
+  };
+
+  /**
+   * Upload a file.
+   * @param file
+   * @param newfile
+   */
+  $scope.uploadFile = function(file, newfile) {
     // Upload the file
-    $upload.upload({
+    newfile.status = 'Uploading...';
+    return $upload.upload({
       method: 'PUT',
       url: '../api/file',
       file: file

docs-web/src/main/webapp/src/app/docs/controller/DocumentView.js

@@ -149,29 +149,40 @@ angular.module('docs').controller('DocumentView', function ($scope, $state, $sta
    */
   $scope.fileDropped = function(files) {
     if (files && files.length) {
-      for (var i = 0; i < files.length; i++) {
-        var file = files[i];
-        $scope.uploadFile(file);
-      }
-    }
-  };
-
-  /**
-   * Uppload a file.
-   * @param file
-   */
-  $scope.uploadFile = function(file) {
-    // Add the uploading file to the UI
+      // Adding files to the UI
+      var newfiles = [];
+      _.each(files, function(file) {
         var newfile = {
           progress: 0,
           name: file.name,
           create_date: new Date().getTime(),
-      mimetype: file.type
+          mimetype: file.type,
+          status: 'Pending...'
         };
         $scope.files.push(newfile);
+        newfiles.push(newfile);
+      });
 
+      // Uploading files sequentially
+      var key = 0;
+      var then = function() {
+        if (files[key]) {
+          $scope.uploadFile(files[key], newfiles[key++]).then(then);
+        }
+      };
+      then();
+    }
+  };
+
+  /**
+   * Upload a file.
+   * @param file
+   * @param newfile
+   */
+  $scope.uploadFile = function(file, newfile) {
     // Upload the file
-    $upload.upload({
+    newfile.status = 'Uploading...';
+    return $upload.upload({
       method: 'PUT',
       url: '../api/file',
       file: file,

docs-web/src/main/webapp/src/partial/docs/document.default.html

@@ -25,7 +25,7 @@
 
       <div class="thumbnail" ng-if="!file.id">
         <p class="text-center lead">
-          Uploading...
+          {{ file.status }}
         </p>
         <div class="caption">
           <progressbar value="file.progress" class="progress-info active"></progressbar>

docs-web/src/main/webapp/src/partial/docs/document.view.html

@@ -54,7 +54,7 @@
 
         <div class="thumbnail" ng-if="!file.id">
           <p class="text-center lead">
-            Uploading...
+            {{ file.status }}
           </p>
           <div class="caption">
             <progressbar value="file.progress" class="progress-info active"></progressbar>