0

I am trying to use React Dropzone but the callback does not get triggered or updated when the state gets updated. I even tried adding a seperate useCallback. Any help much appriciated

Code Sandbox link https://codesandbox.io/s/thirsty-mountain-ydsc7?file=/src/App.js

Parent Componeent (class)

  <UploadWithDropZone handleCallback={(files) => this.handleImageCallback(files)}/>

  handleImageCallback = (files) => {
    console.log('files ', files);
    if(!files) return;
    this.setState({addedImages: files});
 }

Child Component (Hooks)

const UploadWithDropZone = ({handleCallback}) => {

const [files, setFiles] = useState([]);

const onDrop = useCallback(async acceptedFiles  => {
    console.log('firing ');
    handleCallback(acceptedFiles);
    setFiles(acceptedFiles.map(file => Object.assign(file, {
        preview: URL.createObjectURL(file)
    })));
}, [files])


const {getRootProps, getInputProps} = useDropzone({
    accept: MIME_TYPES_ACCEPT,
    onDrop,
});

const removeFile = (file) => {
    const newFiles = [...files];
    newFiles.splice(file, 1);
    setFiles(newFiles);
}

const thumbs = files.map((file, i) => (
    <div style={thumb} key={file.name}>
        <div style={thumbInner}>
            <DeleteIcon onClick={() => removeFile(i)}/>
            <object data={file.preview ? file.preview : docs} type="image/png">
                <img
                    src={file.preview}
                    style={img}
                />
            </object>
        </div>
    </div>
));

useEffect(() => () => {
    // Make sure to revoke the data uris to avoid memory leaks
    files.forEach(file => URL.revokeObjectURL(file.preview));
}, [files]);


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 style={thumbsContainer}>
            {thumbs}
        </aside>
    </section>
 );

}

export default UploadWithDropZone;

any help much appriciated

skyboyer
  • 22,209
  • 7
  • 57
  • 64
Zinox
  • 519
  • 9
  • 24

0 Answers0