ui-file-upload

Use react-dropzone's useDropzone hook to handle dropped files, then upload each file with axios using FormData and multipart/form-data headers. Wire the component to React Hook Form by passing field.value and field.onChange as props.

Axios provides an onUploadProgress callback in the request config that reports loaded and total bytes. Calculate the percentage and store it in component state to render a progress bar per file during upload.

No, this pattern uploads through a backend API endpoint instead of directly to MinIO for security reasons. The backend receives the multipart file, stores it in MinIO, and returns the file ID and metadata.

Pass an accept object mapping MIME types to extensions, plus maxSize in bytes and maxFiles count to the useDropzone options. Files outside these constraints are rejected before upload begins.

The maxFiles limit must account for already-uploaded files by subtracting the current value length, and the dropzone should be disabled when the limit is reached. Without this check, users can exceed the intended attachment count.