How to detect input type file change for the same file

Question

I want to fire an event when the user select a file  Doing so with  change event it works if the user changes the file every time   But I want to fire the event if the user select the same file again    User select file A jpg  event fires  User select file B jpg  event fires  User select file B jpg  event doesn t fire  I want it to fire    How can I do it

User · Answer

Believe me  it will definitely help you      there I have called two  onchange event functions  due to some different scenario processing    lt input type  file  class  selectImagesHandlerDialog       name  selectImagesHandlerDialog       onclick  this value null   accept  image x-png image gif image jpeg  multiple      onchange  delegateMultipleFilesSelectionAndOpen event   disposeMultipleFilesSelections this      gt       delegating multiple files select and open var delegateMultipleFilesSelectionAndOpen   function  evt       if   evt target files  return     var selectedPhotos   evt target files       some continuous source          explicitly removing file input value memory cache var disposeMultipleFilesSelections   function        this val   null       Hope this will help many of you guys

User · Answer

VueJs solution   lt input                 type  file                  style  display  none                   ref  fileInput                  accept                      change  onFilePicked                   click   refs fileInput value null   gt

User · Answer

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

User · Answer

So  there is no way to 100  be sure they are selecting the same file unless you store each file and compare them programmatically   The way you interact with files  what JS does when the user  uploads  a file  is HTML5 File API and JS FileReader   https   www html5rocks com en tutorials file dndfiles   https   scotch io tutorials use-the-html5-file-api-to-work-with-files-locally-in-the-browser  These tutorials show you how to capture and read the metadata  stored as js object  when a file is uploaded   Create a function that fires  onChange  that will read- store- compare metadata of the current file against the previous files  Then you can trigger your event when the desired file is selected

User · Answer

If you don t want to use jQuery   lt form enctype  multipart form-data  gt       lt input onchange  alert this value   return false   type  file  gt       lt br gt       lt input type  submit  value  Upload  gt   lt  form gt    It works fine in Firefox  but for Chrome you need to add this value null  after alert

User · Answer

Inspiring from  braitsch I have used the following in my AngularJS2 input-file-component   lt input id  file  onclick  onClick  event  onchange  onChange  event   type  file  accept         gt   export class InputFile         Input       file File Blob        Output       fileChange   new EventEmitter         onClick event            event target value              onChange e           let files    e target files          if files length               this file   files 0                     else   this file   null          this fileChange emit this file             Here the onClick event  rescued me  -

User · Answer

The simplest way would be to set the input value to an empty string directly in the change or input event  which one mostly listens to anyways  onFileInputChanged event            todo  read the filenames and do the work               reset the value directly using the srcElement property from the event      event srcElement value    quot  quot

User · Answer

If you have tried  attr  value       and didn t work  don t panic  like I did   just do  val     instead  and will work fine

User · Answer

Create for the input a click event and a change event  The click event empties the input and the change event contains the code you want to execute   So the click event will empty when you click the input button before the select file windows opens   therefor the change event will always trigger when you select a file     x000D   x000D      input   click function     x000D        input   val     x000D      x000D   x000D      input   change function     x000D      Your code you want to execute  x000D      x000D   lt input id  input  type  file  gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  x000D   lt  script gt  x000D   x000D   x000D

User · Answer

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    gt        event target value          lt input type  file  onChange  onFileChanged  onClick  onInputClick    gt    Using TypeScript  onInputClick     event  React MouseEvent lt HTMLInputElement  MouseEvent gt     gt        const element   event target as HTMLInputElement     element value

User · Answer

This work for me   lt input type  file  onchange  function   this value null return false   gt

User · Answer

Probably the easiest thing you can do is set the value to an empty string  This forces it to  change  the file each time even if the same file is selected again    lt input type  file  value      gt

User · Answer

I ran into same issue  i red through he solutions above but they did not get any good explanation what was really happening    This solution i wrote https   jsfiddle net r2wjp6u8  does no do many changes in the DOM tree  it just changes values of the input field  From performance aspect it should be bit better   Link to fiddle  https   jsfiddle net r2wjp6u8    lt button id  btnSelectFile  gt Upload lt  button gt    lt  -- Not displaying the Inputfield because the design changes on each browser -- gt   lt input type  file  id  fileInput  style  display  none   gt   lt p gt    Current File   lt span id  currentFile  gt  lt  span gt   lt  p gt   lt hr gt   lt div class  log  gt  lt  div gt     lt script gt     Get Logging Element var log   document querySelector   log        Load the file input element  var inputElement   document getElementById  fileInput    inputElement addEventListener  change   currentFile       Add Click behavior to button document getElementById  btnSelectFile   addEventListener  click   selectFile    function selectFile       if  inputElement files 0            Check how manyf iles are selected and display filename     log innerHTML      lt p gt Total files      inputElement files length     lt  p gt          Reset the Input Field     log innerHTML      lt p gt Removing file      inputElement files 0  name     lt  p gt       inputElement value              Check how manyf iles are selected and display filename     log innerHTML      lt p gt Total files      inputElement files length     lt  p gt       log innerHTML      lt hr gt             Once we have a clean slide  open fiel select dialog    inputElement click        function currentFile            If Input Element has a file   if  inputElement files 0         document getElementById  currentFile   innerHTML   inputElement files 0  name          lt  scrip gt

User · Answer

You can use form reset   to clear the file input s files list  This will reset all fields to default values  but in many cases you may be only using the input type  file  in a form to upload files anyway  In this solution there is no need to clone the element and re-hook events again   Thanks to philiplehmann

User · Answer

Here s the React-y way solution i ve found that worked for me   onClick  event   gt  event target value   null

User · Answer

I got this to work by clearing the file input value onClick and then posting the file onChange  This allows the user to select the same file twice in a row and still have the change event fire to post to the server  My example uses the the jQuery form plugin      input type file    click function          this  attr  value                input type file    change function            my-form   ajaxSubmit options

User · Answer

You can t make change fire here  correct behavior  since nothing changed   However  you could bind click as well   though this may fire too often   there s not much middle ground between the two though       fileID   bind  click change   function         do stuff

User · Answer

By default  the value property of input element cleared after selection of files if the input have multiple attributes  If you do not clean this property then  change  event will not be fired if you select the same file  You can manage this behavior using multiple attribute    lt  -- will be cleared -- gt   lt input type  file  onchange  yourFunction    multiple  gt   lt  -- won t be cleared -- gt   lt input type  file  onchange  yourFunction     gt    Reference

User · Answer

You can simply set to null the file path every time user clicks on the control  Now  even if the user selects the same file  the onchange event will be triggered    lt input id  file  onchange  file changed this   onclick  this value null   type  file  accept         gt

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

Examples related to jquery

Examples related to html

Examples related to events

Examples related to cross-browser