Clearing input type file using jQuery

Question

Is it possible to clear an  lt input type  file    gt  control value with jQuery  I ve tried the following       control   attr   value            But it s not working

User · Answer

control   val     is all you need  Tested on Chrome using JQuery 1 11  Other users have tested in Firefox as well

User · Answer

In IE8 they made the File Upload field read-only for security  See the IE team blog post   Historically  the HTML File Upload Control    has been the source of a significant number of information disclosure vulnerabilities  To resolve these issues  two changes were made to the behavior of the control  To block attacks that rely on    stealing    keystrokes to surreptitiously trick the user into typing a local file path into the control  the File Path edit box is now read-only  The user must explicitly select a file for upload using the File Browse dialog  Additionally  the    Include local directory path when uploading files    URLAction has been set to  quot Disable quot  for the Internet Zone  This change prevents leakage of potentially sensitive local file-system information to the Internet  For instance  rather than submitting the full path C  users ericlaw documents secret image png  Internet Explorer 8 will now submit only the filename image png

User · Answer

For obvious security reasons you can t set the value of a file input  even to an empty string   All you have to do is reset the form where the field or if you only want to reset the file input of a form containing other fields  use this   function reset field  e        e wrap   lt form gt    parent  form   trigger  reset        e unwrap         Here is an exemple  http   jsfiddle net v2SZJ 1

User · Answer

This works for me        file   replaceWith     file   clone       http   forum jquery com topic how-to-clear-a-file-input-in-ie  Hope it helps

User · Answer

it does not work for me       Attachment   replaceWith   this  clone     or      Attachment   replaceWith     Attachment   clone       so in asp mvc I use razor features for replacing file input  at first create a variable for input string with Id and Name and then use it for showing in page and replacing on reset button click          var attachmentInput   Html TextBoxFor c   gt  c Attachment  new   type    file          attachmentInput   lt button type  button  onclick        Html IdFor p   gt  p Attachment     replaceWith    attachmentInput      gt -- lt  button gt

User · Answer

On my Firefox 40 0 3 only work with this      input type file    val          input type file    replaceWith    input type file    clone true

User · Answer

This works with Chrome  FF  and Safari      control   val       May not work with IE or Opera

User · Answer

its works for me in every browser           var input     this           var next   this nextSibling          var parent   input parent            var form       lt form gt  lt  form gt             form append input           form 0  reset            if  next                  next  before input             else               parent append input

User · Answer

function clear         var input   document createElement  input        input setAttribute  type    file        input setAttribute  value            input setAttribute  id    email attach             email attach   replaceWith  input cloneNode

User · Answer

The  clone   thing does not work in Opera  and possibly others   It keeps the content   The closest method here for me was Jonathan s earlier  however ensuring that the field preserved its name  classes  etc made for messy code in my case   Something like this might work well  thanks to Quentin too    function clearInput  source        var  form       lt form gt        var  targ    source clone   appendTo  form       form 0  reset        source replaceWith  targ

User · Answer

input type file    wrap   lt div id  fileWrapper   gt         fileWrapper   append   lt div id  duplicateFile    style  display none  gt       fileWrapper   html     lt  div gt         fileWrapper   html     duplicateFile   html

User · Answer

The value of file inputs is read only  for security reasons   You can t blank it programatically  other than by calling the reset   method of the form  which has a broader scope than just that field

User · Answer

Jquery is supposed to take care of the cross-browser older browser issues for you   This works on modern browsers that I tested  Chromium v25  Firefox v20  Opera v12 14  Using jquery 1 9 1  HTML   lt input id  fileopen  type  file  value      gt   lt button id  clear  gt Clear lt  button gt    Jquery      clear   click function              fileopen   val            On jsfiddle  The following javascript solution also worked for me on the browsers mention above   document getElementById  clear   addEventListener  click   function          document getElementById  fileopen   value          false     On jsfiddle  I have no way to test with IE  but theoretically this should work  If IE is different enough that the Javascript version does not work because MS have done it in a different way  the jquery method should in my opinion deal with it for you  else it would be worth pointing it out to the jquery team along with the method that IE requires   I see people saying  this won t work on IE   but no vanilla javascript to show how it does work on IE  supposedly a  security feature     perhaps report it as a bug to MS too  if they would count it as such   so that it gets fixed in any newer release   Like mentioned in another answer  a post on the jquery forum   if    browser msie              file   replaceWith     file   clone        else             file   val           But jquery have now removed support for browser testing  jquery browser   This javascript solution also worked for me  it is the vanilla equivalent of the jquery replaceWith method   document getElementById  clear   addEventListener  click   function          var fileopen   document getElementById  fileopen            clone   fileopen cloneNode true        fileopen parentNode replaceChild clone  fileopen      false     On jsfiddle  The important thing to note is that the cloneNode method does not preserve associated event handlers   See this example   document getElementById  fileopen   addEventListener  change   function          alert  change       false    document getElementById  clear   addEventListener  click   function          var fileopen   document getElementById  fileopen            clone   fileopen cloneNode true        fileopen parentNode replaceChild clone  fileopen      false     On jsfiddle  But jquery clone offers this   1       fileopen   change function          alert  change             clear   click function          var fileopen       fileopen            clone   fileopen clone true        fileopen replaceWith clone         On jsfiddle    1  jquery is able to do this if the events were added by jquery s methods as it keeps a copy in jquery data  it does not work otherwise  so it s a bit of a cheat work-around and means things are not compatible between different methods or libraries   document getElementById  fileopen   addEventListener  change   function          alert  change       false        clear   click function          var fileopen       fileopen            clone   fileopen clone true        fileopen replaceWith clone         On jsfiddle  You can not get the attached event handler direct from the element itself   Here is the general principle in vanilla javascript  this is how jquery an all other libraries do it  roughly     function          var listeners            function getListeners node            var length   listeners length              i   0              result                   listener           while  i  lt  length                listener   listeners i               if  listener node     node                    result push listener                              i    1                     return result             function addEventListener node  type  handler            listeners push                node   node                   type   type                   handler   handler                      node addEventListener type  handler  false              function cloneNode node  deep  withEvents            var clone   node cloneNode deep               attached              length              evt              i   0           if  withEvents                attached   getListeners node               if  attached                    length   attached length                  while  i  lt  length                        evt   attached i                       addEventListener clone  evt type  evt handler                        i    1                                                     return clone             addEventListener document getElementById  fileopen     change   function              alert  change                 addEventListener document getElementById  clear     click   function              var fileopen   document getElementById  fileopen                clone   cloneNode fileopen  true  true            fileopen parentNode replaceChild clone  fileopen                   On jsfiddle  Of course jquery and other libraries have all the other support methods required for maintaining such a list  this is just a demonstration

User · Answer

Make it asynchronous  and reset it after the button s desired actions have been done        lt  -- Html Markup --- gt       lt input id  btn  type  file  value  Button  onchange  function      gt        lt script gt        Function     function function e               input your coding here                       Reset         var controlInput       btn            controlInput replaceWith controlInput   controlInput val     clone true                lt  script gt

User · Answer

I got stuck with all the options here  Here s a hack that I made which worked    lt form gt    lt input type  file  gt    lt button type  reset  id  file reset  style  display none  gt   lt  form gt    and you can trigger the reset using jQuery with a code similar to this       file reset   trigger  click       jsfiddle  http   jsfiddle net eCbd6

User · Answer

What   In your validation function  just put   document onlyform upload value       Assuming upload is the name    lt input type  file  name  upload  id  csv doc   gt    I m using JSP  not sure if that makes a difference     Works for me  and I think it s way easier

User · Answer

I have used https   github com malsup form blob master jquery form js  which has a function called clearInputs    which is crossbrowser  well tested  easy to use and handles also IE issue and hidden fields clearing if needed  Maybe a little long solution to only clear file input  but if you are dealing with crossbrowser file uploads  then this solution is recommended   The usage is easy       Clear all file fields     input file   clearInputs        Clear also hidden fields     input file   clearInputs true       Clear specific fields      myfilefield1  myfilefield2   clearInputs              Clears the selected form elements        fn clearFields     fn clearInputs   function includeHidden        var re        color date datetime email month number password range search tel text time url week   i      hidden  is not in this list     return this each function             var t   this type  tag   this tagName toLowerCase            if  re test t     tag     textarea                 this value                         else if  t     checkbox     t     radio                 this checked   false                    else if  tag     select                 this selectedIndex   -1                    else if  t     file                 if   MSIE  test navigator userAgent                       this  replaceWith   this  clone true                  else                     this  val                                      else if  includeHidden                   includeHidden can be the value true  or it can be a selector string                indicating a special test  for example                      myForm   clearForm   special hidden                  the above would clean hidden inputs that have the class of  special              if    includeHidden     true     hidden  test t                        typeof includeHidden     string       this  is includeHidden                     this value

User · Answer

You can replace it with its clone like so   var clone       control   clone         control   replacewith clone     But this clones with its value too so you had better like so  var emtyValue       control   val      var clone   emptyValue clone         control   replacewith clone

User · Answer

I have managed to get this to work using the following     function resetFileElement ele         ele val           ele wrap   lt form gt    parent  form   trigger  reset           ele unwrap        ele prop  files   0    null      ele replaceWith ele clone             This has been tested in IE10  FF  Chrome  amp  Opera   There are two caveats      Still doesn t work properly in FF  if you refresh the page  the file element gets re-populated with the selected file  Where it is getting this info from is beyond me  What else related to a file input element could I possible try to clear  Remember to use delegation on any events you had attached to the file input element  so they still work when the clone is made    What I don t understand is who on earth thought not allowing you to clear an input field from an invalid unacceptable file selection was a good idea   OK  don t let me dynamically set it with a value so I can t leach files from a user s OS  but let me clear an invalid selection without resetting an entire form    It s not like  accept  does anything other than a filter anyhow and in IE10  it doesn t even understand MS Word mime types  it s a joke

User · Answer

An easy way is changing the input type and change it back again   Something like this   var input       attachments    input prop  type    text    input prop  type    file

User · Answer

Quick answer  replace it   In the code below I use the replaceWith jQuery method to replace the control with a clone of itself  In the event you have any handlers bound to events on this control  we ll want to preserve those as well  To do this we pass in true as the first parameter of the clone method    lt input type  file  id  control   gt   lt button id  clear  gt Clear lt  button gt      var control       control         clear   on  click   function          control replaceWith  control   control clone  true            Fiddle  http   jsfiddle net jonathansampson dAQVM   If cloning  while preserving event handlers  presents any issues you could consider using event delegation to handle clicks on this control from a parent element      form   on  focus     control   doStuff     This prevents the need for any handlers to be cloned along with the element when the control is being refreshed

User · Answer

I ended up with this   if   browser msie      browser webkit        doesn t work with opera and FF     this  after   this  clone true   remove       else    this setAttribute  type    text      this setAttribute  type    file         may not be the most elegant solution  but it work as far as I can tell

User · Answer

Easy  you wrap a  lt form gt  around the element  call reset on the form  then remove the form using  unwrap    Unlike the  clone   solutions otherwise in this thread  you end up with the same element at the end  including custom properties that were set on it   Tested and working in Opera  Firefox  Safari  Chrome and IE6   Also works on other types of form elements  with the exception of type  quot hidden quot    x000D   x000D  window reset   function e      e wrap   lt form gt    closest  form   get 0  reset      e unwrap      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt    lt form gt     lt input id  file  type  file  gt     lt br gt     lt input id  text  type  text  value  Original  gt   lt  form gt    lt button onclick  reset     file     gt Reset file lt  button gt   lt button onclick  reset     text     gt Reset text lt  button gt  x000D   x000D   x000D   JSFiddle As Timo notes below  if you have the buttons to trigger the reset of the field inside of the  lt form gt   you must call  preventDefault   on the event to prevent the  lt button gt  from triggering a submit   EDIT Does not work in IE 11 due to an unfixed bug  The text  file name  is cleared on the input  but its File list remains populated

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 go s 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

I was able to get mine working with the following code   var input       control        input replaceWith input val     clone true

User · Answer

It s easy lol  works in all browsers  except opera        input type file    each function          this  after   this  clone true   remove          JS Fiddle  http   jsfiddle net cw84x 1

User · Answer

I tried with the most of the techniques the users mentioned  but none of they worked in all browsers  i e  clone   doesn t work in FF for file inputs  I ended up copying manually the file input  and then replacing the original with the copied one  It works in all browsers    lt input type  file  id  fileID  class  aClass  name  aName   gt   var  fileInput     fileID    var  fileCopy     lt input type  file  class     fileInput attr  class     id  fileID  name     fileInput attr  name       gt      fileInput replaceWith  fileCopy

[javascript] Clearing <input type='file' /> using jQuery

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to file-io

Examples related to forms