# File Upload

File upload is powered by the plugin react-dropzone. Please refer there documentation for further details and instructions here https://github.com/react-dropzone/react-dropzone/

# Importing

import { useDropzone } from "react-dropzone";
import "react-bootstrap-typeahead/css/Typeahead.css";

# How to use

const [files, setFiles] = useState([]);
const [hasFileUploaded, setHasFileUploaded] = useState(false);

const {
    getRootProps,
    getInputProps,
    isDragActive,
    isDragAccept,
    isDragReject,
  } = useDropzone({
    accept: "image/*",
    onDrop: (acceptedFiles) => {
      let temp_file = files;
      temp_file.push(
        acceptedFiles.map((file) =>
          Object.assign(file, {
            preview: URL.createObjectURL(file),
          })
        )
      );
      setFiles(temp_file);
        setHasFileUploaded(true);
    },
  });

const options = [
    "Default",
    "Medium",
    "Hard",
]

 <section className="container file-upload">
      <div {...getRootProps({ style })}>
        <input {...getInputProps()} />
        {hasFileUploaded ? (
          <div className="w-100 d-flex files">
            <aside>
              {thumbs}
            </aside>
          </div>
        ) : (
          <div>
            <p style={dropHeaderStyle}>
              Drop files <strong>to upload</strong>
            </p>
            <p style={dropTextStyle}>or click here</p>
          </div>
        )}
      </div>
 </section>