Clearing file input box in Internet Explorer

Question

I have an file upload box and a clear button on my page. When I press the clear button, I want the text in the file upload box to be cleared.

The following works in Firefox, but doesn't in IE (the text stays there). Is there a workaround for this?

$("#clear").click( function() {
    $("#attachment").val("");
    //document.myform.attachment.value = "";
})

HTML:

<form name="myform">
    <input type="file" name="attachment" id="attachment" />
</form>
<br /><button id="clear">Clear Attachment</button>

jsFiddle

possible duplicate of [Clearing using jQuery](http://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery) — slipheed, Jan 29 '15 at 17:44

score 18 · Answer 1 · answered Dec 16 '11 at 19:40

18

One solution I've found is simply doing:

document.getElementById('myUploadField').parentNode.innerHTML = document.getElementById('myUploadField').parentNode.innerHTML;

Seems like it shouldn't work, but it does.

answered Dec 16 '11 at 19:40

Maxx

3,925
8
33
38

1

Awsome. Thnx a bunch. – Alkis Kalogeris Dec 10 '13 at 15:10
This works... but *why* it works? It seems you're setting a value with the *same* value. Can you please explain the trick? – Marco Sulla Feb 16 '23 at 16:27

score 13 · Answer 2 · answered Jan 29 '13 at 16:17

13

This solution is more elegant than cloning the input element. You wrap a <form> around the element, call reset on the form, then remove the form using unwrap(). Unlike the clone() solutions above, 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="hidden".

http://jsfiddle.net/rPaZQ/

function reset(e) {
  e.wrap('<form>').closest('form').get(0).reset();
  e.unwrap();
}

answered Jan 29 '13 at 16:17

slipheed

7,170
3
27
38

Extremely useful if you don't want to do a full reset. – Nov 20 '13 at 15:23
1

Not a foolproof solution. Value may be cleared off the input field on UI but can still be accessible from $("#myFileUpload").val() – Misam Sep 28 '15 at 09:47

score 9 · Accepted Answer · edited May 23 '17 at 11:53

9

It's readonly in IE8 onwards, so you can't clear it. The simplest way around this security feature is to replace the element with a copy.

Edit Found a previous answer to this that suggests the same approach! Clearing <input type='file' /> using jQuery

edited May 23 '17 at 11:53

Community

1
1

answered Aug 08 '11 at 19:28

andyb

43,435
12
121
150

score 3 · Answer 4 · answered Jul 16 '15 at 04:52

3

This worked for me:

 $("input[type='file']").replaceWith($("input[type='file']").clone(true));

answered Jul 16 '15 at 04:52

Anand Kumar

131
2
5

score 2 · Answer 5 · answered Aug 08 '11 at 19:32

2

use simple javascript:

formname.reset();

See the Demo: http://jsfiddle.net/rathoreahsan/YEeGR/

answered Aug 08 '11 at 19:32

Ahsan Rathod

5,465
2
21
25

1

Bit of a problem when there are multiple fields on the form. – a coder Mar 08 '12 at 19:28

score 1 · Answer 6 · edited Oct 05 '12 at 16:14

Try to use the below method to clear the input file.

Include this script:

 <script>
 function clearFileInputField(tagId) {
 document.getElementById(tagId).innerHTML =
    document.getElementById(tagId).innerHTML;
}
</script>

Change HTML to this:

<div id="uploadFile_div">
<input type="file" class="fieldMoz" id="uploadFile" onkeydown="return false;" size="40" name="uploadFile"/>
</div>
<a onclick="clearFileInputField('uploadFile_div')" href="javascript:noAction();">Clear</a>`

score 0 · Answer 7 · answered Aug 08 '11 at 19:28

0

Use the old-fashioned <input type="reset" value="clear this">

answered Aug 08 '11 at 19:28

Diodeus - James MacFarlane

112,730
33
157
176

Won't that reset the entire form though? I'd like to avoid that. – tskuzzy Aug 08 '11 at 19:30
The example you gave only has one element so I thought that would be fine. – Diodeus - James MacFarlane Aug 08 '11 at 19:31
Ah sorry for the confusion. I suppose in theory I could just save the values of the other form elements and reload them afterwards. :P – tskuzzy Aug 08 '11 at 19:33
@tskuzzy: If there are multiple file fields in the form, you cannot reload them afterwards. – Timo Kähkönen Apr 02 '13 at 14:23

Clearing file input box in Internet Explorer

7 Answers7

Include this script:

Change HTML to this:

Linked