diff --git a/app/directives/tc-fp-file-input/tc-fp-file-input.directive.js b/app/directives/tc-fp-file-input/tc-fp-file-input.directive.js index 37530e824..7a9c2b0b1 100644 --- a/app/directives/tc-fp-file-input/tc-fp-file-input.directive.js +++ b/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 - }) } } } diff --git a/app/services/submissions.service.js b/app/services/submissions.service.js index 85f7d6a43..f8842c722 100644 --- a/app/services/submissions.service.js +++ b/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) }) diff --git a/app/submissions/submit-design-files/submit-design-files.controller.js b/app/submissions/submit-design-files/submit-design-files.controller.js index 520782b4f..a312c2626 100644 --- a/app/submissions/submit-design-files/submit-design-files.controller.js +++ b/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,7 +103,7 @@ import _ from 'lodash' }, false) // Add new files to the list - if (!isFound) { + if (!isFound && fileObject) { vm.submissionsBody.data.files.push(fileObject) } } @@ -108,11 +111,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 +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 diff --git a/app/submissions/submit-design-files/submit-design-files.jade b/app/submissions/submit-design-files/submit-design-files.jade index 22e34d54e..cce0a7645 100644 --- a/app/submissions/submit-design-files/submit-design-files.jade +++ b/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 diff --git a/assets/css/directives/tc-fp-file-input.directive.scss b/assets/css/directives/tc-fp-file-input.directive.scss index d27f9cfef..1365d8b43 100644 --- a/assets/css/directives/tc-fp-file-input.directive.scss +++ b/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: ''; + } + } } \ No newline at end of file diff --git a/assets/css/submissions/submit-file.scss b/assets/css/submissions/submit-file.scss index 0c2b73b71..8d5939ee5 100644 --- a/assets/css/submissions/submit-file.scss +++ b/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 {