Html Input File Selection Event Not Firing Upon Selecting the Same File

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

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

VueJS: Input file selection event not firing upon selecting the same file

We can add @click event and then clear the value of the file input

<template>
....
<input ref="imageUploader" type="file" accept=".jpg, .jpeg" @click="resetImageUploader" @change="uploadImageFile">
....
</template>

<script>
export default {
methods: {
resetImageUploader() {
this.$refs.imageUploader.value = '';
},
uploadImageFile() {
....
}
}
}
</script>

Input file selection event not firing when selecting the same file in KnockoutJS and HTML

Found an workaround, not good solution though.

<i style="cursor:pointer;" title="{{$parent.texts().delete}}" class="fa fa-trash fa-fw" data-bind="click: function(){ $root.removeAttachment(this); }"></i>

added a remove button and reset the file content there.

function removeAttachment(file) {
document.getElementById("documentattachment").value = ""; //resetting the file input
vm.attachments.removeAll();
vm.fileDatas.removeAll();
}

How to detect input type=file "change" for the same file?

You can trick it. Remove the file element and add it in the same place on change event. It will erase the file path making it changeable every time.

Example on jsFiddle.

Or you can simply use .prop("value", ""), see this example on jsFiddle.

  • jQuery 1.6+ prop
  • Earlier versions attr

Change event function not working on input type file if file name is same

In angular 2 you can do it like this:

<span class="control-fileupload" >
<label for="file1" class="text-left">{{filePlaceHolder}}</label>
<input #fileInput type="file" id="file1" (click)="fileInput.value = null" value="" (change)="openFile($event)" >
</span>

This way every time you click on file input it will clear it's value so even if you select the same file change will fire.

Input File onchange event not firing

The most reliable way to achieve this cross browser and without having to change much code is to set the value of the input to null on click.

onclick="this.value = null"

So your input would look like this

<input name="file" type="file" onclick="this.value = null" (change)="onChange($event)" style="width:80%"/>

Here is an working example: plnkr

Angular input file: Selecting the same file

onChange will not detect any change to input type file if the same file has been selected. There are 2 possible ways to make onChange working on same file selection which I would recommend

  1. Either you need to add an event like onClick to clear the value so that the change event will work.

    <input type="file" #fileInput style="display: none" accept=".xml" (change)="OnFileSelected($event)" (click)="this.value=null"/>

  2. Add multiple attribute to the input element

<input type="file" #fileInput style="display: none" accept=".xml" (change)="OnFileSelected($event)" multiple/>

Hope this helps.

EDIT:

As suggested by others in comments, you can achieve it like below

<input type="file" #fileInput style="display: none" accept=".xml" (change)="OnFileSelected($event)" (click)="$event.target.value=null"/>



Related Topics



Leave a reply



Submit