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

Question

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

User · Answer

lt form enctype  multipart form-data  gt       lt input onchange  alert this value   this value null  return false   type  file  gt       lt br gt       lt input type  submit  value  Upload  gt   lt  form gt    this value null  is only necessary for Chrome  Firefox will work fine just with return false   Here is a FIDDLE

User · Answer

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   input onclick   function          this value   null      input onchange   function          alert this value         Here s a DEMO   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

User · Answer

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

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

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

User · Answer

In this article  under the title  Using form input for selecting   http   www html5rocks com en tutorials file dndfiles    lt input type  file  id  files  name  files    multiple   gt    lt script gt  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    lt  script gt    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

User · Answer

handleChange  target         const files   target files     target value

[javascript] HTML input file selection event not firing upon selecting the same file

Examples related to javascript

Examples related to html

Examples related to forms

Examples related to dom-events