Drag and drop

[SaadBazaz]

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.

[eterry1388]

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>