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);
-      }
+      // 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,
+          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();
     }
   };
 
   /**
-   * Uppload a file.
+   * Upload a file.
    * @param file
+   * @param newfile
    */
-  $scope.uploadFile = function(file) {
-    // Add the uploading file to the UI
-    var newfile = {
-      progress: 0,
-      name: file.name,
-      create_date: new Date().getTime(),
-      mimetype: file.type
-    };
-    $scope.files.push(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);
-      }
+      // 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,
+          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();
     }
   };
 
   /**
-   * Uppload a file.
+   * Upload a file.
    * @param file
+   * @param newfile
    */
-  $scope.uploadFile = function(file) {
-    // Add the uploading file to the UI
-    var newfile = {
-      progress: 0,
-      name: file.name,
-      create_date: new Date().getTime(),
-      mimetype: file.type
-    };
-    $scope.files.push(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>