Upload files synchronously and add more description

www/assets/app.js

@@ -33,15 +33,27 @@
     $scope.isInstanceBeingDeleted = false;
     $scope.uploadProgress = 0;
 
-    $scope.uploadFiles = function (files) {
-        if (files && files.length) {
-            for (var i = 0; i < files.length; i++) {
-                Upload.upload({url: '/sessions/' + $scope.sessionId + '/instances/' + $scope.selectedInstance.name + '/uploads', data: {file: files[i]}, method: 'POST'})
-                  .then(function(){}, function(){}, function(evt) {
-                    $scope.uploadProgress = parseInt(100.0 * evt.loaded / evt.total);
-                  });
-            }
+
+    $scope.uploadFiles = function (files, invalidFiles) {
+        let total = files.length;
+        let uploadFile = function() {
+          let file = files.shift();
+          if (!file){
+            $scope.uploadMessage = "";
+            $scope.uploadProgress = 0;
+            return
+          }
+          $scope.uploadMessage = "Uploading file(s) " + (total - files.length) + "/"+ total + " : " + file.name;
+          let upload = Upload.upload({url: '/sessions/' + $scope.sessionId + '/instances/' + $scope.selectedInstance.name + '/uploads', data: {file: file}, method: 'POST'})
+            .then(function(){}, function(){}, function(evt) {
+              $scope.uploadProgress = parseInt(100.0 * evt.loaded / evt.total);
+            });
+
+          // process next file
+          upload.finally(uploadFile);
         }
+
+        uploadFile();
     }
 
     var selectedKeyboardShortcuts = KeyboardShortcutService.getCurrentShortcuts();

www/assets/style.css

@@ -35,6 +35,29 @@ md-card-content.terminal-container {
     margin-top: 50px;
 }
 
+.uploadStatus .bottom-block {
+    display: block;
+    position: relative;
+    background-color: rgba(255, 235, 169, 0.25);
+    height: 30px;
+    width: 100%;
+}
+
+.uploadStatus .bottom-block > span {
+    display: inline-block;
+    padding: 8px;
+    font-size: 0.9em;
+}
+
+.uploadStatus {
+    display: block;
+    position: relative;
+    width: 100%;
+    border: 2px solid #aad1f9;
+    transition: opacity  0.1s linear;
+    border-top: 0px;
+}
+
 .disconnected {
     background-color: #FDF4B6;
 }

www/index.html

@@ -72,7 +72,7 @@
 
                 <div flex></div>
               </md-content>
-              <md-content flex layout="column" ng-repeat="instance in instances" ng-show="instance.name == selectedInstance.name" ngf-drop="uploadFiles($files)" class="drop-box" ngf-drag-over-class="'dragover'" ngf-multiple="true">
+              <md-content flex layout="column" ng-repeat="instance in instances" ng-show="instance.name == selectedInstance.name" ngf-drop class="drop-box" ngf-drag-over-class="'dragover'" ngf-max-size="100000000" ngf-change="uploadFiles($files, $invalidFiles)" ngf-multiple="true">
                   <md-card class="stats" md-theme="default" md-theme-watch>
                       <md-card-title>
                           <md-card-title-text>
@@ -106,8 +106,13 @@
                           <md-button class="md-warn md-raised" ng-click="deleteInstance(instance)" ng-disabled="isInstanceBeingDeleted">{{deleteInstanceBtnText}}</md-button>
                           </md-card-actions>
                   </md-card>
-                  <md-progress-linear md-mode="determinate" ng-hide="uploadProgress == 0 || uploadProgress == 100" value="{{uploadProgress}}"></md-progress-linear>
                   <md-card flex md-theme="default" md-theme-watch >
+                      <div ng-show="uploadMessage" class="uploadStatus">
+                          <md-progress-linear  md-mode="determinate" value="{{uploadProgress}}"></md-progress-linear>
+                           <div class="bottom-block">
+                               <span>{{uploadMessage}}</span>
+                           </div>
+                      </div>
                       <md-card-content flex id="terminal-{{instance.name}}" class="terminal-container">
                       </md-card-content>
                   </md-card>