I am using material-ui-dropzone package - link. There is a requirement, I want to implement a reset button for my page, and when I click reset button it should reset all the state.
But the problem is I am able to reset all the state of my component but I have no control over the state of dropzone component. Even after clicking reset button I see file in the dropzone component
reset not working for dropzone screenshot
Here is snippet of my Dropzone component's code.
import { createStyles, makeStyles } from "@material-ui/core";import { DropzoneArea } from "material-ui-dropzone";import React from "react";function Dropzone(changeStateOnFileAction: () => (files: File[]) => void) { const useStyles = makeStyles(theme => createStyles({ previewChip: { minWidth: 160, maxWidth: 210 }, })); const previewChipClasses = useStyles(); return <DropzoneArea acceptedFiles={[".csv, text/csv, application/vnd.ms-excel, application/csv, text/x-csv, application/x-csv, text/comma-separated-values, text/x-comma-separated-values"]} showPreviews={true} maxFileSize={200000} filesLimit={1} showPreviewsInDropzone={false} useChipsForPreview previewGridProps={{ container: { spacing: 1, direction: 'row' } }} previewChipProps={{ classes: { root: previewChipClasses.previewChip } }} previewText="Selected files" onChange={changeStateOnFileAction()} />; } export default Dropzone;Here is code snippet of changeStateOnFileAction function
function changeStateOnFileAction(): (files: File[]) => void { return (files) => { console.log('Files:', files); if (files.length > 0) { setFiles(files); } }; }How can I implement reset onClick event on a button to reset Dropzone state? I want to remove the dump.csv file after reset.