atst/js/components/upload_input.js
leigh-mil 2f5ad6b38b Move event emitter before async function call so it will hopefully trigger the change event on the parent component earlier.
Update this.changed inside if statement because it should only be updated if the file is successfully uploaded.
2019-12-02 14:37:40 -05:00

129 lines
3.0 KiB
JavaScript

import { buildUploader } from '../lib/upload'
import { emitFieldChange } from '../lib/emitters'
export default {
name: 'uploadinput',
props: {
name: String,
filename: {
type: String,
},
objectName: {
type: String,
},
initialErrors: {
type: Boolean,
default: false,
},
portfolioId: {
type: String,
},
},
data: function() {
return {
hasInitialData: !!this.filename,
attachment: this.filename || null,
changed: false,
uploadError: false,
sizeError: false,
downloadLink: '',
}
},
created: async function() {
if (this.hasInitialData) {
this.downloadLink = await this.getDownloadLink(
this.filename,
this.objectName
)
}
},
methods: {
addAttachment: async function(e) {
this.clearErrors()
const file = e.target.files[0]
if (file.size > 64000000) {
this.sizeError = true
return
}
const uploader = await this.getUploader()
const response = await uploader.upload(file)
if (response.ok) {
this.attachment = e.target.value
this.$refs.attachmentFilename.value = file.name
this.$refs.attachmentObjectName.value = response.objectName
this.$refs.attachmentInput.disabled = true
emitFieldChange(this)
this.changed = true
this.downloadLink = await this.getDownloadLink(
file.name,
response.objectName
)
} else {
emitFieldChange(this)
this.changed = true
this.uploadError = true
}
},
removeAttachment: function(e) {
e.preventDefault()
this.attachment = null
if (this.$refs.attachmentInput) {
this.$refs.attachmentInput.value = null
this.$refs.attachmentInput.disabled = false
}
this.clearErrors()
this.changed = true
emitFieldChange(this)
},
clearErrors: function() {
this.uploadError = false
this.sizeError = false
},
getUploader: async function() {
return fetch(`/task_orders/${this.portfolioId}/upload_token`, {
credentials: 'include',
})
.then(response => response.json())
.then(({ token, objectName }) => buildUploader(token, objectName))
},
getDownloadLink: async function(filename, objectName) {
const { downloadLink } = await fetch(
`/task_orders/${
this.portfolioId
}/download_link?filename=${filename}&objectName=${objectName}`,
{ credentials: 'include' }
).then(r => r.json())
return downloadLink
},
},
computed: {
baseName: function() {
if (this.attachment) {
return this.attachment.split(/[\\/]/).pop()
}
},
hideInput: function() {
return this.hasInitialData && !this.changed
},
showErrors: function() {
return (
(!this.changed && this.initialErrors) ||
this.uploadError ||
this.sizeError
)
},
valid: function() {
return !!this.attachment
},
},
}