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
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"/>
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
How to Prevent Form to Reload Page After Onsubmit
Html Input File Selection Event Not Firing Upon Selecting the Same File
Easiest Way to Open a Download Window Without Navigating Away from the Page
Calculate Time Difference Between Two Date in Hh:Mm:Ss JavaScript
How to Download a Base64-Encoded Image
How to Change Text Value Upon Button Press in React Native
Check If a String Is a Date Value
How to Output Date in JavaScript in Iso 8601 Without Milliseconds and With Z
Import Image from Json Source (Create-React-App)
How to Change Data Due to Selected Value in Select Vue
Node.Js Call Function If Button Clicked
Get a Value from a Observable<Value> Object
How to Detect String Which Contains Only Spaces
How Exactly Use and Update the Global Variables in React-Native
Javascript Blob Filename Without Link
How to Pass Get Request to Window.Location in JavaScript
What Is the Best Method to Swap Words in a String
How to Vertically and Horizontally Center a Component in React