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 stackoverflow.com/questions/4109276/… — nanobar
– nanobar, Commented Sep 14, 2016 at 8:42
Does this answer your question? HTML input file selection event not firing upon selecting the same file — Kalle Richter
– Kalle Richter, Commented May 11, 2020 at 19:19

Community · Accepted Answer · 2017-05-23 11:47:19Z

161

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, 2017 at 11:47

CommunityBot

11 silver badge

answered Nov 4, 2016 at 18:05

James Bowler

2,3342 gold badges18 silver badges23 bronze badges

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

5 Comments

Luis Colón Over a year ago

This worked for me! I do recommend not using inline functions but the concept works.

Michael Osofsky Over a year ago

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 stackoverflow.com/a/56258902/2848676

Marcus Nyberg Over a year ago

With typescript and with what Michael Osofsky wrote, then this worked for me, onClick={(e : MouseEvent) => { const element = e.target as HTMLInputElement; element.value = ''; }}

vishal patel Over a year ago

In typescript use below code onClick={(event) => { event.currentTarget.value = ""; }}

hkguile Over a year ago

in this case, it didn't work " onClick={(event)=> { setShowAlert(false); event.target.value = null }} "

Skriptotajs · Accepted Answer · 2016-09-14 07:54:46Z

24

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, 2016 at 7:54

Skriptotajs

8746 silver badges15 bronze badges

4 Comments

Joey Yi Zhao Over a year ago

I just tried but it doesn't work. the onChange method is not triggered when selecting the same file on the second time.

Evans Dianga Over a year ago

use onInput instead of onChange

ABC Over a year ago

Setting event.target.value=null worked for me, thanks!

Gianfranco P Feb 7 at 18:17

this works as well as onChange is triggered the first time

Ernane Luis · Accepted Answer · 2019-08-29 20:13:34Z

19

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

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

answered Aug 29, 2019 at 20:13

Ernane Luis

3612 silver badges10 bronze badges

2 Comments

iBobb Over a year ago

The typescript version goes like (event.target as HTMLInputElement).value = null;

keemor Over a year ago

As mentioned below (e.target as HTMLInputElement).value = "";

Muneeb Ejaz · Accepted Answer · 2022-09-05 09:20:19Z

15

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 5, 2022 at 9:20

Muneeb Ejaz

90410 silver badges11 bronze badges

1 Comment

James Ching Over a year ago

This is also the only solution that worked for me. I am using ReactJs.

Mike Mike · Accepted Answer · 2018-02-14 14:09:04Z

10

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.

answered Feb 14, 2018 at 14:09

Mike Mike

6189 silver badges16 bronze badges

Comments

Yash Vekaria · Accepted Answer · 2019-11-19 12:52:53Z

6

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

answered Nov 19, 2019 at 12:52

Yash Vekaria

2,39326 silver badges26 bronze badges

1 Comment

Michael Osofsky Over a year ago

Isn't this answering missing the point in that it should call event.target.value = "". Or more specifically <input alt="Upload Demand" type="file" onChange={ (ie) => {this.handleUploadDemand(ie); ie.target.value = ""}}/>}

KARTHIKEYAN.A · Accepted Answer · 2023-03-22 10:26:56Z

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>

Vilius Bučinskas · Accepted Answer · 2023-07-12 07:25:30Z

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, 2023 at 7:25

Vilius Bučinskas

311 gold badge1 silver badge7 bronze badges

1 Comment

Community Over a year ago

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.

Jean-Baptiste Lemée · Accepted Answer · 2023-08-04 01:04:23Z

1

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

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

answered Aug 4, 2023 at 1:04

Jean-Baptiste Lemée

8608 silver badges14 bronze badges

Comments

SM Chinna · Accepted Answer · 2019-03-05 12:19:02Z

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 5, 2019 at 12:19

answered Feb 23, 2019 at 11:51

SM Chinna

3412 silver badges7 bronze badges

Comments

ankhzet · Accepted Answer · 2021-03-29 09:37:53Z

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).

Akinjiola Toni · Accepted Answer · 2021-12-29 02:49:10Z

0

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 = "";
  }
};

answered Dec 29, 2021 at 2:49

Akinjiola Toni

6787 silver badges9 bronze badges

Comments

Sherothkar · Accepted Answer · 2022-08-18 06:29:05Z

0

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

answered Aug 18, 2022 at 6:29

Sherothkar

1411 silver badge9 bronze badges

Collectives™ on Stack Overflow

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

13 Answers 13

5 Comments

4 Comments

2 Comments

1 Comment

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

5 Comments

4 Comments

2 Comments

1 Comment

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related