Show upload progress

webadmin/src/js/client.js

@@ -1109,13 +1109,16 @@ angular.module('Application').service('Client', ['$http', 'md5', 'Notification',
         return (available - needed) >= 0;
     };
 
-    Client.prototype.uploadFile = function (appId, file, callback) {
+    Client.prototype.uploadFile = function (appId, file, progressCallback, callback) {
         var fd = new FormData();
         fd.append('file', file);
 
         post('/api/v1/apps/' + appId + '/upload?file=/tmp/' + file.name, fd, {
             headers: { 'Content-Type': undefined },
-            transformRequest: angular.identity
+            transformRequest: angular.identity,
+            uploadEventHandlers: {
+                progress: progressCallback
+            }
         }).success(function(data, status) {
             if (status !== 202) return callback(new ClientError(status, data));
             callback(null);

webadmin/src/views/debug.html

@@ -26,6 +26,25 @@
   </div>
 </div>
 
+<!-- Modal upload progress -->
+<div class="modal fade" id="uploadProgressModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h4 class="modal-title">Uploading file to {{ selected.name }}</h4>
+        </div>
+        <div class="modal-body">
+          <span><b>{{ (uploadProgress.current/1000/1000).toFixed(2) }}mb</b> (total {{ (uploadProgress.total/1000/1000).toFixed(2) }}mb)</span>
+          <div class="progress progress-striped active">
+            <div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ 100*(uploadProgress.current/uploadProgress.total) }}%"></div>
+          </div>
+        </div>
+        <div class="modal-footer">
+        </div>
+      </div>
+    </div>
+  </div>
+
 <div class="logs-controls">
   <div class="col-md-10 col-md-offset-1">
     <uib-tabset active="active">
@@ -42,8 +61,9 @@
     <!-- terminal actions -->
     <div class="btn-group pull-right" style="margin-left: 10px;">
       <button class="btn btn-default" ng-click="restartApp()" ng-show="selected.type === 'app'" ng-disabled="restartAppBusy"><i class="fa fa-circle-o-notch fa-spin" ng-show="restartAppBusy"></i> Restart</button>
+      <button class="btn btn-default" ng-click="uploadFile()" ng-show="terminalVisible && selected.type === 'app' && !uploadProgress.busy"><i class="fa fa-upload"></i> Upload to /tmp</button>
+      <button class="btn btn-default" ng-click="uploadProgress.show()" ng-show="uploadProgress.busy"><i class="fa fa-circle-o-notch fa-spin"></i> Uploading...</button>
       <button class="btn btn-default" ng-click="downloadFile.show()" ng-show="terminalVisible && selected.type === 'app'"><i class="fa fa-download"></i> Download</button>
-      <button class="btn btn-default" ng-click="uploadFile()" ng-show="terminalVisible && selected.type === 'app'"><i class="fa fa-upload"></i> Upload to /tmp</button>
     </div>
 
     <div class="btn-group pull-right" style="margin-left: 10px;">

webadmin/src/views/debug.js

@@ -61,6 +61,44 @@ angular.module('Application').controller('DebugController', ['$scope', '$locatio
         }
     };
 
+    $scope.uploadProgress = {
+        busy: false,
+        total: 0,
+        current: 0,
+
+        show: function () {
+            $scope.uploadProgress.total = 0;
+            $scope.uploadProgress.current = 0;
+
+            $('#uploadProgressModal').modal('show');
+        },
+
+        hide: function () {
+            $('#uploadProgressModal').modal('hide');
+        }
+    };
+
+    $scope.uploadFile = function () {
+        var fileUpload = document.querySelector('#fileUpload');
+
+        fileUpload.oninput = function (e) {
+            $scope.uploadProgress.busy = true;
+            $scope.uploadProgress.show();
+
+            Client.uploadFile($scope.selected.value, e.target.files[0], function progress(e) {
+                $scope.uploadProgress.total = e.total;
+                $scope.uploadProgress.current = e.loaded;
+            }, function (error) {
+                if (error) console.error(error);
+
+                $scope.uploadProgress.busy = false;
+                $scope.uploadProgress.hide();
+            });
+        };
+
+        fileUpload.click();
+    };
+
     $scope.populateLogTypes = function () {
         $scope.logs.push({ name: 'System (All)', type: 'platform', value: 'all', url: Client.makeURL('/api/v1/cloudron/logs?units=all') });
         $scope.logs.push({ name: 'Box', type: 'platform', value: 'box', url: Client.makeURL('/api/v1/cloudron/logs?units=box') });
@@ -228,18 +266,6 @@ angular.module('Application').controller('DebugController', ['$scope', '$locatio
         $scope.terminal.focus();
     }
 
-    $scope.uploadFile = function () {
-        var fileUpload = document.querySelector('#fileUpload');
-
-        fileUpload.oninput = function (e) {
-            Client.uploadFile($scope.selected.value, e.target.files[0], function (error) {
-                if (error) console.error(error);
-            });
-        };
-
-        fileUpload.click();
-    };
-
     $scope.$watch('selected', function (newVal) {
         if (!newVal) return;