title: How can I have multiple dropzones on one page that preview multiple images when using react-dropzone?
body: <p>I am using react-dropzone on my app and would like to have multiple dropzones on one page to preview multiple images. For example, I would like to be able to drop a hero image onto a dropzone that displays the hero image on the top of the page. I would then like to drop a different image onto a different dropzone that displays the image in a thumbnail container.</p>
  <pre><code>import React, { useState, useMemo, useEffect } from &quot;react&quot;;
  import Container from &quot;../components/Container&quot;;
  import { useDropzone } from &quot;react-dropzone&quot;;
  
  const Test = () =&gt; {
    // Dropzone
    const baseStyle = {
      flex: 1,
      display: &quot;flex&quot;,
      flexDirection: &quot;column&quot;,
      alignItems: &quot;center&quot;,
      padding: &quot;20px&quot;,
      borderWidth: 2,
      borderRadius: 2,
      borderColor: &quot;#eeeeee&quot;,
      borderStyle: &quot;dashed&quot;,
      backgroundColor: &quot;#fafafa&quot;,
      color: &quot;#bdbdbd&quot;,
      outline: &quot;none&quot;,
      transition: &quot;border .24s ease-in-out&quot;,
    };
  
    const activeStyle = {
      borderColor: &quot;#2196f3&quot;,
    };
  
    const acceptStyle = {
      borderColor: &quot;#00e676&quot;,
    };
  
    const rejectStyle = {
      borderColor: &quot;#ff1744&quot;,
    };
  
    const [files, setFiles] = useState({});
    const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject } = useDropzone({
      accept: &quot;image/*&quot;,
      onDrop: (acceptedFiles) =&gt; {
        console.log(acceptedFiles);
        setFiles(
          Object.assign(acceptedFiles[0], {
            preview: URL.createObjectURL(acceptedFiles[0]),
          })
        );
      },
    });
  
    const style = useMemo(
      () =&gt; ({
        ...baseStyle,
        ...(isDragActive ? activeStyle : {}),
        ...(isDragAccept ? acceptStyle : {}),
        ...(isDragReject ? rejectStyle : {}),
      }),
      [isDragActive, isDragReject, isDragAccept]
    );
  
    useEffect(
      () =&gt; () =&gt; {
        // Make sure to revoke the data uris to avoid memory leaks
        URL.revokeObjectURL(files.preview);
      },
      [files]
    );
  
    return (
      &lt;Container&gt;
        {/* This would be the dropzone for the Hero image */}
        &lt;div&gt;
          &lt;div {...getRootProps({ style })}&gt;
            &lt;input {...getInputProps()} /&gt;
            &lt;span style={{ fontSize: &quot;.8rem&quot; }}&gt;Drop hero image here, or click to select file&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        {/* This would be the dropzone for the Thumbnail image */}
        &lt;div&gt;
          &lt;div {...getRootProps({ style })}&gt;
            &lt;input {...getInputProps()} /&gt;
            &lt;span style={{ fontSize: &quot;.8rem&quot; }}&gt;Drop hero image here, or click to select file&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        {/* This would be where the Hero image is displayed */}
        &lt;img
          style={{ width: &quot;600px&quot;, height: &quot;200px&quot;, margin: &quot;0&quot;, display: &quot;block&quot; }}
          src={files.preview ? files.preview : &quot;https://via.placeholder.com/600x200&quot;}
          alt=&quot;Hero Image&quot;
        /&gt;
  
        {/* This would be where the Thumbnail image is displayed */}
        &lt;img
          style={{ width: &quot;600px&quot;, height: &quot;200px&quot;, margin: &quot;0&quot;, display: &quot;block&quot; }}
          src={files.preview ? files.preview : &quot;https://via.placeholder.com/600x200&quot;}
          alt=&quot;Thumbnail Image&quot;
        /&gt;
      &lt;/Container&gt;
    );
  };
  
  export default Test;
  
  </code></pre>
  <p>I'm guessing I need to modify the onDrop function but I can't figure how to do this. Any help would be greatly appreciated!</p>