Answers for "react-dropzone remove file from acceptedFiles"

react-dropzone remove file from acceptedFiles

import React from 'react';
import {useDropzone} from 'react-dropzone';

function Basic(props) {
  const {acceptedFiles, getRootProps, getInputProps, inputRef} = useDropzone();

  const removeFile = (file) => () => {
    console.log('removeFile...')
    acceptedFiles.splice(acceptedFiles.indexOf(file), 1)
    console.log(acceptedFiles)
  }

  const removeAll = () => {
    console.log('removeAll...')
    acceptedFiles.length = 0
    acceptedFiles.splice(0, acceptedFiles.length)
    inputRef.current.value = ''
    console.log(acceptedFiles)
  }

  const files = acceptedFiles.map(file => (
    <li key={file.path}>
      {file.path} - {file.size} bytes <button onClick={removeFile(file)}>Remove File</button>
    </li>
  ));

  return (
    <section className="container">
      <div {...getRootProps({className: 'dropzone'})}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <aside>
        <h4>Files</h4>
        <ul>{files}</ul>
      </aside>
      { files.length > 0 && <button onClick={removeAll}>Remove All</button> }
    </section>
  );
}

export default Basic