SUP-1159, Progress bar to show %complete on upload

-- Added event handler for progress notification of upload
-- Added progress aggregator for multiple file upload progress
-- Showed, for POC, the progress bar with text message on the same page with custom directive

Author: vikasrohit

app/directives/progress-bar/progress-bar.directive.jade

@@ -0,0 +1,6 @@
+.progress-bar
+  .bar(style="background-color: #F0F0F0;height: 10px;")
+    .completed(style="background-color: #0096FF;")
+  .summary
+    span(ng-bind="completed")
+    span % {{message}}

app/directives/progress-bar/progress-bar.directive.js

@@ -0,0 +1,29 @@
+(function() {
+  'use strict';
+
+  angular.module('tcUIComponents').directive('progressBar', progressBar);
+
+  progressBar.$inject = ['$timeout', '$parse'];
+
+  function progressBar($timeout, $parse) {
+    return {
+      restrict: 'E',
+      templateUrl: 'directives/progress-bar/progress-bar.directive.html',
+      link: function(scope, element, attr) {
+        var model = $parse(attr.completed);
+        var msg = attr.message;
+        var progress = angular.element(element[0].querySelector('.completed'));
+
+        scope.$watch(model, function(newValue, oldValue) {
+          console.log("Updating progress bar with " + newValue);
+          scope.completed = Math.round(newValue);
+          scope.message = msg;
+          progress.css('width', scope.completed + '%')
+        });
+      },
+      controller: ['$scope', function($scope) {
+
+      }]
+    };
+  }
+})();

app/services/submissions.service.js

@@ -17,14 +17,14 @@
 
     return service;
 
-    function getPresignedURL(body, files) {
+    function getPresignedURL(body, files, progressCallback) {
       console.log('Body of request for presigned url: ', body);
 
       return api.all('submissions').customPOST(body)
       .then(function(response) {
         console.log('POST/Presigned URL Response: ', response.plain());
 
-        uploadSubmissionFileToS3(response, response.data.files, files);
+        uploadSubmissionFileToS3(response, response.data.files, files, progressCallback);
       })
       .catch(function(err) {
         console.log(err);
@@ -33,7 +33,7 @@
       });
     }
 
-    function uploadSubmissionFileToS3(presignedURLResponse, filesWithPresignedURL, files) {
+    function uploadSubmissionFileToS3(presignedURLResponse, filesWithPresignedURL, files, progressCallback) {
 
       var promises = filesWithPresignedURL.map(function(fileWithPresignedURL) {
         var deferred = $q.defer();
@@ -42,6 +42,19 @@
         xhr.open('PUT', fileWithPresignedURL.preSignedUploadUrl, true);
         xhr.setRequestHeader('Content-Type', fileWithPresignedURL.mediaType);
 
+        xhr.upload.addEventListener("progress", function(oEvent) {
+          if (oEvent.lengthComputable) {
+            var percentComplete = oEvent.loaded / oEvent.total;
+            console.log("Completed " + percentComplete);
+            if (progressCallback && typeof progressCallback === 'function') {
+              progressCallback.call(progressCallback, fileWithPresignedURL.preSignedUploadUrl,  percentComplete*100);
+            }
+            // ...
+          } else {
+            // Unable to compute progress information since the total size is unknown
+          }
+        });
+
         // xhr version of the success callback
         xhr.onreadystatechange = function() {
           var status = xhr.status;

app/submissions/submit-file/submit-file.controller.js

@@ -3,9 +3,9 @@
 
   angular.module('tc.submissions').controller('SubmitFileController', SubmitFileController);
 
-  SubmitFileController.$inject = ['$stateParams', 'UserService', 'SubmissionsService', 'challengeToSubmitTo'];
+  SubmitFileController.$inject = ['$scope', '$stateParams', 'UserService', 'SubmissionsService', 'challengeToSubmitTo'];
 
-  function SubmitFileController($stateParams, UserService, SubmissionsService, challengeToSubmitTo) {
+  function SubmitFileController($scope, $stateParams, UserService, SubmissionsService, challengeToSubmitTo) {
     var vm = this;
 
     // Must provide React Select component a list with ID, since currently
@@ -23,9 +23,11 @@
     ];
 
     var files = {};
+    var fileUploadProgress = {};
     vm.urlRegEx = new RegExp(/^(http(s?):\/\/)?(www\.)?[a-zA-Z0-9\.\-\_]+(\.[a-zA-Z]{2,3})+(\/[a-zA-Z0-9\_\-\s\.\/\?\%\#\&\=]*)?$/);
     vm.rankRegEx = new RegExp(/^[1-9]\d*$/);
     vm.comments = '';
+    vm.uploadProgress = 0;
     vm.submissionForm = {
       files: [],
 
@@ -166,6 +168,7 @@
     }
 
     function uploadSubmission() {
+      vm.updateProgress = 0;
       vm.submissionsBody.data.submitterComments = vm.comments;
       vm.submissionsBody.data.submitterRank = vm.submissionForm.submitterRank;
 
@@ -191,7 +194,19 @@
         });
       }
 
-      SubmissionsService.getPresignedURL(vm.submissionsBody, files);
+      SubmissionsService.getPresignedURL(vm.submissionsBody, files, updateProgress);
+    }
+
+    function updateProgress(requestId, progress) {
+      fileUploadProgress[requestId] = progress;
+      var total = 0, count = 0;
+      for(var requestId in fileUploadProgress) {
+        var prog = fileUploadProgress[requestId];
+        total += prog;
+        count++;
+      }
+      vm.uploadProgress = total / count;
+      $scope.$apply();
     }
   }
 })();

app/submissions/submit-file/submit-file.jade

@@ -184,3 +184,7 @@
         label(for="agree-to-terms") I understand and agree
 
       button.tc-btn.tc-btn-secondary(type="submit", ng-disabled="submissionForm.$invalid") Submit
+
+.panel-body
+  p Uploading submission for TBD: challenge name
+  progress-bar(completed="vm.uploadProgress", message="of 3 files uploaded")