Merge commit 'd0cc9349ec9a6558e632db3500e963418a26f406' into HEAD

Author: Jenkins Continuous Integration Server

app/directives/tc-fp-file-input/tc-fp-file-input.directive.js

@@ -31,11 +31,13 @@ import _ from 'lodash'
         if (scope.fieldId.indexOf('ZIP') > -1) {
           scope.filePath += _.join([userId, scope.fieldId, (new Date()).valueOf()], '-') + '.zip'
         }
+        var dragAreaClasses = 'tc-fp-file-drag-drop'
         // set extensions
         if (scope.fieldId.indexOf('ZIP') > -1) {
           scope.extensions = '.zip'
         } else if (scope.fieldId.indexOf('DESIGN_COVER') > -1) {
           scope.extensions = '.png,.jpeg,.jpg,.bmp'
+          dragAreaClasses += ' tc-fp-file-drag-drop-image'
         }
 
         // set default services
@@ -49,6 +51,7 @@ import _ from 'lodash'
          *pass original event
          */
         element.bind('change', function(event) {
+          scope.$parent.submissionForm[scope.fieldId].$setTouched()
           event.preventDefault()
           scope.onSuccess(event.originalEvent || event)
           $rootScope.$apply()
@@ -59,7 +62,7 @@ import _ from 'lodash'
         input.setAttribute('data-fp-maxSize', scope.maxSize)
         input.setAttribute('data-fp-services', scope.fpServices)
         input.setAttribute('data-fp-button-class', 'tc-btn')
-        input.setAttribute('data-fp-drag-class', 'tc-fp-file-drag-drop')
+        input.setAttribute('data-fp-drag-class', dragAreaClasses)
         input.setAttribute('data-fp-multiple', false)
         input.setAttribute('data-fp-extensions', scope.extensions)
         input.setAttribute('data-fp-store-location', 's3')
@@ -70,18 +73,28 @@ import _ from 'lodash'
 
         scope.onSuccess = function(event) {
           var fpFile = event.fpfile
-          var _file = {
-            name: scope.filename || fpFile.filename,
-            container: fpFile.container || scope.fpContainer,
-            path: fpFile.key,
-            size: fpFile.size,
-            mimetype: fpFile.mimetype
+          if (fpFile) {
+            element.addClass('file-uploaded')
+            var _file = {
+              name: scope.filename || fpFile.filename,
+              container: fpFile.container || scope.fpContainer,
+              path: fpFile.key,
+              size: fpFile.size,
+              mimetype: fpFile.mimetype
+            }
+            scope.ngModel = _file
+            scope.setFileReference({
+              file: _file,
+              fieldId: scope.fieldId
+            })
+          } else {
+            element.removeClass('file-uploaded')
+            scope.ngModel = null
+            scope.setFileReference({
+              file: null,
+              fieldId: scope.fieldId
+            })
           }
-          scope.ngModel = _file
-          scope.setFileReference({
-            file: _file,
-            fieldId: scope.fieldId
-          })
         }
       }
     }

app/directives/tc-fp-file-input/tc-fp-file-input.jade

@@ -6,7 +6,10 @@
   .tc-label__wrapper
     span.tc-label__asterisk.lowercase(ng-if="mandatory") #[span *]mandatory
     input.tc-file-field__input(
+      data-name="{{fieldId}}",
       type="filepicker-dragdrop",
+      ng-model="ngModel",
+      ng-required="mandatory",
       data-fp-button-text="Pick A File",
       data-fp-drag-text=" ",
       on-success="onFileSeleted(event.fpfile)"

app/services/submissions.service.js

@@ -23,7 +23,7 @@ import angular from 'angular'
     function startSubmission(body, progressCallback) {
       return api.all('submissions').customPOST(body)
       .then(function(response) {
-        //progressCallback.call(progressCallback, 'PREPARE', 100)
+        progressCallback.call(progressCallback, 'PREPARE', 100)
         // uploadSubmissionFileToS3(response, response.data.files, files, progressCallback)
         processSubmission(response, progressCallback)
       })

app/submissions/submit-design-files/submit-design-files.controller.js

@@ -12,14 +12,13 @@ import _ from 'lodash'
     if (!challengeToSubmitTo.challenge) { return }
 
     var vm = this
-    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.uploading = false
     vm.preparing = false
     vm.finishing = false
+    vm.finished = false
     vm.showProgress = false
     vm.errorInUpload = false
     vm.formFonts = {}
@@ -78,20 +77,26 @@ import _ from 'lodash'
 
     function setFileReference(file, fieldId) {
       var fileObject = {
-        name: file.name,
-        type: fieldId,
-        status: 'STAGED',
-        stagedFileContainer: file.container,
-        stagedFilePath: file.path,
-        size: file.size,
-        mediaType: file.mimetype
+        type: fieldId
+      }
+      if (file) {
+        fileObject = {
+          name: file.name,
+          type: fieldId,
+          status: 'STAGED',
+          stagedFileContainer: file.container,
+          stagedFilePath: file.path,
+          size: file.size,
+          mediaType: file.mimetype
+        }
       }
 
       // If user changes a file input's file, update the file details
       var isFound = vm.submissionsBody.data.files.reduce(function(isFound, file, i, filesArray) {
         if (isFound) { return true }
 
-        if (file.type === fileObject.type) {
+        // when file is removed, fileObject would have only type field
+        if (file.type === fieldId) {
           filesArray[i] = fileObject
           return true
         }
@@ -108,11 +113,10 @@ import _ from 'lodash'
     function uploadSubmission() {
       vm.errorInUpload = false
       vm.uploadProgress = 0
-      vm.fileUploadProgress = {}
       vm.showProgress = true
       vm.preparing = true
-      vm.uploading = false
       vm.finishing = false
+      vm.finished = false
       vm.submissionsBody.data.submitterComments = vm.comments
       vm.submissionsBody.data.submitterRank = vm.submissionForm.submitterRank
 
@@ -164,41 +168,16 @@ import _ from 'lodash'
         // we are concerned only for completion of the phase
         if (args === 100) {
           vm.preparing = false
-          vm.uploading = true
-          logger.debug('Prepared for upload.')
-        }
-      } else if (phase === 'UPLOAD') {
-        // if args is object, this update is about XHRRequest's upload progress
-        if (typeof args === 'object') {
-          var requestId = args.file
-          var progress = args.progress
-          if (!fileUploadProgress[requestId] || fileUploadProgress[requestId] < progress) {
-            fileUploadProgress[requestId] = progress
-          }
-          var total = 0, count = 0
-          for(var requestIdKey in fileUploadProgress) {
-            var prog = fileUploadProgress[requestIdKey]
-            total += prog
-            count++
-          }
-          vm.uploadProgress = total / count
-
-          // initiate digest cycle because this event (xhr event) is caused outside angular
-          $scope.$apply()
-        } else { // typeof args === 'number', mainly used a s fallback to mark completion of the UPLOAD phase
-          vm.uploadProgress = args
-        }
-
-        // start next phase when UPLOAD is done
-        if (vm.uploadProgress == 100) {
-          logger.debug('Uploaded files.')
-          vm.uploading = false
           vm.finishing = true
+          logger.debug('Prepared for upload.')
         }
       } else if (phase === 'FINISH') {
         // we are concerned only for completion of the phase
         if (args === 100) {
           logger.debug('Finished upload.')
+          vm.preparing = false
+          vm.finishing = false
+          vm.finished = true
         }
       } else {
         // assume it to be error condition

app/submissions/submit-design-files/submit-design-files.jade

@@ -10,7 +10,7 @@
 
 .panel-body
   p.tc-error-messages.submissions-access-error(ng-if="submissions.error", ng-bind="submissions.errorMessage")
-  //- <pre>{{vm.submissionForm}}</pre>
+  
   form.form-blocks(ng-if="!submissions.error", name="submissionForm", role="form", ng-submit="submissionForm.$valid && vm.uploadSubmission()", novalidate)
     .form-block.flex
       .form-block__instructions
@@ -155,7 +155,7 @@
         input(type="checkbox", ng-model="vm.submissionForm.hasAgreedToTerms", id="agree-to-terms", required)
 
         label(for="agree-to-terms") I understand and agree
-
+      
       button.tc-btn.tc-btn-secondary(type="submit", ng-disabled="submissionForm.$invalid") Submit
 
 modal.transition(show="vm.showProgress", background-click-close="false", style="background-color:white;")
@@ -170,10 +170,13 @@ modal.transition(show="vm.showProgress", background-click-close="false", style="
 
     p.upload-progress__message--error(ng-show="vm.errorInUpload") Oh, that’s embarrassing! One of the files couldn’t be uploaded, I’m so sorry.
 
-    progress-bar.upload-progress__progress-bar(completed="vm.uploadProgress", message="of 3 files uploaded")
+    //- progress-bar.upload-progress__progress-bar(completed="vm.uploadProgress", message="of 3 files uploaded")
 
     .upload-progress__preparing(ng-show="vm.preparing && !vm.errorInUpload") #[span Preparing...]
     .upload-progress__finishing(ng-show="vm.finishing && !vm.errorInUpload")
+      p Finishing...
+      
+    .upload-progress__finished(ng-show="vm.finished && !vm.errorInUpload")
       p Finished!
 
       .upload-progess__links

assets/css/directives/tc-fp-file-input.directive.scss

@@ -45,6 +45,13 @@ tc-fp-file-input {
     top: 0;
     height: 190px;
     width: 240px;
+    position: relative;
+
+    > span {
+      position: absolute;
+      top: 0px;
+      right: 0px;
+    }
   }
 
   .tc-fp-file-drag-drop::after {
@@ -57,4 +64,15 @@ tc-fp-file-input {
     left: 50%;
     transform: translateX(-50%)
   }
+
+  .tc-fp-file-drag-drop-image::after {
+    content: 'Drag and Drop your PNG or JPG file here';
+  }
+
+  &.file-uploaded {
+    .tc-file-field__input::after,
+    .tc-fp-file-drag-drop::after {
+      content: '';
+    }
+  }
 }

assets/css/submissions/submit-file.scss

@@ -168,12 +168,14 @@ modal {
 
   .upload-progress__preparing,
   .upload-progress__finishing,
+  .upload-progress__finished,
   .upload-progress__error {
     @include font-with-weight('Sofia Pro', 500);
     font-size: 12px;
     line-height: 14px;
     color: $accent-gray-dark;
     text-align: center;
+    margin-top: 40px;
   }
 
   .upload-progress__error {