File drag and drop component.

FileDropzone.js

import React, { useState } from "react";
import { DropzoneDialog } from "material-ui-dropzone";
import PublishIcon from "@material-ui/icons/Publish";
import IconButton from "@material-ui/core/IconButton";
import { ErrorBoundary } from "../ErrorBoundary";
import "./FileDropzone.css";

export const FileDropzone = (props) => {
  const [open, setOpen] = useState(false);

  const onDrop = (accceptedFiles) => {
    accceptedFiles.forEach((file) => {
      const reader = new FileReader();
      reader.readAsText(file);

      reader.onabort = () => console.log("file reading was aborted");
      reader.onerror = () => console.log("file reading has failed");
      reader.onload = () => sendToCloud(reader, props.uploadInfo);
    });
  };

  return (
    <>
      {props.withIcon ? (
        <IconButton onClick={() => setOpen(true)}>
          <PublishIcon color="action" />
        </IconButton>
      ) : null}
      <ErrorBoundary>
        <DropzoneDialog
          acceptedFiles={["text/csv"]}
          cancelButtonText={"cancel"}
          submitButtonText={"submit"}
          filesLimit={1}
          dropzoneClass={"border-primary"}
          maxFileSize={20000}
          dialogTitle={""}
          open={open}
          showPreviews={false}
          showPreviewsInDropzone={false}
          multiple={false}
          dropzoneText={"Drop CSV here or click to browse"}
          onClose={() => setOpen(false)}
          onSave={(files) => {
            onDrop(files);
            setOpen(false);
          }}
        />
      </ErrorBoundary>
    </>
  );
};