Как удалить файл из Reaction-Dropzone? - PullRequest
Новая
       10

Как удалить файл из Reaction-Dropzone?

1 голос
/ 07 мая 2019

Надеюсь, вы поможете мне с этим, я использую хук useDropzone из response-dropzone , и я не знаю, как сделать кнопку удаления файла для каждого файла.

Как удалить один файл?

Это мой код: 

function DragFile(props) {
  const { acceptedFiles, rejectedFiles, getRootProps, getInputProps } = useDropzone({
    accept: 'image/jpeg, image/png, .pdf',
    maxSize: 3000000,
    multiple: true
  });

  const acceptedFilesItems = acceptedFiles.map(file => (
    <Col xs={12} md={4} key={file.path} className="card-file">
      <div className="file-extension">{file.path.substring(file.path.indexOf('.') + 1)}</div>
      <span>{file.path.substring(0, file.path.indexOf('.'))} <small>{(file.size / 1000).toFixed(2)} Kb</small></span>
      <button className="delete">DeleteButton</button>
    </Col>
  ));

  const rejectedFilesItems = rejectedFiles.map(file => (
    <li key={file.path}>
      {file.path.substring(0, file.path.indexOf('.'))} - {file.size / 1000} Kb
    </li>
  ));

  return (
    <div>
      <div {...getRootProps({ className: 'dropzone drag-n-drop' })}>
        <input id="file-claim" {...getInputProps()} />
        <img src={uploadSrc} alt="Subir archivo" />
        <p>Drag files here (PDF, JPG, PNG).</p>
      </div>
      <Row className="accepted-files">
        {acceptedFilesItems}
      </Row>
    </div>
  );
}

export default DragFile;

1 Ответ

0 голосов
/ 18 июля 2019

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

Примерно: 

onDrop = (files) => {
  // use a foreach loop get the file name using Object.keys
  // setState with the file names
  // whatever else you need to do to process the file
}

handleDelete = () => {
  // use the file names from your state to delete the files
}

где-то там вам придется объединить все это с jsx.вам также нужно будет синхронизировать его с тем, что вы отправляете на сервер.все это должно быть сделано с вашим состоянием компонента.

...