0
223
ViewsHow to clear file type input field's file name in react
in this input field, it will only accept video files. if I try to upload any other files, by enabling all files option. it will show a alert. that's working fine but after adding any other format file, when it checking that it is not a video file, it showing the alert but file name is remaining in the input field.
I want to clear the input field file name and e.target.files as clear.
this is my code...
<Label for="exampleFile">Upload Video</Label>
<MyInput
type="file"
name="file"
accept="video/*"
id="exampleFile"
label="Upload a Video"
onChange={(e) => {
let files = e.target.files;
let file = files[0];
let name = files[0].name;
let type = files[0].type;
if (!file.type.match("video.*")) {
alert("You Can't upload a video file ");
} else {
// some code
}
}}
/>
when I am uploading any other format, it showing the alert, After clicking the OK button.it is showing....
the file name is still in the input field. I have to reset it.
I have tried with...
document.getElementById('exampleFile').value = nulluseRef()- added a
valueproperty withuseState()but nothing is working.
can anyone help me to solve this issue...
·
Juan Pablo Isaza
1 answers
Answer question0
Try setting a key attribute to the file input, then when you needed to reset it update the key attribute value:
resetsFileInput() {
let randomString = Math.random().toString(36);
setInputKey(randomString)
}
<Label for="exampleFile">Upload Video</Label>
<MyInput
type="file"
key={InputKey || '' } />
name="file"
accept="video/*"
id="exampleFile"
label="Upload a Video"
onChange={(e) => {
let files = e.target.files;
let file = files[0];
let name = files[0].name;
let type = files[0].type;
if (!file.type.match("video.*")) {
alert("You Can't upload a video file ");
} else {
resetsFileInput()
// some code
}
}}
/>
·
Juan Pablo Isaza
Report
Answer question