pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Display file upload errors in form

Browse Source
This commit is contained in:
richard-dds 2019-08-09 14:45:21 -04:00
parent 529a7b71c9
commit 8d7c4672b0
2 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
js/components/upload_input.js
View File

@ -48,6 +48,7 @@ export default {
attachment: this.initialData || null, attachment: this.initialData || null,
showErrors: this.initialErrors, showErrors: this.initialErrors,
changed: false, changed: false,
uploadError: null,
} }
}, },
@ -63,15 +64,16 @@ export default {
methods: { methods: {
addAttachment: async function(e) { addAttachment: async function(e) {
const file = e.target.files[0] 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.attachment = e.target.value
this.showErrors = false this.showErrors = false
this.$refs.attachmentFilename.value = file.name this.$refs.attachmentFilename.value = file.name
this.$refs.attachmentObjectName.value = this.objectName this.$refs.attachmentObjectName.value = this.objectName
} catch (err) { } else {
console.log(err)
this.showErrors = true this.showErrors = true
this.uploadError = 'Your file failed to upload. Please try again later.'
} }
this.changed = true this.changed = true

10
templates/components/upload_input.html
View File

@ -30,9 +30,6 @@
<span class="upload-button"> <span class="upload-button">
Browse Browse
</span> </span>
{% if field.errors %}
<span v-show="showErrors">{{ Icon('alert',classes="icon-validation") }}</span>
{% endif %}
</label> </label>
<input <input
v-on:change="addAttachment" 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.filename.name }}" id="{{ field.filename.name }}" ref="attachmentFilename">
<input type="hidden" name="{{ field.object_name.name }}" id="{{ field.object_name.name }}" ref="attachmentObjectName"> <input type="hidden" name="{{ field.object_name.name }}" id="{{ field.object_name.name }}" ref="attachmentObjectName">
</div> </div>
{% for error, error_message in field.errors.items() %} <template v-if="uploadError">
<span v-show="showErrors" class="usa-input__message">{{error_message}}</span> <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 %} {% endfor %}
</div> </div>
</div> </div>