How to allow input type=file to select the same file in react component

Question

I have a react component which renders a <input type="file"> dom to allow user select images from browser. I found that its onChange method not called when I select the same file. After some searching, someone suggests using this.value=null or return false at the end of the onChange method but I have tried it doesn't work.

Below is my code:

<input id="upload" ref="upload" type="file" accept="image/*"
           onChange={(event)=> { this.readFile(event) }}/>

Below is what I tried:

<input id="upload" ref="upload" type="file" accept="image/*"
               onChange={(event)=> { 
                   this.readFile(event) 
                   return false
              }}/>

Another one is:

<input id="upload" ref="upload" type="file" accept="image/*"
           onChange={(event)=> { 
               this.readFile(event) 
               this.value=null
          }}/>

I believe above solutions work for jquery but I don't know how to let it work in reactjs.

This is just browser behaviour not to do with react, the file didn't change. See http://stackoverflow.com/questions/4109276/how-to-detect-input-type-file-change-for-the-same-file — Dominic, Sep 14 '16 at 08:42
Does this answer your question? [HTML input file selection event not firing upon selecting the same file](https://stackoverflow.com/questions/12030686/html-input-file-selection-event-not-firing-upon-selecting-the-same-file) — Kalle Richter, May 11 '20 at 19:19

score 151 · Answer 1 · edited May 23 '17 at 11:47

151

Dup of this thread

<input id="upload" ref="upload" type="file" accept="image/*"
           onChange={(event)=> { 
               this.readFile(event) 
          }}
        onClick={(event)=> { 
               event.target.value = null
          }}

/>

edited May 23 '17 at 11:47

Community

1
1

answered Nov 04 '16 at 18:05

James Bowler

2,194
2
17
23

4

This worked for me! I do recommend not using inline functions but the concept works. – Luis Colón Feb 16 '17 at 17:41
11

With TypeScript, `event.target.value = null` I got the compilation error `TS2322: Type 'null' is not assignable to type 'string'.` But I was able to say `event.target.value = ""` and that worked as per https://stackoverflow.com/a/56258902/2848676 – Michael Osofsky Jan 25 '20 at 04:05

score 22 · Answer 2 · answered Sep 14 '16 at 07:54

22

I think this in your function does not refer to input field. Try using event.target instead.

<input id="upload" ref="upload" type="file" accept="image/*"
           onChange={(event)=> { 
               this.readFile(event) 
               event.target.value=null
          }}/>

answered Sep 14 '16 at 07:54

Skriptotajs

844
6
15

1

I just tried but it doesn't work. the onChange method is not triggered when selecting the same file on the second time. – Joey Yi Zhao Sep 14 '16 at 08:44
2

use `onInput` instead of `onChange` – Evans Dianga Nov 26 '18 at 21:36
Setting `event.target.value=null` worked for me, thanks! – ABC Apr 24 '19 at 18:20

score 19 · Answer 3 · answered Aug 29 '19 at 20:13

19

For me actually worked: event.currentTarget.value = null

    onClick={(event)=> { 
               event.currentTarget.value = null
          }}

answered Aug 29 '19 at 20:13

Ernane Luis

353
2
9

4

The typescript version goes like `(event.target as HTMLInputElement).value = null;` – iBobb Dec 30 '20 at 15:13
1

As mentioned below (e.target as HTMLInputElement).value = ""; – keemor Jun 07 '22 at 11:32

score 12 · Answer 4 · answered Sep 05 '22 at 09:20

12

After hours of online research this worked for ME on Reactjs

<input id="upload" ref="upload" type="file" accept="image/*"
           onChange={(event)=> { 
               //to do
          }}
        onClick={(e)=> { 
               e.target.value = null
          }}

/>

answered Sep 05 '22 at 09:20

Muneeb Ejaz

696
6
11

1

This is also the only solution that worked for me. I am using ReactJs. – James Ching Sep 22 '22 at 13:29

score 9 · Answer 5 · answered Feb 14 '18 at 14:09

My React version: 16.2.0

@jbsmoove solution works fine for all browsers except IE11.

As for IE11, in case if we Open some file and in second time we press Cancel insteed of Open file it shows empty screen and in console we see:

Unable to get property 'name' of undefined or null reference

So I've come up with another solution which works perfect even in IE11:

<input id="upload" ref="upload" type="file" accept="image/*"
      onInput={(event)=> { 
           this.readFile(event) 
      }}
      onClick={(event)=> { 
           event.target.value = null
      }}
/>

Just use onInput instead of onChange.

score 5 · Answer 6 · answered Nov 19 '19 at 12:52

Below is my solution. (Using Typescript)

import * as React from "react";

export class FileSelector extends React.Component<undefined, undefined>
{
    constructor(props: any)
    {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(selectorFiles: FileList)
    {
        console.log(selectorFiles);
    }

    render ()
    {
        return <div>
            <input type="file" onChange={ (e) => this.handleChange(e.target.files) } />
        </div>;
    }
}

Isn't this answering missing the point in that it should call `event.target.value = ""`. Or more specifically ` {this.handleUploadDemand(ie); ie.target.value = ""}}/>}` — Michael Osofsky, Jan 25 '20 at 04:08

score 1 · Answer 7 · answered Mar 22 '23 at 10:26

If we want to update same file(same name) multiple times we will get above error. To avoide we need to assign null value for the currentTarget after first time updated the file.

Ex.

const handleFile = useCallback(e => {

    const MAX_FILE_SIZE = (fileSize.MAX_FILE_SIZE_MANAGE_TAGS * 1024)

    if (e.target.files.length > 0) {

        const uploadedFileSize = e.target.files[0].size / 1024

        if (uploadedFileSize < MAX_FILE_SIZE) {

            uploadFile(e.target.files[0]) // you will get current uploaded value

            e.currentTarget.value = null // this the place where we need to assign null value

        } else {
            console.log('file is large')
        }
    }
}, [ ])



<Button
    className={classes.uploadButton}
    component="label"
>
    Upload File
    <input
        onChange={handleFile}
        type="file"
        accept=".xlsx"
        hidden
    />
</Button>

score 1 · Answer 8 · answered Jul 12 '23 at 07:25

1

Typescript way without assertion.

  <input
      id="upload"
      ref="upload"
      type="file"
      accept="image/*"
      onChange={(e: ChangeEvent<HTMLInputElement>) => {
                this.readFile(e)
      }}
      onClick={(e: MouseEvent<HTMLInputElement>) => {
                e.currentTarget.value = "";
      }}
   />

answered Jul 12 '23 at 07:25

Vilius Bučinskas

33
1
1
7

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 14 '23 at 17:31

score 1 · Answer 9 · answered Aug 04 '23 at 01:04

1

This forces it to 'change' the file each time even if the same file is selected again.

<input type="file" value="" />

answered Aug 04 '23 at 01:04

Jean-Baptiste Lemée

800
7
13

SM Chinna · Answer 10 · 2019-03-05T12:19:02.357

0

Use a fallback on-Click method to select the same image. Example:

  <input
    id="upload" 
    ref="upload" 
    type="file" 
    accept="image/*"       
    multiple="false"
    onChange={(e) => this.getDailyImage(e)}
    onClick={(e) => e.target.files[0] && this.getDailyImage(e)}
  />

edited Mar 05 '19 at 12:19

answered Feb 23 '19 at 11:51

SM Chinna

341
2
7

score 0 · Answer 11 · answered Mar 29 '21 at 09:37

I usually just use key prop on input to reset it's underlying DOM node between selections (either use some incremental UID counter in change handler or uploading/processing state flag):

const UploadInput = (props) => {
  const [isUploading, setUploading] = useState(false);

  const handleChange = useCallback((async (e) => {
    setUploading(true); // or setUID((old) => old + 1);

    try {
      await ... // handle processing here
    } finally {
      setUploading(false);
    }
  }, [...]);

  return (
    <div className={...}>
      <input key={isUploading} type="file" onChange={handleChange} {...props} />

      {isUploading && <Spinner />}
    </div>
  );
};

Another way might be to get ref of the form and use formRef.reset() after processing (viable if you don't care for form contents after file processing).

score 0 · Answer 12 · answered Dec 29 '21 at 02:49

I got mine to work by adding the following onchange event listener in my input, using Typescript.

const onInputFileChange = (
  event: ChangeEvent<HTMLInputElement>
): void => {
  const nativeEvent = event.nativeEvent.target as HTMLInputElement;
  const targetEvent = event.target as HTMLInputElement;
  if (targetEvent.files && targetEvent.files[0]) {
    const imageFile = targetEvent.files[0];
    // eslint-disable-next-line no-param-reassign
    nativeEvent.value = "";
  }
};

score 0 · Answer 13 · answered Aug 18 '22 at 06:29

If you are using multiple file to upload try currentTarget.value

  <input id='uploadFile' type="file" onClick={(e)=> {e.currentTarget.value = null}}  onChange={onChangeGetFilesSelected}  multiple={true} accept=".xlsx,.xls,.doc, .docx,.ppt, .pptx,.txt,.pdf"/>

How to allow input type=file to select the same file in react component

13 Answers13

Linked