feat: Showing image preview of selected file before uploading

[growupanand]

Describe the feature you'd like to request

Currently, I am using UploadDropzone to handle the whole image upload flow. I can show a preview of the image by using the generated image URL. But if I want to show an image preview or do something with the selected file before even clicking on the upload button, there is no way I can access the selected file.

Describe the solution you'd like to see

There should be an option in the configuration like onFileSelect, where I can pass a callback function to get access to the selected file.

<UploadDropzone
      onFileSelect={(selectedFile)=>{
        // here i can access the selected file
      }}
    />

Additional information

No response

👨‍👧‍👦 Contributing

• [X] 🙋‍♂️ Yes, I'd be down to file a PR implementing this feature!

[juliusmarminge]

yea I think we should expose the onDrop prop publically

[growupanand]

Can I try to work on this issue?

[juliusmarminge]

Sure!

[growupanand]

can you please assign this issue to me?

[juliusmarminge]

Just work on it and submit a draft PR when you got something to show others you're working on it

[growupanand]

Can you please check my PR? - https://github.com/pingdotgg/uploadthing/pull/809#issuecomment-2110778736