Display file upload errors in form
This commit is contained in:
parent
529a7b71c9
commit
8d7c4672b0
@ -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
|
||||
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user