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
