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 () {
|
uploaderIsAxios () {
|
||||||
if (
|
if (
|
||||||
this.hasUploader &&
|
this.hasUploader &&
|
||||||
typeof this.hasUploader.request === 'function' &&
|
typeof this.context.uploader.request === 'function' &&
|
||||||
typeof this.hasUploader.get === 'function' &&
|
typeof this.context.uploader.get === 'function' &&
|
||||||
typeof this.hasUploader.delete === 'function' &&
|
typeof this.context.uploader.delete === 'function' &&
|
||||||
typeof this.hasUploader.post === 'function'
|
typeof this.context.uploader.post === 'function'
|
||||||
) {
|
) {
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
@ -76,14 +79,19 @@ class FileUpload {
|
|||||||
if (this.uploaderIsAxios()) {
|
if (this.uploaderIsAxios()) {
|
||||||
const formData = new FormData()
|
const formData = new FormData()
|
||||||
formData.append(this.context.name || 'file', args[0])
|
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: {
|
headers: {
|
||||||
'Content-Type': 'multipart/form-data'
|
'Content-Type': 'multipart/form-data'
|
||||||
},
|
},
|
||||||
onUploadProgress: progressEvent => {
|
onUploadProgress: progressEvent => {
|
||||||
|
// args[1] here is the upload progress handler function
|
||||||
args[1](Math.round((progressEvent.loaded * 100) / progressEvent.total))
|
args[1](Math.round((progressEvent.loaded * 100) / progressEvent.total))
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
.then(res => res.data)
|
||||||
.catch(err => args[2](err))
|
.catch(err => args[2](err))
|
||||||
}
|
}
|
||||||
return this.context.uploader(...args)
|
return this.context.uploader(...args)
|
||||||
|
@ -43,6 +43,7 @@ class Formulate {
|
|||||||
rules,
|
rules,
|
||||||
locale: 'en',
|
locale: 'en',
|
||||||
uploader: fauxUploader,
|
uploader: fauxUploader,
|
||||||
|
uploadUrl: false,
|
||||||
uploadJustCompleteDuration: 1000,
|
uploadJustCompleteDuration: 1000,
|
||||||
plugins: [],
|
plugins: [],
|
||||||
locales: {
|
locales: {
|
||||||
@ -162,6 +163,13 @@ class Formulate {
|
|||||||
return this.options.uploader || false
|
return this.options.uploader || false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the global upload url.
|
||||||
|
*/
|
||||||
|
getUploadUrl () {
|
||||||
|
return this.options.uploadUrl || false
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Create a new instance of an upload.
|
* Create a new instance of an upload.
|
||||||
*/
|
*/
|
||||||
|
@ -21,7 +21,7 @@ export default {
|
|||||||
attributes: this.elementAttributes,
|
attributes: this.elementAttributes,
|
||||||
blurHandler: blurHandler.bind(this),
|
blurHandler: blurHandler.bind(this),
|
||||||
imageBehavior: this.imageBehavior,
|
imageBehavior: this.imageBehavior,
|
||||||
uploadUrl: this.uploadUrl,
|
uploadUrl: this.mergedUploadUrl,
|
||||||
uploader: this.uploader || this.$formulate.getUploader(),
|
uploader: this.uploader || this.$formulate.getUploader(),
|
||||||
uploadBehavior: this.uploadBehavior,
|
uploadBehavior: this.uploadBehavior,
|
||||||
preventWindowDrops: this.preventWindowDrops,
|
preventWindowDrops: this.preventWindowDrops,
|
||||||
@ -37,7 +37,8 @@ export default {
|
|||||||
mergedErrors,
|
mergedErrors,
|
||||||
hasErrors,
|
hasErrors,
|
||||||
showFieldErrors,
|
showFieldErrors,
|
||||||
mergedValidationName
|
mergedValidationName,
|
||||||
|
mergedUploadUrl
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -111,6 +112,14 @@ function mergedValidationName () {
|
|||||||
return this.type
|
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)
|
* Determines if the field should show it's error (if it has one)
|
||||||
* @return {boolean}
|
* @return {boolean}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user