Clear upload file input field
Apr.23, 2009
Many web developers came to the problem that they are not able to change value of file input field from Java Script in the web application. There is no access to value field of file input tag because of security restriction. However there is a trick how to erase this field if you need it in your application.
You can simply redraw the html block where your input tag is located. In this case all data will remain the same except the selected file value.
:file, howto, html, input, javascript
You can simply redraw the html block where your input tag is located. In this case all data will remain the same except the selected file value.
<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>
Java Script function below looks strange but acts exactly in the way we want:
<script>
function clearFileInputField(tagId) {
document.getElementById(tagId).innerHTML =
document.getElementById(tagId).innerHTML;
}
</script>
May 11th, 2009 on 5:49 am
its. work!! thx very much
May 12th, 2009 on 9:59 pm
thank you veryyyy much!
May 22nd, 2009 on 1:48 pm
Excellent hack.. love it..
May 27th, 2009 on 6:22 am
That is the sweetest bit of code I have seen in a while, brilliant in it’s simplicity and worked in the big 3 !
June 7th, 2009 on 3:42 pm
Awesome! I have been looking for something like this for days. Wish I found your code sooner. THANKS!!!
June 7th, 2009 on 8:00 pm
Thanks, Dave.
Just put the link to this site and it will help me to rise up in Search result list.
June 12th, 2009 on 12:06 am
Absolutely brilliant!
Thanks Dave
June 13th, 2009 on 1:54 am
great! saved me hours of hacking
June 15th, 2009 on 1:19 pm
ขอบคุณมากค่ะ it works! thanks a lot !!
June 20th, 2009 on 1:24 pm
Great script! Works fine for my needs. Thanks!
2 comments: 1. there is a caveat about this, related to compatibility with the use of the form.elements.field_name syntax, explained at
http://www.webdeveloper.com/forum/showthread.php?t=178461 2. this change makes it more general and intuitive, as you can use the input-file’s own id instead of that of its container: function clearFileInputField(tagId) {
var parent = document.getElementById(tagId).parentNode
parent.innerHTML = parent.innerHTML;
} Then you call it like: clearFileInputField(’uploadFile’) The container div (or span) still must exist, but does not even need an id.
July 7th, 2009 on 2:24 am
excellent, i really appreciate your help…
July 15th, 2009 on 2:07 pm
Wow!! It realy works.. Thanks..
July 20th, 2009 on 10:29 pm
u de man! Thanks.
July 25th, 2009 on 1:06 pm
You rock!
Thanks.
July 29th, 2009 on 10:34 am
Hi,
Is it working in case of IE6? I thnk its not..
Please check and if not working can u give me any solution ASAP? Thanks.
August 3rd, 2009 on 9:04 pm
Wow! this works. any idea why it does ?
August 6th, 2009 on 11:48 pm
This is really nice, I gave been using full page reload to clear the fields on http://www.kori.co.ke, this will definitely work for me! Thanks for sharing!!
August 10th, 2009 on 9:06 pm
Excellent!!!
Works!
saved a lot of time!
August 16th, 2009 on 3:38 pm
Thanks a lot !!! Quote: “Java Script function below looks strange but acts exactly in the way we want…” This is because using innerHTML will delete the upload box and recreate it while browsers (firefox) don’t allow pre-setting the value of inputs with type ‘file’ when creating them, thus the value will be reset. Be minded though that you’ll recreate only the html of the upload box and lose all its methods (like event functions) previously defined, to work around this, you can wrap the upload box element inside a span and when you assign events or functions, assign them to the span not to the upload box element itself, this way you won’t lose them. Here’s an example using jQuery: $(’#uploadBox’).wrap(”") /* result -> */ /* binding “change” and “mouseover” event functions to the not to */
$(’#uploadBox’).parent().bind(”change mouseover” , function(){ myValidator.element($(’#uploadBox’)); });
/* myValidator refers to an object created by “jQuery Validate plugin” used for form validation in this example */ /* creating an img element, when clicked on clears the upload box */
$(’#uploadBox’).parent().after(”");
$(’#clearUploadBox’).click(function(){
/* using jQuery html() method equivalent to innerHTML */
$(’#uploadBox’).parent().html( $(’#uploadBox’).parent().html() );
myValidator.element($(’#uploadBox’));
}); Regards
August 16th, 2009 on 3:42 pm
Thanks a lot !!! Quote: “Java Script function below looks strange but acts exactly in the way we want…” This is because using innerHTML will delete the upload box and recreate it while browsers (firefox) don’t allow pre-setting the value of inputs with type ‘file’ when creating them, thus the value will be reset. Be minded though that you’ll recreate only the html of the upload box and lose all its methods (like event functions) previously defined, to work around this, you can wrap the upload box element inside a span and when you assign events or functions, assign them to the span not to the upload box element itself, this way you won’t lose them. Here’s an example using jQuery: [code]
$(’#uploadBox’).wrap(”") /* result -> */ /* binding “change” and “mouseover” event functions to the not to */
$(’#uploadBox’).parent().bind(”change mouseover” , function(){ myValidator.element($(’#uploadBox’)); });
/* myValidator refers to an object created by “jQuery Validate plugin” used for form validation in this example */ /* creating an img element, when clicked on clears the upload box */
$(’#uploadBox’).parent().after(”");
$(’#clearUploadBox’).click(function(){
/* using jQuery html() method equivalent to innerHTML */
$(’#uploadBox’).parent().html( $(’#uploadBox’).parent().html() );
myValidator.element($(’#uploadBox’));
});
[/code] Regards
September 11th, 2009 on 7:29 pm
Weird. But it works.
September 22nd, 2009 on 2:54 am
Absolutely brilliant! It is exactly what I was looking for. Thank you very much!
September 25th, 2009 on 2:41 pm
Thanks. Thanks a lot…
September 29th, 2009 on 4:24 pm
Dear sir
how can assign the value in file tag.If I have a file name in Query string then how can assign the value to file tag I have tried the below said code but its not worked
Server side
~~~~~~~~~~~~
<%
Respose.write “” %>
Client side using dom document.getElementById(”Upload).value = “filename”;
September 29th, 2009 on 4:50 pm
Hi gunasekaran, You can not do that at all. This restriction is made to prevent file stealing from client machine.
October 1st, 2009 on 1:30 pm
Thanks a lot !!!
October 25th, 2009 on 6:13 pm
Nice, very nice.
November 10th, 2009 on 3:21 pm
Thanks A lot for the Wonderful piece of code
U Rock!
November 13th, 2009 on 4:37 am
Thank you Bogdan for starting the post!
Angel your solution was what I expected.
November 24th, 2009 on 6:09 pm
Very clever! Thank you!
December 15th, 2009 on 9:28 am
Hi I am using a structure like following
————————————————— Attachment1
//the script to clear the input is like
hereupload.id will be the upload objects id ie,upload1 in this case
function clearUploadInput(upload)
{
upload.ownerDocument.getElementById(upload.id + “_Form”).innerHTML = upload.ownerDocument.getElementById(upload.id + “_Form”).innerHTML;
}
—————————————————–
redrawing the inner HTML is a good hack,it will work fine in IE,but in non-ie browserslike firefox and chrome , it is causing the entire form to redraw(if we redraw the entire object(upload)),and It is not working for the second time with the mentioned code
January 2nd, 2010 on 8:47 pm
Great idea! Works in IE 6, 7, 8 and in FF 3.
January 29th, 2010 on 8:58 am
great piece of cod…thanks o alot…..
January 29th, 2010 on 12:53 pm
Seems as weird as simple… and it works! Perfect! Thanks a lot!
February 13th, 2010 on 12:18 am
Thanks!
February 25th, 2010 on 6:41 pm
Doesn’t work with ASP.NET AJAX.
March 4th, 2010 on 3:34 pm
Another solution (will keep events): function clearFileInputField(elem) {
$elem = $(elem);
$elem.replaceWith($elem.clone(true));
}
March 18th, 2010 on 6:09 pm
delijah’s improvement It’s perfect
April 1st, 2010 on 10:56 pm
Dude,
You are awesome. You made my Day. Thanks a ton.
May 28th, 2010 on 5:19 pm
Thank you very much for the tip, really useful for Ajax.
July 12th, 2010 on 1:49 pm
Hi guys!!! The following one only worked for me… function ClearFileUpload() {
var fu = document.getElementById(”);
if (fu != null) {
document.getElementById(”).outerHTML = fu.outerHTML;
}