How to clear File Input

Question

Below is part of the jquery code I have which displays the file input and a  Clear File  button   var  imagefile       lt input   gt    attr       type   file       name   imageFile       class   imageFile        image append  imagefile    var  imageclear       lt input   gt    attr       type   button       name   imageClear       class   imageClear       value   Clear File        image append  imageclear     Now the reason I have the  Clear File  button is because if you click on the button  then it will clear anything that is in the file input  How do I code it so that it actually clears the file input when I click on the  Clear File  button

User · Answer

get input id and put val is empty like below  Note   Dont put space between val empty double quotes val             imageFileId   val

User · Answer

Another solution if you want to be certain that this is cross-browser capable is to remove   the  tag and then append   or prepend   or in some other way re-add a new instance of the input tag with the same attributes    lt form method  POST  enctype  multipart form-data  gt   lt label for  fileinput  gt    lt input type  file  name  fileinput  id  fileinput    gt   lt  label gt   lt  form gt       fileinput   remove        lt input gt       attr       type   file       id   fileinput       name   fileinput            appendTo    label for  fileinput

User · Answer

I have done something like this and it s working for me      fileInput   val null

User · Answer

This should work    imageClear on  click   function           imageFile val

User · Answer

This is the method I like to use as well but I believe you need to add the bool true parameter to the clone method in order for any events to remain attached with the new object and you need to clear the contents       var input       fileInput         function clearInput             input   input val     clone true            https   api jquery com clone

User · Answer

This works to       yourINPUTfile   val

User · Answer

By Setting    ID   val null   worked for me

User · Answer

Clear file input with jQuery      fileInputId   val null     Clear file input with JavaScript  document getElementById  fileInputId   value   null

User · Answer

for React users  e target value        But if the file input element is triggered by a different element  with a htmlFor attribute  - that will mean u don t have the event   So you could use a ref   at beginning of func   const inputRef   React useRef      on input element   lt input type  file  ref  inputRef    gt    and then on an onClick function  for example  u may write  inputRef current value          in React Classes - same idea  but difference in constructor  this inputRef   React createRef

User · Answer

this code works for all browsers and all inputs       your target input   attr  value

User · Answer

In my case other solutions did not work than this way       bootstrap-filestyle  input   val        However  if you will have more than 1 file input on page  it will reset the text on all of them

[jquery] How to clear File Input

Examples related to jquery