Allow user to download a previously uploaded pdf

js/components/__tests__/upload_input.test.js

@@ -8,7 +8,8 @@ const UploadWrapper = makeTestWrapper({
   components: { uploadinput },
   templatePath: 'upload_input_template.html',
   data: function() {
-    return { initialvalue: this.initialData.initialvalue, token: this.token }
+    const { filename, objectName } = this.initialData
+    return { filename, objectName }
   },
 })
 
@@ -16,7 +17,7 @@ const UploadErrorWrapper = makeTestWrapper({
   components: { uploadinput },
   templatePath: 'upload_input_error_template.html',
   data: function() {
-    return { initialvalue: null, token: null }
+    return { filename: null, objectName: null }
   },
 })
 
@@ -24,7 +25,7 @@ describe('UploadInput Test', () => {
   it('should show input and button when no attachment present', () => {
     const wrapper = mount(UploadWrapper, {
       propsData: {
-        initialData: { initialvalue: null, token: 'token' },
+        initialData: {},
       },
     })
 
@@ -35,21 +36,24 @@ describe('UploadInput Test', () => {
   it('should show file name and hide input', () => {
     const wrapper = mount(UploadWrapper, {
       propsData: {
-        initialData: { initialvalue: 'somepdf.pdf', token: 'token' },
+        initialData: {
+          filename: 'somepdf.pdf',
+          objectName: 'abcd',
+        },
       },
     })
 
     const fileInput = wrapper.find('input[type=file]').element
-    const fileNameSpan = wrapper.find('.uploaded-file__name')
+    const fileNameLink = wrapper.find('.uploaded-file__name')
 
     expect(fileInput).toBe(undefined)
-    expect(fileNameSpan.html()).toContain('somepdf.pdf')
+    expect(fileNameLink.html()).toContain('somepdf.pdf')
   })
 
   it('should correctly display error treatment', () => {
     const wrapper = mount(UploadErrorWrapper, {
       propsData: {
-        initialData: { initialvalue: 'somepdf.pdf', token: 'token' },
+        initialData: { initialvalue: 'somepdf.pdf', objectName: 'abcd' },
       },
     })
 

js/components/upload_input.js

@@ -17,8 +17,11 @@ export default {
 
   props: {
     name: String,
-    initialData: {
-      type: Object,
+    filename: {
+      type: String,
+    },
+    objectName: {
+      type: String,
     },
     initialErrors: {
       type: Boolean,
@@ -38,8 +41,8 @@ export default {
 
   data: function() {
     return {
-      hasInitialData: !!this.initialData,
-      attachment: this.initialData.filename || null,
+      hasInitialData: false,
+      attachment: this.filename || null,
       changed: false,
       uploadError: false,
       sizeError: false,
@@ -54,9 +57,12 @@ export default {
       valid: this.hasAttachment,
     })
 
+    this.hasInitialData = !!this.filename
     if (this.hasInitialData) {
-      const { filename, objectName } = this.initialData
-      this.downloadLink = await this.getDownloadLink(filename, objectName)
+      this.downloadLink = await this.getDownloadLink(
+        this.filename,
+        this.objectName
+      )
     }
   },
 

js/test_templates/upload_input_error_template.html

@@ -13,7 +13,7 @@
       
       <span class="icon icon--check-circle-solid " aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
   
-      <span class="uploaded-file__name" v-html="baseName"></span>
+      <a class="uploaded-file__name" v-html="baseName" v-bind:href="downloadLink"></a>
       <a href="#" class="uploaded-file__remove" v-on:click="removeAttachment">Remove</a>
     </div>
     <div v-show="hasAttachment === false" v-bind:class='{ "usa-input": true, "usa-input--error": showErrors }'>

js/test_templates/upload_input_template.html

@@ -1,7 +1,8 @@
 <uploadinput
   inline-template
   
-    v-bind:initial-data='initialvalue'
+    v-bind:filename='filename'
+    v-bind:object-name='objectName'
   
   v-bind:watch='false'
   v-bind:portfolio-id="''"
@@ -13,7 +14,7 @@
       
       <span class="icon icon--check-circle-solid " aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
   
-      <span class="uploaded-file__name" v-html="baseName"></span>
+      <a class="uploaded-file__name" v-html="baseName" v-bind:href="downloadLink"></a>
       <a href="#" class="uploaded-file__remove" v-on:click="removeAttachment">Remove</a>
     </div>
     <div v-show="hasAttachment === false" v-bind:class='{ "usa-input": true, "usa-input--error": showErrors }'>

templates/components/upload_input.html

@@ -4,7 +4,8 @@
 <uploadinput
   inline-template
   {% if not field.errors %}
-    v-bind:initial-data='{{ {"filename": field.filename.data, "objectName": field.object_name.data} | tojson }}'
+    v-bind:filename='{{ field.filename.data | tojson }}'
+    v-bind:object-name='{{ field.object_name.data | tojson }}'
   {% else %}
     v-bind:initial-errors='true'
   {% endif %}
@@ -16,7 +17,7 @@
   <div>
     <div v-show="hasAttachment" class="uploaded-file">
       {{ Icon("check-circle-solid") }}
-      <a class="uploaded-file__name" v-html="baseName" v-bind:href="downloadLink"></span>
+      <a class="uploaded-file__name" v-html="baseName" v-bind:href="downloadLink"></a>
       <a href="#" class="uploaded-file__remove" v-on:click="removeAttachment">Remove</a>
     </div>
     <div v-show="hasAttachment === false" v-bind:class='{ "usa-input": true, "usa-input--error": showErrors }'>

tests/render_vue_component.py

@@ -15,8 +15,8 @@ class InitialValueForm(Form):
 
 
 class TaskOrderPdfForm(Form):
-    filename = StringField(default="initialvalue")
-    object_name = StringField()
+    filename = StringField(default="filename")
+    object_name = StringField(default="objectName")
 
     errorfield = StringField(
         label="error", validators=[InputRequired(message="Test Error Message")]