CODEWITHSUNDEEP
javascripthtmlformsdom-events
dronus
dronus

Reputation: 11272

HTML input file selection event not firing upon selecting the same file

Is there any chance to detect every file selection the user made for an HTML input of type file element?

This was asked many times before, but the usually proposed onchange event doesn't fire if the user select the same file again.

Upvotes: 349

Views: 251150

Answers (11)

metamagikum
metamagikum

Reputation: 1358

I can't use javascript in the project i'm working on.

Simply used:

<input type="file" onclick="this.value = null;" ..>

Upvotes: 0

Jar
Jar

Reputation: 2010

The selected answer (using state to set input value null) gave me an error.

I use empty strings instead

    const [fileValue, setFileValue] = React.useState("")

    <input
        onClick={() => {
           setFileValue("");
        }}
        type="file"
        value={fileValue}
        onChange={handleAddFile}
    />

Upvotes: 4

Treesa Jesil
Treesa Jesil

Reputation: 21

<input #myInput type="file" id="imgFile" (click)="$event.target.value=null"
       (change)="detectUploadedImage($event)" accept="image/*" />

Upvotes: 2

Brian Ustas
Brian Ustas

Reputation: 65499

Set the value of the input to null on each onclick event. This will reset the input's value and trigger the onchange event even if the same path is selected.

var input = document.getElementsByTagName('input')[0];

input.onclick = function () {
  this.value = null;
};
  
input.onchange = function () {
  console.log(this.value);
};
<input type="file" value="C:\fakepath">

Note: It's normal if your file is prefixed with 'C:\fakepath'. That's a security feature preventing JavaScript from knowing the file's absolute path. The browser still knows it internally.

Upvotes: 445

ibrahim &#252;nal
ibrahim &#252;nal

Reputation: 109

Usage of two way binding worked for me if you are working with Angular.

Here is my HMTL

<input type="file" #upload name="upload" [(ngModel)]="inputValue"(change)='fileEvent($event)'/>

and TS..

  @ViewChild('upload') uploadBtn: HTMLElement;

  fileEvent(e: any){
    
   //file upload part... 

    this.inputValue = "";
  }

Upvotes: 2

Dilip Kumar
Dilip Kumar

Reputation: 11

Clearing the value of 0th index of input worked for me. Please try the below code, hope this will work (AngularJs).

          scope.onClick = function() {
            input[0].value = "";
                input.click();
            };

Upvotes: 1

Shashwat Gupta
Shashwat Gupta

Reputation: 5264

handleChange({target}) {
    const files = target.files
    target.value = ''
}

Upvotes: 12

Rosy Shrestha
Rosy Shrestha

Reputation: 1479

Use onClick event to clear value of target input, each time user clicks on field. This ensures that the onChange event will be triggered for the same file as well. Worked for me :)

onInputClick = (event) => {
    event.target.value = ''
}

<input type="file" onChange={onFileChanged} onClick={onInputClick} />

Using TypeScript

onInputClick = ( event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
    const element = event.target as HTMLInputElement
    element.value = ''
}

Upvotes: 58

Mohit Singh
Mohit Singh

Reputation: 71

Do whatever you want to do after the file loads successfully.just after the completion of your file processing set the value of file control to blank string.so the .change() will always be called even the file name changes or not. like for example you can do this thing and worked for me like charm

   $('#myFile').change(function () {
       LoadFile("myFile");//function to do processing of file.
       $('#myFile').val('');// set the value to empty of myfile control.
    });

Upvotes: 0

elshnkhll
elshnkhll

Reputation: 2223

<form enctype='multipart/form-data'>
    <input onchange="alert(this.value); this.value=null; return false;" type='file'>
    <br>
    <input type='submit' value='Upload'>
</form>

this.value=null; is only necessary for Chrome, Firefox will work fine just with return false;

Here is a FIDDLE

Upvotes: 29

Xacur Aphrantus
Xacur Aphrantus

Reputation: 111

In this article, under the title "Using form input for selecting"

http://www.html5rocks.com/en/tutorials/file/dndfiles/

<input type="file" id="files" name="files[]" multiple />

<script>
function handleFileSelect(evt) {

    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
     // Code to execute for every file selected
    }
    // Code to execute after that

}

document.getElementById('files').addEventListener('change', 
                                                  handleFileSelect, 
                                                  false);
</script>

It adds an event listener to 'change', but I tested it and it triggers even if you choose the same file and not if you cancel.

Upvotes: 10

Related Questions