Closed SaadBazaz closed 9 months ago
I added drag-and-drop functionality by creating a component like this:
import * as React from "react";
import { useDropzone } from "react-dropzone";
export default function FileDropzone({ onDrop, children, ...props }) {
const onDropFiles = React.useCallback(
(acceptedFiles: any) => {
onDrop(acceptedFiles);
},
[onDrop],
);
const { getRootProps, getInputProps } = useDropzone({
onDrop: onDropFiles,
noClick: true,
...props,
});
return (
<div {...getRootProps()}>
<input {...getInputProps()} />
{children}
</div>
);
}
And then wrapping the MuiFileInput
component inside it like this:
<FileDropzone
onDrop={setInvoiceFiles}
accept={{ "application/pdf": [] }}
>
<MuiFileInput
multiple
label="Invoice (PDF)*"
margin="normal"
placeholder="Upload file(s)"
value={invoiceFiles}
onChange={handleInvoiceFileChange}
inputProps={{
accept: "application/pdf",
}}
fullWidth
/>
{isInvoiceUploading && (
<LinearProgressWithLabel value={invoiceUploadProgress} />
)}
</FileDropzone>
Is your feature request related to a problem? Please describe. Drag and drop is a more-or-less common feature of file input fields.
Describe the solution you'd like A simple react-dropzone impl might be good. Else, if people think it might increase bundle size, a few official examples in the documentation would help.
Describe alternatives you've considered A custom component which already does 60-70% of what mui-file-input does.