How to clear file type input field's file name in react

Question

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 = null

useRef()

added a value property with useState() but nothing is working.

can anyone help me to solve this issue...

Why are you using MyInput instead of a simple input tag? You may experience problems using another component instead of a simple HTML input when trying to use the same methods on it. — Janos Vinceller
– Janos Vinceller, Commented Nov 4, 2021 at 10:04
I guess the id exampleFile is not working on the input field which is what you want, but it is only a property on your custom component. What's the error message? — Janos Vinceller
– Janos Vinceller, Commented Nov 4, 2021 at 10:29

Adrian Mole · Accepted Answer · 2021-11-04 13:03:17Z

2

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
          }
        }}
      />

edited Nov 4, 2021 at 13:03

Adrian Mole

52.1k193 gold badges61 silver badges101 bronze badges

answered Nov 4, 2021 at 11:59

Taha jamil

446 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to clear file type input field's file name in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related