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;
 }