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