pingdotgg
[bug]:UploadDropZone component in Svelte prompts for multiple files even if endpoint has only one file allowed (then silently fails)
Provide environment information
System:
OS: macOS 14.5
CPU: (8) arm64 Apple M1
Memory: 156.34 MB / 8.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 21.5.0 - ~/.nvm/versions/node/v21.5.0/bin/node
npm: 10.2.4 - ~/.nvm/versions/node/v21.5.0/bin/npm
Browsers:
Chrome: 127.0.6533.120
Safari: 17.5
npmPackages:
typescript: ^5.5.3 => 5.5.3
uploadthing: ^6.13.2 => 6.13.2
Describe the bug
Even though my fileroute specifies that only one file is allowed, the UploadDropzone allows users to select multiple files which will then trigger an error.
fileUploader: f({
'application/pdf': { maxFileSize: '32MB', maxFileCount: 1, minFileCount: 1 },
'application/vnd.openxmlformats-officedocument.wordprocessingml.document': {
maxFileSize: '32MB'
},
'application/vnd.openxmlformats-officedocument.presentationml.presentation': {
maxFileSize: '32MB'
},
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': {
maxFileSize: '32MB'
},
'application/vnd.oasis.opendocument.text': {
maxFileSize: '32MB'
},
'application/vnd.oasis.opendocument.presentation': {
maxFileSize: '32MB'
},
'application/vnd.oasis.opendocument.spreadsheet': {
maxFileSize: '32MB'
}
})
Here is my component usage:
const uploader = createUploader('fileUploader', {
onBeforeUploadBegin: (files) => {
filesList = files
return files
},
onClientUploadComplete: (res) => {
showFiles = true
filesUploadedStore.set(res)
},
onUploadError: (error) => {
console.error('Uploadthing Error', error)
toast.error('Error uploading file')
Sentry.captureException(error)
}
})
....
<UploadDropzone {uploader} />
I cannot find any way to prevent the file selector from allowing for multiple uploads. The documentation is pretty limited for svelte and trying to decipher the types is very difficult.
Is there a way to do this?
I have marked this as a bug since <UploadButton {uploader} /> works as expected only allowing for one file to be chosen.
Link to reproduction
None provided!
To reproduce
- In a sveltekit project create a route which only allows for one file ex/
strictImageAttachment: f({
image: { maxFileSize: "2MB", maxFileCount: 1, minFileCount: 1 },
})
.middleware(({ req }) => auth(req))
.onUploadComplete((data) => console.log("file", data))
- Use this route with the UploadDropzone component (through uploader)
- User will be allowed to select multiple files which will trigger an error.
Additional information
No response
👨👧👦 Contributing
- [ ] 🙋♂️ Yes, I'd be down to file a PR fixing this bug!
Code of Conduct
- [X] I agree to follow this project's Code of Conduct
@Pascaltib Confirmed this behaviour, I think I may have already addressed it as part of #886, but there are still some outstanding issues in that PR that I have not resolved yet. (unfortunately I am not super familiar with svelte, so it has been slow for me to work on)
You can try the canary linked in that PR, although the dropzone button is not working for some reason, which may be a worse behavior :/
Those changes are now in the latest released version of the uploadthing/svelte package! Feel free to reopen if you are still facing issues!
Hey @markflorkowski. Unfortunately the behaviour of the UploadDropZone remains bugged.
It is actually a bit worse now since before it would throw an error but now it silently fails and remains stuck.
Could you reopen this issue? I do not have the permissions to do so.
I am using: "@uploadthing/svelte": "^6.7.0", "uploadthing": "^6.13.3"
Hey @Pascaltib sorry to hear that. Will try to take a look this week.
I am using: "@uploadthing/svelte": "^6.7.0", "uploadthing": "^6.13.3"
@Pascaltib - just as a sanity check, can you remove the carets, delete your node_modules and do a clean install to see if the issue persists?
Thank you for confirming that :/ Haven't had a chance to dig in on this yet, but I promise I have not forgotten.
+1 getting this error on v7 with sveltekit :
14:53:51.959 INFO handleUploadAction Sending presigned URLs to client
ᐉ { "presignedUrls": [{"url":"https://sea1.ingest.uploadthing.com/pc9M973G6Mu8mSUVK8wwqJ0Td4H3rx1j9zsPl7KQ2aYLOAZX?expires=1727182431954&x-ut-identifier=3lmh1ldr8g&x-ut-file-name=main-qimg-bc54d4d995526ae5eb9877c1c00ce725-lq.jfif&x-ut-file-size=113049&x-ut-file-type=image%252Fjpeg&x-ut-slug=imageUploader&x-ut-content-disposition=inline&signature=hmac-sha256%3Dc23a4f2245bfee6cafea6c9b430c4d30d85f7d2fcd4bb3fae9670281a4ca78e7","key":"pc9M973G6Mu8mSUVK8wwqJ0Td4H3rx1j9zsPl7KQ2aYLOAZX","name":"main-qimg-bc54d4d995526ae5eb9877c1c00ce725-lq.jfif","customId":null}] }
14:53:54.677 INFO handleUploadAction -> handleJsonLineStream Successfully simulated 'callback' event
14:53:54.988 ERROR handleCallbackRequest Failed to register callback result (400)
ᐉ { "error": {"error":"Invalid request body","details":[{"code":"invalid_type","expected":"object","received":"string","path":["callbackData"],"message":"Expected object, received string"}]} }
The image does upload however it doesn't return a response object
Work in progres for this, as well as issues in other framework adapters - https://github.com/pingdotgg/uploadthing/pull/980
@cliffordkleinsr Your issue looks related to this: https://github.com/pingdotgg/uploadthing/pull/968
Make sure to return an object from onUploadComplete. Next patch you'll get a type error if you don't return an object
Confirmed the original issue is fixed by #980. Release will be out shortly
不要下载我前段时间发的文件，那不是我发的，是另一个人控制我，如果你使用了这个病毒文件，你也会被控制，并且疯狂转发这个病毒 Don't download the file I sent some time ago, it wasn't me, but another person controlled me. If you use this virus file, you will also be controlled and forward this virus crazily.
