Skip to content
Advertisement

How to clear file(s) selection from file input after the data has successfully be submitted?

I am using react.js, I have a form, that I am submitting to an API and the form works fine up to the point where I want to clear the fields. Well actually one field in particular, the file input. I can’t get it to reset back to “No File Selected”, I’ve tried creating a files= attribute and controlling it through the state, and everything. Nothing is working, what am I missing?

I only want to reset it when there has been a successful submission.

What is the right approach to this.

<input
    type="file"
    name="js-case-upload"
    className="form-control-static"
    filename={this.state.files}
    accept="image/*"
    onChange={ this._onChangeFileInput }
/>

Advertisement

Answer

Considering the input have id myFile, then the file can be reset by vanilla javascript like the following:

document.getElementById("myFile").value = "";

User contributions licensed under: CC BY-SA
2 People found this is helpful
Advertisement