CODEWITHSUNDEEP
javascriptreactjstypescriptinput
Sounak Das
Sounak Das

Reputation: 15

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

enter image description here

when I am uploading any other format, it showing the alert, After clicking the OK button.it is showing....

enter image description here

the file name is still in the input field. I have to reset it.

I have tried with...

  1. document.getElementById('exampleFile').value = null
  2. useRef()
  3. added a value property with useState() but nothing is working.

can anyone help me to solve this issue...

Upvotes: 0

Views: 3363

Answers (1)

Taha jamil
Taha jamil

Reputation: 44

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

Upvotes: 2

Related Questions