Clear upload file input field
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.
Java Script function below looks strange but acts exactly in the way we want:
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>
its. work!! thx very much
BalasHapusthank you veryyyy much! ;-)
BalasHapusExcellent hack.. love it.. :)
BalasHapusThat is the sweetest bit of code I have seen in a while, brilliant in it's simplicity and worked in the big 3 !
BalasHapusAwesome! I have been looking for something like this for days. Wish I found your code sooner. THANKS!!!
BalasHapusThanks, Dave.
BalasHapusJust put the link to this site and it will help me to rise up in Search result list.
Absolutely brilliant!
BalasHapusThanks Dave
great! saved me hours of hacking
BalasHapusขอบคุณมากค่ะ
BalasHapusit works! thanks a lot !!
Komentar ini telah dihapus oleh administrator blog.
BalasHapusexcellent, i really appreciate your help... :)
BalasHapusWow!! It realy works.. Thanks..
BalasHapusu de man! Thanks.
BalasHapusYou rock!
BalasHapusThanks.
Hi,
BalasHapusIs it working in case of IE6?
I thnk its not..
Please check and if not working can u give me any solution ASAP?
Thanks.
Wow! this works. any idea why it does ?
BalasHapusExcellent!!!
BalasHapusWorks!
saved a lot of time!
Thanks a lot !!!
BalasHapusQuote: "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
Thanks a lot !!!
BalasHapusQuote: "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
Weird. But it works.
BalasHapusAbsolutely brilliant! It is exactly what I was looking for. Thank you very much!
BalasHapusThanks. Thanks a lot... :)
BalasHapusDear sir
BalasHapushow 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";
Hi gunasekaran,
BalasHapusYou can not do that at all. This restriction is made to prevent file stealing from client machine.
Thanks a lot !!!
BalasHapusNice, very nice.
BalasHapusThanks A lot for the Wonderful piece of code :)
BalasHapusU Rock!
Thank you Bogdan for starting the post!
BalasHapusAngel your solution was what I expected.
Very clever! Thank you!
BalasHapusHi I am using a structure like following
BalasHapus---------------------------------------------------
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
Great idea! Works in IE 6, 7, 8 and in FF 3.
BalasHapusgreat piece of cod...thanks o alot.....
BalasHapusSeems as weird as simple... and it works!
BalasHapusPerfect! Thanks a lot!
Thanks! :)
BalasHapusDoesn't work with ASP.NET AJAX.
BalasHapusAnother solution (will keep events):
BalasHapusfunction clearFileInputField(elem) {
$elem = $(elem);
$elem.replaceWith($elem.clone(true));
}
delijah's improvement It's perfect
BalasHapusDude,
BalasHapusYou are awesome. You made my Day. Thanks a ton.
Thank you very much for the tip, really useful for Ajax.
BalasHapusHi guys!!!
BalasHapusThe following one only worked for me...
function ClearFileUpload() {
var fu = document.getElementById('');
if (fu != null) {
document.getElementById('').outerHTML = fu.outerHTML;
}
hi,
BalasHapusi want NOT to clear the input file field when i press "submit". how can i do this?
i want to keep the file field populated after a failed validation.
BalasHapusI wonder how you came to this...
BalasHapusBut its brilliant really! :)
Nice Code. It worked even on asp.Net application.
BalasHapusThanx
brilliant trick, I have been looking for something like this before. thanks
BalasHapusPretty awesome!
BalasHapusThanks you so much.... Helped me in IE browsers.
BalasHapusNice Trick in a shorten way.
BalasHapusXOXO
Thank you man...
BalasHapusthumbs up!!!
BalasHapusReilly good and beautiful.Thanks
BalasHapusThanks a lot.
BalasHapusขอบคุณครับ
var afile = jQuery("#" + picName);
BalasHapusafile.replaceWith(afile.clone());
When I was writing this pos - I didn't know any js libraries and didn't know javascript well at all.
BalasHapusNice Work..It help me a lot.
BalasHapusExcellent...Done a great job. Its working fine for me.
BalasHapusnice one Dude...
BalasHapusReally nice.
BalasHapusThanks a lot. It work for me.
document.myForm.reset();
BalasHapusKomentar ini telah dihapus oleh administrator blog.
BalasHapus