React-dropzone: how I can reset my component Dropzone whit state.

[christiantigre]

how I can reset my component Dropzone whit state. My state is

this.state = {
  files : [],
}

My component is

getUploadParams={this.getUploadParams}
onChangeStatus={this.handleChangeStatus}
onSubmit={this.handleSubmitUploadFile}
initialFiles={this.state.files || ''}
accept=".XLS,.XLSX"
inputContent={(files, extra) => (extra.reject ? 'Archivos' : 'Arrastrar archivo')}
canRestart={true}
canCancel={true}
canRemove={true}
multiple={false}
maxFiles={1}
maxSizeBytes={(1024 * 1024) * 6}
/>
But I need to reset it from a button, using the event onClick

My botton is

Reset

I try to update my state to refresh the component but it doesn't give any results.

resetFormImport() {
this.setState({
files : [],
})
}
Some solution??

how I can reset the component??

[rolandjitsu]

@christiantigre please use SO for this sort of questions. There is no way to reset the dropzone state, it's an internal state. Keep your own state and reset that.

[ghost]

@rolandjitsu I tried as well SO, to find a solution for this issue, I couldn't find it there,
after the files uploaded how to reset the dropzone?, this should be very clear in the documentation.

[erisnuts]

check out this solution: https://github.com/Yuvaleros/material-ui-dropzone/issues/9#issuecomment-460022810

[nickvirdenfdtrl]

If you look in the examples, you can see that there's a setFiles function to control the state of the files.

I also took a page from @erisnuts solution link by adding a key attribute to the container of my component, which I assigned as an integer - in this case, with a value of 0. That way, I clear the state of the component using setFiles (functional) or this.setState (class-based) by passing an empty array, and then I also increment the key, which causes the entire component to re-render, clearing any attached file.

You can do the following:

Functional Component with Hooks

const Component = (props) => {
    const [files, setFiles] = useState([]);
    const [key, setKey] = useState(0);

    const reset = () => {
        setFiles([]);
        setKey(0);
    };

    return (
        <div key={key}>
            <button onClick={reset}>Reset</button>
        </div>
    );
}

Class-based Component with State

class Component extends React.Component {
    reset = () => {
        this.setState({ key: 0, files: [] });
    };

    render() {
        return (
            <div key={this.state.key}>
                <button onClick={this.reset}>Reset</button>
            </div>
        );
    }
}