Remove selected file from Input type = File in IE

Question

How to clear selected file in IE

Following example works in chrome but not in IE (Any version)

HTML

<input id="file1" type="file" class="" multiple="" required="" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

Jquery

$("#fileUpload").val('');

As expected IE does not support this.

Possible duplicate of http://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery. Check working demo [here](http://jsfiddle.net/rPaZQ/) from [this answer](http://stackoverflow.com/a/13351234/4908989). — lmgonzalves, Jun 18 '15 at 13:36

score 1 · Answer 1 · answered Jun 18 '15 at 13:31

1

you can have below workaround for IE

$("#image").remove("");
$("form").append(' <input id="image" type="file" name="image"/>');

fiddle- http://jsfiddle.net/nfvR9/25/

answered Jun 18 '15 at 13:31

Amit.rk3

2,417
2
10
16

1

this is just remove and add the html. lets say the input file with multiple, how you gonna remove it 1 file only? – Fai Zal Dong Oct 23 '18 at 07:37

score 1 · Accepted Answer · answered Jun 18 '15 at 13:34

1

I end up doing as below:

function reset_form_element(e) {
            e.wrap('<form>').parent('form').trigger('reset');
            e.unwrap();
        }

and then called the function as below:

reset_form_element($('#file1'));

answered Jun 18 '15 at 13:34

user2739418

1,623
5
29
51

score 1 · Answer 3 · answered Jun 18 '15 at 13:35

1

Input filelist is read-only, so you can't remove any files from it, thats why IE doesn't support cleaning the value of the input.

answered Jun 18 '15 at 13:35

Luiz Eduardo Simões

146
1
11

score 1 · Answer 4 · answered Jun 18 '15 at 14:36

I would extend jQuery to have a method to "clearFiles". jQuery depreciated jQuery.browser with 1.9 which is why i am checking if the browser is IE with a variable.

Function Extension:

$.fn.extend({
    clearFiles: function () {
        $(this).each(function () {
            var isIE = (window.navigator.userAgent.indexOf("MSIE ") > 0 || !! navigator.userAgent.match(/Trident.*rv\:11\./));
            if ($(this).prop("type") == 'file') {
                if (isIE == true) {
                    $(this).replaceWith($(this).val('').clone(true));
                } else {
                    $(this).val("");
                }
            }
        });
        return this;
    }
});

Use:

$('#test').click(function () {
    $("[type='file']").clearFiles();
});

Here a fiddle. fiddle

score 0 · Answer 5 · answered Jan 01 '20 at 21:35

With much appreciation to Amit.rk3 for his answer, I modified his answer(which I would have put in comments, but I dont have 50 points!!). The OP did say clear a selected file, so I would assume a single input. I have a rather long and complex page, so I wanted to be very specific which input to reset.. The code below works perfect on IE(8) and FF ESR :)

Select Photo(optional): <span id="form_sp"><input id="file" type="file" size="40" name="photo"/></span> <button id="reset_t">Reset file</button>

<script>
$(document).ready(function(){
    $('#reset_t').click(function(e) {
        e.preventDefault(); // keeps form from submitting
        $("#form_sp").html('');
        $("#form_sp").html('<input id="file" type="file" size="40" name="photo"/>');
    });
});
</script>

Remove selected file from Input type = File in IE

5 Answers5