Issue#847, "Drag and Drop your zip file here" must remove from the "Preview Image" section

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
@@ -59,7 +61,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 +72,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/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 = {}
@@ -77,21 +76,25 @@ 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
+      var fileObject = null
+      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) {
+        if (file && file.type === fieldId) {
+          // when file is removed, it would set correspding file as null
           filesArray[i] = fileObject
           return true
         }
@@ -100,19 +103,18 @@ import _ from 'lodash'
       }, false)
 
       // Add new files to the list
-      if (!isFound) {
+      if (!isFound && fileObject) {
         vm.submissionsBody.data.files.push(fileObject)
       }
     }
 
     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 +166,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

@@ -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 {