React js React-dropzone удалить файл - PullRequest
Новая
       87

React js React-dropzone удалить файл

1 голос
/ 26 мая 2020

enter image description here

Ссылка: codeandbox

Я должен обязательно загрузить файл, но я хочу дать возможность о возможности удалить его в случае ошибки, чтобы загрузить другой.

Таким образом, нажатие на X должно позволить вам очистить файл, который должен был быть загружен, но мне это не удается.

Можете дать совет?

Код: 

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);
...