How to use react-dropzone - 10 common examples

function Upload(props) {
  const onDrop = useCallback(acceptedFiles => {
    props.setFilename(acceptedFiles[0].name);
    props.callback(acceptedFiles);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

  return (
    <div>
      <input>
      {isDragActive ? <p>upload or drag STL files</p> : <p>upload STL files</p>}
      {props.filename ? <p>Filename: {props.filename}</p> : null}
    </div>
  );
}

function Wrapper() {
  const [maki, setMaki] = React.useState(null);
  const onDrop = React.useCallback(async acceptedFiles => {
    if (acceptedFiles.length !== 1) {
      alert("Only drop one file at a time");
      return;
    }
    const file = acceptedFiles[0];
    const arrayBuffer = await readFileAsArrayBuffer(file);
    setMaki(arrayBuffer);
    // Do something with the files
  }, []);
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
  return (
    <div style="{{">
      {maki == null ? (
        &lt;&gt;
          <h1 style="{{">
            Drop a .maki file here to debug
          </h1>
          <input type="file">
        </div>

if (response.status !== 200) {
      // The upload failed, so let's notify the caller.
      setUploading(false)
      onError && onError()
      return
    }
    // Let the caller know that the upload is done, so that it can send the URL
    // to the backend again, persisting it to the database.

    setUploading(false)
    onUploadReady && onUploadReady()
  }

  return {
    ...useDropzone({
      accept: "image/*",
      disabled: typeof presignedUploadUrl !== "string",
      onDrop,
    }),
    uploading,
  }
}

setFile(url)
  })

  // Update source
  React.useEffect(() => {
    setSource(query.src || file)
  }, [file, query])

  const onDrop = React.useCallback(
    acceptedFiles => {
      handleFileChange(acceptedFiles)
    },
    [handleFileChange]
  )

  const { getRootProps, isDragActive } = useDropzone({ onDrop })

  return !source ? (
    
      <section>
        {!isDragActive ? (
          <div>
            <div>
              <b>Select</b> comic book or <b>drop</b> it here
            </div>
            <div>
              
              <button>Try example</button>
            </div>
            <div>
              <b>Enter</b> a valid url of the comic book
            </div></div></section>

function Upload(props) {
  const onDrop = useCallback(acceptedFiles => {
    props.setFilename(acceptedFiles[0].name);
    props.callback(acceptedFiles);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

  return (
    <div>
      <input>
      {isDragActive ? <p>upload or drag STL files</p> : <p>upload STL files</p>}
      {props.filename}
    </div>
  );
}

) : (
      <div>
        {' '}
        {file.name}
      </div>
    )}
  
)

FilePicker.propTypes = {
  // React Dropzone
  ...Dropzone.propTypes,

  // State
  message: PropTypes.node
}

FilePicker.defaultProps = {
  // State
  message: 'Drag file or click here'
}

export default FilePicker

<small>{message}</small>
    <button size="small" type="ternary">
      {buttonMessage}
    </button>
    {imageFilePreviewURL &amp;&amp; (
      <div style="{{">
    )}
  
)

FilePicker.propTypes = {
  // React Dropzone
  ...Dropzone.propTypes,

  // State
  message: PropTypes.node,
  buttonMessage: PropTypes.node,
  imageFilePreviewURL: PropTypes.string
}

FilePicker.defaultProps = {
  // State
  message: 'Drag file here or',
  buttonMessage: 'Browse Image',
  imageFilePreviewURL: null
}

export default FilePicker
</div>

import React from "react"
import PropTypes from "prop-types"
import Dropzone from "react-dropzone"

Dropzone.displayName = "Dropzone" // For testing

export default class EditorLayout extends React.Component {

  static propTypes = {
    errSelectors: PropTypes.object.isRequired,
    errActions: PropTypes.object.isRequired,
    specActions: PropTypes.object.isRequired,
    getComponent: PropTypes.func.isRequired,
    layoutSelectors: PropTypes.object.isRequired,
    layoutActions: PropTypes.object.isRequired
  }

  onChange = (newYaml, origin="editor") => {
    this.props.specActions.updateSpec(newYaml, origin)
  }

const [columnKey, setColumnKey] = useState();
  const [csvData, setCsvData] = useState([]);
  const onDrop = useCallback(async acceptedFiles => {
    const file = acceptedFiles[0];
    var reader = new FileReader();
    reader.onload = function(event: any) {
      const csvString = event.target.result;
      parse(csvString, {}, function(err, output) {
        const keys = output.shift();
        setCsvData(output);
        setCsvKeys(keys);
      });
    };
    reader.readAsText(file);
  }, []);
  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    multiple: false,
  });
  function handleClickOpen() {
    setOpen(true);
  }

  function handleClose() {
    setOpen(false);
    setKeyPairs([]);
    setCsvKeys([]);
    setCsvKey(null);
    setColumnKey(null);
  }
  function handleImport() {
    const newDocs = csvData.map((row: any[]) => {

data: b64data,
          };
          return fileData;
        })
        .then(fileData => {
          props.onFilePicked({ file: fileData });
        });
    });
  }, []);
  const {
    getRootProps,
    getInputProps,
    isDragActive,
    isDragReject,
    isDragAccept,
  } = useDropzone({ onDrop });

  const icon = isDragReject ? "#ico36_close" : "#illu_drag_here";

  return (
    
      <div>
        </div>