How can I clear an HTML file input with JavaScript

Question

I want to clear the file input in my form   I know about setting the sources to the same method    But that method wont erase the selected file path   Note  I would like to avoid having to reload the page  reset the form or perform an AJAX call   Is this possible

User · Answer

An - in my world easy an clean solution - is, to set the file inputs files to a clear FileList.

Since we can not create a FileList directly - I user DataTransfer as "hack"

@$input[0].files=new DataTransfer().files

or

file_input_node.files=new DataTransfer().files

User · Answer

tl dr  For modern browsers  just use input value         Old answer  How about  input type    quot text quot   input type    quot file quot    I still have to understand why this does not work with webkit  Anyway  this works with IE9 gt   Firefox and Opera  The situation with webkit is that I seem to be unable to change it back to file  With IE8  the situation is that it throws a security exception  Edit  For webkit  Opera and firefox this works  though  input value         check the above answer with this proposal  I ll see if I can find a nice cleaner way of doing this cross-browser without the need of the GC  Edit2  try      inputs i  value           if inputs i  value           inputs i  type    quot text quot           inputs i  type    quot file quot          catch e     Works with most browsers  Does not work with IE  lt  9  that s all  Tested on firefox 20  chrome 24  opera 12  IE7  IE8  IE9  and IE10

User · Answer

the input value   null is a working method  however it will only trigger input s change event if called from an onclick event  Solution to that would be calling that onchange handler manually whenever you need to reset the input  function reset input input          input  0  value   null      input change handler      function input change handler            this happens when there s been a change in file selection      if    input  0  files length               file s  selected       else              nothing is selected           input  on  change   input change handler

User · Answer

What helped me is  I tried to fetch and upload the last selected file using a loop  instead of clearing out the queue  and it worked  Here is the code    for  int i   0  i  lt   Request Files Count-1  i       HttpPostedFileBase uploadfile   files i    Stream fs   uploadfile InputStream   BinaryReader br   new BinaryReader fs    Byte   imageBytes   br ReadBytes  Int32 fs Length       Hope this might help some

User · Answer

I have been looking for simple and clean way to clear HTML file input  the above answers are great  but none of them really answers what i m looking for  until i came across on the web with simple an elegant way to do it    var  input       control      input replaceWith  input val     clone true      all the credit goes to Chris Coyier    x000D   x000D     Referneces x000D  var control       control    x000D      clearBn       clear    x000D   x000D     Setup the clear functionality x000D  clearBn on  click   function    x000D      control replaceWith  control val     clone  true      x000D      x000D   x000D     Some bound handlers to preserve when cloning x000D  control on   x000D      change  function    console log   Changed       x000D       focus  function    console log    Focus       x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt input type  file  id  control  gt  x000D   lt br gt  lt br gt  x000D   lt a href     id  clear  gt Clear lt  a gt  x000D   x000D   x000D

User · Answer

Here are my two cents  the input files are stored as array so here is how to null it  document getElementById  selector   value        this return an empty array and works on all browsers

User · Answer

U need replace it with new file input  Here is how it can be done with jQuery   var inputFile      input type field     inputFile wrap   lt div   gt       and use this line when you need to clear input field  on some event for example    inputFile parent   html  inputFile parent   html

User · Answer

The above answers offer somewhat clumsy solutions for the following reasons    I don t like having to wrap the input first and then getting the html  it is very involved and dirty  Cross browser JS is handy and it seems that in this case there are too many unknowns to reliably use type switching  which  again  is a bit dirty  and setting value to      So I offer you my jQuery based solution       myinput   replaceWith     myinput   clone      It does what it says  it replaces the input with a clone of itself  The clone won t have the file selected   Advantages    Simple and understandable code No clumsy wrapping or type switching Cross browser compatibility  correct me if I am wrong here    Result  Happy programmer

User · Answer

document getElementById  your input id   value      Edit  This one doesn t work in IE and opera  but seems to work for firefox  safari and chrome

User · Answer

There s 3 ways to clear file input with javascript    set value property to empty or null    Works for IE11  and other modern browsers  Create an new file input element and replace the old one   The disadvantage is you will lose event listeners and expando properties  Reset the owner form via form reset   method    To avoid affecting other input elements in the same owner form  we can create an new empty form and append the file input element to this new form and reset it  This way works for all browsers    I wrote a javascript function  demo  http   jsbin com muhipoye 1   function clearInputFile f       if f value           try              f value         for IE11  latest Chrome Firefox Opera             catch err             if f value     for IE5   IE10             var form   document createElement  form                    parentNode   f parentNode  ref   f nextSibling              form appendChild f               form reset                parentNode insertBefore f ref

User · Answer

Try this easy and it works let input   elem querySelector  input type  quot file quot      input outerHTML input outerHTML   this will reset the input

User · Answer

I tried most of solutions but did not seem anyone to work  However I found a walk around for it below   The structure of the form is  form    label  input and submit button  After we choose a file  the filename will be shown by the label by doing so manually in JavaScript    So my strategy is  initially the submit button is disabled  after a file is chosen  the submit button disabled attribute will be removed such that I can submit file  After I submit  I clear the label which makes it look like I clear the file input but actually not  Then I will disable the submit button again to prevent from submitting the form   By setting the submit button disable or not  I stop the file from submitted many times unless I choose another file

User · Answer

Setting the value to    does not work in all browsers   Instead try setting the value to null like so   document getElementById  your input id   value  null    EDIT  I get the very valid security reasons for not allowing JS to set the file input  however it does seem reasonable to provide a simple mechanism for clearing already selecting output   I tried using an empty string but it did not work in all browsers  NULL worked in all the browsers I tried  Opera  Chrome  FF  IE11  and Safari    EDIT  Please note that setting to NULL works on all browsers while setting to an empty string did not

User · Answer

Unfortunately none of the above answers appear to cover all the bases - at least not with my testing with vanilla javascript     value   null appears to work on FireFox  Chome  Opera and IE11  but not IE8 9 10    cloneNode  and  clone   in jQuery  on FireFox appears to copy the  value over  therefore making the clone pointless    So here is the vanilla javascript function I have written that works on FireFox  27 and 28   Chrome  33   IE  8  9  10  11   Opera  17     these are the only browsers currently available to me to test with   function clearFileInput ctrl      try       ctrl value   null      catch ex        if  ctrl value        ctrl parentNode replaceChild ctrl cloneNode true   ctrl           The ctrl parameter is the file input itself  so the function would be called as     clearFileInput document getElementById  myFileInput

User · Answer

I changed to type text and back to type to file using setAttribute   lt input file-model  quot thefilePic quot  style  quot width 95   quot  type  quot file quot  name  quot file quot  id  quot filepicture quot  accept  quot image jpeg quot    gt     var input document querySelector   filepicture      if input    null        input setAttribute  quot type quot    quot text quot        input setAttribute  quot type quot    quot file quot

User · Answer

This worked for me  const clear    event    gt  event target value         clear  quot input id quot

User · Answer

That s actually quite easy   document querySelector   input-field   value

User · Answer

How about removing that node  creating a new one with the same name

User · Answer

I was having same problem and i came up with this      x000D   x000D  var file   document querySelector  input    x000D  var emptyFile   document createElement  input    x000D  emptyFile type    file   x000D   x000D  document querySelector  button   onclick   function    x000D    file files   emptyFile files  x000D    x000D   lt input type  file  gt  x000D   lt button gt clear lt  button gt  x000D   x000D   x000D

User · Answer

SOLUTION  The following code worked for me with jQuery  It works in every browser and allows to preserve events and custom properties   var  el       your-input-id     el wrap   lt form gt    closest  form   get 0  reset     el unwrap      DEMO  See this jsFiddle for code and demonstration   LINKS   Clearing  lt input type  file    gt  using jQuery How to reset file input with JavaScript

[javascript] How can I clear an HTML file input with JavaScript?

Examples related to javascript

Examples related to html