[bug]:UploadDropZone component in Svelte prompts for multiple files even if endpoint has only one file allowed (then silently fails)

[Pascaltib]

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

1. 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))

2. Use this route with the UploadDropzone component (through uploader)
3. 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

• I agree to follow this project's Code of Conduct

[markflorkowski]

@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)

[Pascaltib]

I see! Good luck :)

[markflorkowski]

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 :/

[markflorkowski]

Those changes are now in the latest released version of the uploadthing/svelte package! Feel free to reopen if you are still facing issues!

[MinecraftEarthVillage]

十分抱歉 ！我的账户在前段时间被黑客盗用，并且传播相同的病毒文件，如果你们遇到要下载一个fix.zip的千万不要下载！就是它导致我账户被攻占的

[Pascaltib]

That's awesome! I'll try it out and let you know if I have any issues 🙏

[Pascaltib]

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"

[markflorkowski]

Hey @Pascaltib sorry to hear that. Will try to take a look this week.

[markflorkowski]

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?

[Pascaltib]

Issue persists after clean install without carets 🥲

[markflorkowski]

Thank you for confirming that :/ Haven't had a chance to dig in on this yet, but I promise I have not forgotten.

[Pascaltib]

Any updates on this @markflorkowski?

[cliffordkleinsr]

+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

[markflorkowski]

Work in progres for this, as well as issues in other framework adapters - #980

[juliusmarminge]

@cliffordkleinsr Your issue looks related to this: #968

Make sure to return an object from onUploadComplete. Next patch you'll get a type error if you don't return an object

[juliusmarminge]

Confirmed the original issue is fixed by #980. Release will be out shortly