1
0
mirror of synced 2025-01-31 14:51:41 +03:00

Patches axios uploader behavior

This commit is contained in:
Justin Schroeder 2020-03-01 13:28:46 -05:00
parent 1806671194
commit 3fcfa759a9
6 changed files with 37 additions and 12 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -54,15 +54,18 @@ class FileUpload {
}
/**
* Check if the given uploader is axios instance.
* Check if the given uploader is axios instance. This isn't a great way of
* testing if it is or not, but AFIK there isn't a better way right now:
*
* https://github.com/axios/axios/issues/737
*/
uploaderIsAxios () {
if (
this.hasUploader &&
typeof this.hasUploader.request === 'function' &&
typeof this.hasUploader.get === 'function' &&
typeof this.hasUploader.delete === 'function' &&
typeof this.hasUploader.post === 'function'
typeof this.context.uploader.request === 'function' &&
typeof this.context.uploader.get === 'function' &&
typeof this.context.uploader.delete === 'function' &&
typeof this.context.uploader.post === 'function'
) {
return true
}
@ -76,14 +79,19 @@ class FileUpload {
if (this.uploaderIsAxios()) {
const formData = new FormData()
formData.append(this.context.name || 'file', args[0])
return this.uploader.post(this.context.uploadUrl, formData, {
if (this.context.uploadUrl === false) {
throw new Error('No uploadURL specified: https://vueformulate.com/guide/inputs/file/#props')
}
return this.context.uploader.post(this.context.uploadUrl, formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: progressEvent => {
// args[1] here is the upload progress handler function
args[1](Math.round((progressEvent.loaded * 100) / progressEvent.total))
}
})
.then(res => res.data)
.catch(err => args[2](err))
}
return this.context.uploader(...args)

View File

@ -43,6 +43,7 @@ class Formulate {
rules,
locale: 'en',
uploader: fauxUploader,
uploadUrl: false,
uploadJustCompleteDuration: 1000,
plugins: [],
locales: {
@ -162,6 +163,13 @@ class Formulate {
return this.options.uploader || false
}
/**
* Get the global upload url.
*/
getUploadUrl () {
return this.options.uploadUrl || false
}
/**
* Create a new instance of an upload.
*/

View File

@ -21,7 +21,7 @@ export default {
attributes: this.elementAttributes,
blurHandler: blurHandler.bind(this),
imageBehavior: this.imageBehavior,
uploadUrl: this.uploadUrl,
uploadUrl: this.mergedUploadUrl,
uploader: this.uploader || this.$formulate.getUploader(),
uploadBehavior: this.uploadBehavior,
preventWindowDrops: this.preventWindowDrops,
@ -37,7 +37,8 @@ export default {
mergedErrors,
hasErrors,
showFieldErrors,
mergedValidationName
mergedValidationName,
mergedUploadUrl
}
/**
@ -111,6 +112,14 @@ function mergedValidationName () {
return this.type
}
/**
* Use the uploadURL on the input if it exists, otherwise use the uploadURL
* that is defined as a plugin option.
*/
function mergedUploadUrl () {
return this.uploadUrl || this.$formulate.getUploadUrl()
}
/**
* Determines if the field should show it's error (if it has one)
* @return {boolean}