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 = $(\'\').attr({
    type: \         


        

Answer 1

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.

Answer 2

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.

<form method="POST" enctype="multipart/form-data">
<label for="fileinput">
 <input type="file" name="fileinput" id="fileinput" />
</label>
</form>

$("#fileinput").remove();
$("<input>")
  .attr({
    type: 'file',
    id: 'fileinput',
    name: 'fileinput'
    })
  .appendTo($("label[for='fileinput']"));

Answer 3

I have done something like this and it's working for me

$('#fileInput').val(null); 

Answer 4

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/

Answer 5

this code works for all browsers and all inputs.

$('#your_target_input').attr('value', '');

Answer 6

This should work:

$imageClear.on('click', function() { 
    $imageFile.val(''); 
});