From 8d7c4672b02f25efcb40de0c7ced11f566104549 Mon Sep 17 00:00:00 2001
From: richard-dds <richard-ctr@friends.dds.mil>
Date: Fri, 9 Aug 2019 14:45:21 -0400
Subject: [PATCH] Display file upload errors in form

---
 js/components/upload_input.js          | 10 ++++++----
 templates/components/upload_input.html | 10 +++++-----
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/js/components/upload_input.js b/js/components/upload_input.js
index 22a7c81c..4a6a057f 100644
--- a/js/components/upload_input.js
+++ b/js/components/upload_input.js
@@ -48,6 +48,7 @@ export default {
       attachment: this.initialData || null,
       showErrors: this.initialErrors,
       changed: false,
+      uploadError: null,
     }
   },
 
@@ -63,15 +64,16 @@ export default {
   methods: {
     addAttachment: async function(e) {
       const file = e.target.files[0]
-      try {
-        await this.uploader.upload(file, this.objectName)
+
+      const response = await this.uploader.upload(file, this.objectName)
+      if (response.ok) {
         this.attachment = e.target.value
         this.showErrors = false
         this.$refs.attachmentFilename.value = file.name
         this.$refs.attachmentObjectName.value = this.objectName
-      } catch (err) {
-        console.log(err)
+      } else {
         this.showErrors = true
+        this.uploadError = 'Your file failed to upload. Please try again later.'
       }
 
       this.changed = true
diff --git a/templates/components/upload_input.html b/templates/components/upload_input.html
index 6e71d157..f98a9f6a 100644
--- a/templates/components/upload_input.html
+++ b/templates/components/upload_input.html
@@ -30,9 +30,6 @@
           <span class="upload-button">
             Browse
           </span>
-          {% if field.errors %}
-            <span v-show="showErrors">{{ Icon('alert',classes="icon-validation") }}</span>
-          {% endif %}
         </label>
         <input
           v-on:change="addAttachment"
@@ -46,8 +43,11 @@
           <input type="hidden" name="{{ field.filename.name }}" id="{{ field.filename.name }}" ref="attachmentFilename">
           <input type="hidden" name="{{ field.object_name.name }}" id="{{ field.object_name.name }}" ref="attachmentObjectName">
       </div>
-      {% for error, error_message in field.errors.items() %}
-        <span v-show="showErrors" class="usa-input__message">{{error_message}}</span>
+      <template v-if="uploadError">
+        <span v-show="showErrors" class="usa-input__message">!{uploadError}</span>
+      </template>
+      {% for error, error_messages in field.errors.items() %}
+        <span v-show="showErrors" class="usa-input__message">{{error_messages[0]}}.</span>
       {% endfor %}
     </div>
   </div>