From ca9e292549fc2dd97f5fb7fa31a53959fafc8f18 Mon Sep 17 00:00:00 2001
From: vikasrohit <vikas.agarwal@appirio.com>
Date: Mon, 4 Jul 2016 17:57:30 +0530
Subject: [PATCH 1/3] Issue#847, "Drag and Drop your zip file here" must remove
from the "Preview Image" section
-- Fixed
---
app/directives/tc-fp-file-input/tc-fp-file-input.directive.js | 4 +++-
assets/css/directives/tc-fp-file-input.directive.scss | 4 ++++
2 files changed, 7 insertions(+), 1 deletion(-)
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..2122ccbda 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')
diff --git a/assets/css/directives/tc-fp-file-input.directive.scss b/assets/css/directives/tc-fp-file-input.directive.scss
index d27f9cfef..eadd7729b 100644
--- a/assets/css/directives/tc-fp-file-input.directive.scss
+++ b/assets/css/directives/tc-fp-file-input.directive.scss
@@ -57,4 +57,8 @@ 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';
+ }
}
\ No newline at end of file
From f5a1073af7c0e58e2ef08f6f2d5e12fde43a6b79 Mon Sep 17 00:00:00 2001
From: vikasrohit <vikas.agarwal@appirio.com>
Date: Tue, 5 Jul 2016 12:36:03 +0530
Subject: [PATCH 2/3] #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
---
.../tc-fp-file-input.directive.js | 32 ++++++----
app/services/submissions.service.js | 2 +-
.../submit-design-files.controller.js | 61 ++++++-------------
.../submit-design-files.jade | 5 +-
.../tc-fp-file-input.directive.scss | 14 +++++
assets/css/submissions/submit-file.scss | 2 +
6 files changed, 62 insertions(+), 54 deletions(-)
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 2122ccbda..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
@@ -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
- })
}
}
}
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..0e47dcefe 100644
--- a/app/submissions/submit-design-files/submit-design-files.controller.js
+++ b/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
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 eadd7729b..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 {
@@ -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: '';
+ }
+ }
}
\ 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 {
From 50f29d17df13867cd89ed5b2964d7b6350339578 Mon Sep 17 00:00:00 2001
From: vikasrohit <vikas.agarwal@appirio.com>
Date: Tue, 5 Jul 2016 12:42:02 +0530
Subject: [PATCH 3/3] -- Fixing linting errors
---
.../submit-design-files/submit-design-files.controller.js | 2 --
1 file changed, 2 deletions(-)
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 0e47dcefe..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,7 +12,6 @@ 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 = ''
@@ -112,7 +111,6 @@ import _ from 'lodash'
function uploadSubmission() {
vm.errorInUpload = false
vm.uploadProgress = 0
- vm.fileUploadProgress = {}
vm.showProgress = true
vm.preparing = true
vm.finishing = false