diff --git a/webadmin/src/js/client.js b/webadmin/src/js/client.js index a83d2adb1..cc803a964 100644 --- a/webadmin/src/js/client.js +++ b/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); diff --git a/webadmin/src/views/debug.html b/webadmin/src/views/debug.html index 31962aec2..5f5f796cd 100644 --- a/webadmin/src/views/debug.html +++ b/webadmin/src/views/debug.html @@ -26,6 +26,25 @@ + + +
@@ -42,8 +61,9 @@
+ + -
diff --git a/webadmin/src/views/debug.js b/webadmin/src/views/debug.js index c20985724..9d36b9db6 100644 --- a/webadmin/src/views/debug.js +++ b/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;