React js react-dropzone 删除文件

Question

Link: codesandbox

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.

So clicking on the X should allow you to empty the file that was to be loaded, but I'm not succeeding.

Can you give me some advice?

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 (
    <div>
      <div {...getRootProps({ className: "drop-zone2" })}>
        <input {...getInputProps()} multiple={false} />
        <Chip
          icon={<AttachFile />}
          label={label}
          color="primary"
          onDelete={
            file
              ? () => {
                  file = [];
                  onDelete();
                }
              : false
          }
        />
      </div>
    </div>
  );
}

function App() {
  const [state, setState] = React.useState({
    fileName: "",
    fileUpload: undefined
  });
  const onDrop = file => {
    const reader = new FileReader();
    reader.onabort = () => console.log("File reading was aborted.");
    reader.onerror = () => console.log("File reading has failed.");
    reader.onload = () => {
      setState(prev => ({
        ...prev,
        fileName: file[0].name,
        fileUpload: file[0]
      }));
    };
    reader.readAsArrayBuffer(file[0]);
  };

  return (
    <>
      <Dropzone
        onDrop={onDrop}
        multiple={false}
        onDelete={() => {
          setState(prev => ({
            ...prev,
            fileName: "",
            fileUpload: ""
          }));
        }}
      />
    </>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

I hope this code will works:

import React, { useState, useEffect, useCallback } from 'react'
import { useDropzone } from 'react-dropzone'

const CreateFileUpload = () => {
  const onDrop = useCallback(acceptedFiles => {
    // Do something with the files
  }, [])
  const { getRootProps, getInputProps, isDragActive, acceptedFiles } = useDropzone({ onDrop, accept: '.png, .jpeg' })
  const files = acceptedFiles.map((file, i) => (
    <li key={file.path} className="selected-file-item">
      {file.path}  <i className="fa fa-trash text-red" onClick={() => remove(i)}></i>
    </li>
  ));
  const remove = file => {
    const newFiles = [...files];     // make a var for the new array
    acceptedFiles.splice(file, 1);        // remove the file from the array
  };
  return (
    <div>
      <div {...getRootProps()} className="dropzone-main">
        <div
          className="ntc-start-files-dropzone"
          aria-disabled="false"
        >
        </div>
        <button className="add-button" type="button">
          <i className="fa fa-plus"></i>
        </button>
        <h3 className="upload-title">
          <span></span>
        </h3>
        <input
          type="file"
          multiple=""
          autocomplete="off"
          className="inp-file"
          // onChange={uploadFile}
          multiple
          {...getInputProps()}
        />
        {isDragActive ?
          <div></div>
          :
          <div>
            <p>  Upload files  </p>
          </div>
        }
      </div>
      <aside>
        {files.length > 0 ? <h5>Selected Files</h5> : <h5></h5>}
        <ul>{files}</ul>
      </aside>
    </div>
  )
}
export default CreateFileUpload

Thankyou