search

files-ui / files-ui-react

UI components for file uploads with React js. Files UI is a complete library for handling files in the UI. You can validate and upload them. Multilanguage. Server side support.
https://www.files-ui.com
MIT License
42 stars 7 forks source link

FEATURE REQUEST: Allow client-side processing of files before uploading #39

Open OneHatRepo opened 1 week ago

OneHatRepo commented 1 week ago

I'd like to be able to resize images on the client side before uploading them to the server. This would require some way to hook into the upload process.

I've tried Dropzone.onChange, but processing the images requires onChange to be an async handler, and it's currently not. i.e. If onChange returns a Promise, it would await that Promise before continuing on with the upload.

I've also tried the actionButtons / uploadButton with autoUpload = false. Using this prevents the automatic upload, and assigning an onClick handler to the uploadButton means I get to process the event, but I seem to have no way to initiate the upload once the processing is done. Is there a way to initiate the upload externally? That would solve the problem.

Pooyahmti commented 1 week ago

Being able to do these requires you to edit the source code. for example I've implemented the custom upload button by passing a state to the dropzone component and using it inside a useEffect hook .

OneHatRepo commented 1 week ago

@Pooyahmti I forked the repository and made a few tweaks to @files-ui/react/build/index.es.js, and that worked, but I'd rather have something actually built into the library. It seems like other people would like to be able to publicly access the uploadfiles() method of Dropzone.