Hi,
I am struggling with asynchronous calls in onBeforeFileAdded()
. I want to only upload images with a certain image resolution of 12MPX. My implementation rejects files lower than 12mpx successfully. However all other files throw this error:
[Uppy] [12:55:55] Error: Multiple errors occurred while adding files:
* Cannot read property 'size' of undefined
at Uppy.addFiles (index.js?b880:866)
at Dashboard._this.addFiles (index.js?ef92:391)
at Object.Dashboard._this.handleInputChange (index.js?ef92:513)
at Object.AddFiles._this.onFileInputChange [as change] (AddFiles.js?abc5:28)
at HTMLInputElement.eventProxy (preact.esm.js?30bf:308)
Here is a minimal code which produces this behavior.
return new Uppy({
onBeforeFileAdded: async (currentFile, files) => {
// Check mpx
const mpx = await this.getMPX(URL.createObjectURL(currentFile.data))
if (mpx < 12) {
return false
}
return true
},
})
The function calculating the megapixels for a given imageUrl:
getMPX(imgUrl) {
return new Promise((resolve, reject) => {
const img = new Image()
img.onload = () => {
resolve((img.width * img.height) / 1000000)
}
img.onerror = reject
img.src = imgUrl
})
},
If you remove the await
and async
and replace the function with a number (e.g. Math.random()*24) it works (i.e. about 50% of the images are getting uploaded).
I am struggling to find what I am doing wrong. Is an async onBeforeFileAdded()
not working in general? I do have various things to check server side before the file should be uploaded (e.g. duplicate) and wanted to call the api’s in onBeforeFileAdded()
as well.
Any help would be great!