Patches axios uploader behavior
This commit is contained in:
parent
1806671194
commit
3fcfa759a9
2
dist/formulate.esm.js
vendored
2
dist/formulate.esm.js
vendored
File diff suppressed because one or more lines are too long
4
dist/formulate.min.js
vendored
4
dist/formulate.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/formulate.umd.js
vendored
2
dist/formulate.umd.js
vendored
File diff suppressed because one or more lines are too long
@ -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)
|
||||
|
@ -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.
|
||||
*/
|
||||
|
@ -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}
|
||||
|
Loading…
x
Reference in New Issue
Block a user