Merge pull request #1030 from dod-ccpo/file-upload-fixes

File upload fixes

js/components/upload_input.js

@@ -46,9 +46,9 @@ export default {
     return {
       hasInitialData: !!this.initialData,
       attachment: this.initialData || null,
-      showErrors: this.initialErrors,
       changed: false,
-      uploadError: null,
+      uploadError: false,
+      sizeError: false,
     }
   },
 
@@ -63,15 +63,22 @@ export default {
 
   methods: {
     addAttachment: async function(e) {
+      this.clearErrors()
+
       const file = e.target.files[0]
+      if (file.size > 64000000) {
+        this.sizeError = true
+        return
+      }
 
       const response = await this.uploader.upload(file, this.objectName)
+
       if (response.ok) {
         this.attachment = e.target.value
         this.$refs.attachmentFilename.value = file.name
         this.$refs.attachmentObjectName.value = this.objectName
+        this.$refs.attachmentInput.disabled = true
       } else {
-        this.showErrors = true
         this.uploadError = true
       }
 
@@ -89,9 +96,9 @@ export default {
       this.attachment = null
       if (this.$refs.attachmentInput) {
         this.$refs.attachmentInput.value = null
+        this.$refs.attachmentInput.disabled = false
       }
-      this.showErrors = false
+      this.clearErrors()
-      this.uploadError = false
       this.changed = true
 
       emitEvent('field-change', this, {
@@ -100,6 +107,10 @@ export default {
         watch: this.watch,
       })
     },
+    clearErrors: function() {
+      this.uploadError = false
+      this.sizeError = false
+    },
   },
 
   computed: {
@@ -114,5 +125,12 @@ export default {
     hideInput: function() {
       return this.hasInitialData && !this.changed
     },
+    showErrors: function() {
+      return (
+        (!this.changed && this.initialErrors) ||
+        this.uploadError ||
+        this.sizeError
+      )
+    },
   },
 }

js/lib/upload.js

@@ -32,9 +32,9 @@ class AzureUploader {
           options,
           function(err, result) {
             if (err) {
-              reject(err)
+              resolve({ ok: false })
             } else {
-              resolve(result)
+              resolve({ ok: true })
             }
           }
         )

templates/components/upload_input.html

@@ -46,6 +46,9 @@
       <template v-if="uploadError">
         <span class="usa-input__message">{{ "forms.task_order.upload_error" | translate }}</span>
       </template>
+      <template v-if="sizeError">
+        <span class="usa-input__message">{{ "forms.task_order.size_error" | translate }}</span>
+      </template>
       {% for error, error_messages in field.errors.items() %}
         <span class="usa-input__message">{{error_messages[0]}}</span>
       {% endfor %}

translations.yaml

@@ -156,6 +156,7 @@ forms:
       length_error: Filename may be no longer than 100 characters.
   task_order:
     upload_error: There was an error uploading your file. Please try again. If you encounter repeated problems uploading this file, please contact CCPO.
+    size_error: The file you have selected is too large. Please choose a file no larger than 64MB.
     app_migration:
       both: 'Yes, migrating from both an on-premise data center <strong>and</strong> another cloud provider'
       cloud: 'Yes, migrating from another cloud provider'
@@ -381,7 +382,7 @@ task_orders:
     pop_start: 'Period of Performance (PoP) start date'
     review_button: Review task order
     supporting_docs_header: Upload your supporting documentation
-    supporting_docs_size_limit: Your file may not exceed 1MB
+    supporting_docs_size_limit: Your file may not exceed 64MB
     supporting_docs_text: Upload a single PDF containing all relevant information.
     step_5:
       title: Confirm Signature