title: React js react-dropzone remove file
body: <p><a href="https://i.stack.imgur.com/OhYjT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OhYjT.png" alt="enter image description here"></a></p>
  
  <p>Link: <a href="https://codesandbox.io/s/react-dropzone-withpreviews-hooks-version-h8t9n?file=/src/index.js" rel="nofollow noreferrer">codesandbox</a></p>
  
  <p>I have to make sure to upload a file, but I want to give the possibility of being able to delete it in case of an error in order to upload another.</p>
  
  <p>So clicking on the X should allow you to empty the file that was to be loaded, but I'm not succeeding.</p>
  
  <p>Can you give me some advice?</p>
  
  <p>Code:</p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import { useDropzone } from "react-dropzone";
  import { AttachFile } from "@material-ui/icons";
  import Chip from "@material-ui/core/Chip";
  
  function Dropzone({ onDrop, onDelete }) {
    const { acceptedFiles, getRootProps, getInputProps } = useDropzone({
      onDrop
    });
    let file = acceptedFiles[0];
    const label = file ? `${file.path} - ${file.size} bytes` : "DRAG_FILE";
    console.log("Dropzone", file);
    return (
      &lt;div&gt;
        &lt;div {...getRootProps({ className: "drop-zone2" })}&gt;
          &lt;input {...getInputProps()} multiple={false} /&gt;
          &lt;Chip
            icon={&lt;AttachFile /&gt;}
            label={label}
            color="primary"
            onDelete={
              file
                ? () =&gt; {
                    file = [];
                    onDelete();
                  }
                : false
            }
          /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  function App() {
    const [state, setState] = React.useState({
      fileName: "",
      fileUpload: undefined
    });
    const onDrop = file =&gt; {
      const reader = new FileReader();
      reader.onabort = () =&gt; console.log("File reading was aborted.");
      reader.onerror = () =&gt; console.log("File reading has failed.");
      reader.onload = () =&gt; {
        setState(prev =&gt; ({
          ...prev,
          fileName: file[0].name,
          fileUpload: file[0]
        }));
      };
      reader.readAsArrayBuffer(file[0]);
    };
  
    return (
      &lt;&gt;
        &lt;Dropzone
          onDrop={onDrop}
          multiple={false}
          onDelete={() =&gt; {
            setState(prev =&gt; ({
              ...prev,
              fileName: "",
              fileUpload: ""
            }));
          }}
        /&gt;
      &lt;/&gt;
    );
  }
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  </code></pre>