#839, After uploading a file to Submission/Source/Preview Image boxes; info text must remove

-- Fixed
#849, "Remove" button is hard to find when we upload a file with a long name
-- Fixed

Author: vikasrohit

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

@@ -72,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

@@ -17,9 +17,9 @@ import _ from 'lodash'
     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 +77,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,7 +104,7 @@ import _ from 'lodash'
       }, false)
 
       // Add new files to the list
-      if (!isFound) {
+      if (!isFound && fileObject) {
         vm.submissionsBody.data.files.push(fileObject)
       }
     }
@@ -111,8 +115,8 @@ import _ from 'lodash'
       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

@@ -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 {
@@ -61,4 +68,11 @@ tc-fp-file-input {
   .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 {