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.



<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>


Komentar

  1. its. work!! thx very much

    BalasHapus
  2. thank you veryyyy much! ;-)

    BalasHapus
  3. Excellent hack.. love it.. :)

    BalasHapus
  4. That is the sweetest bit of code I have seen in a while, brilliant in it's simplicity and worked in the big 3 !

    BalasHapus
  5. Awesome! I have been looking for something like this for days. Wish I found your code sooner. THANKS!!!

    BalasHapus
  6. Thanks, Dave.
    Just put the link to this site and it will help me to rise up in Search result list.

    BalasHapus
  7. Absolutely brilliant!
    Thanks Dave

    BalasHapus
  8. great! saved me hours of hacking

    BalasHapus
  9. ขอบคุณมากค่ะ

    it works! thanks a lot !!

    BalasHapus
  10. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  11. excellent, i really appreciate your help... :)

    BalasHapus
  12. Wow!! It realy works.. Thanks..

    BalasHapus
  13. You rock!
    Thanks.

    BalasHapus
  14. 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.

    BalasHapus
  15. Wow! this works. any idea why it does ?

    BalasHapus
  16. Excellent!!!
    Works!
    saved a lot of time!

    BalasHapus
  17. 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

    BalasHapus
  18. 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

    BalasHapus
  19. Absolutely brilliant! It is exactly what I was looking for. Thank you very much!

    BalasHapus
  20. Thanks. Thanks a lot... :)

    BalasHapus
  21. 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";

    BalasHapus
  22. Hi gunasekaran,

    You can not do that at all. This restriction is made to prevent file stealing from client machine.

    BalasHapus
  23. Nice, very nice.

    BalasHapus
  24. Thanks A lot for the Wonderful piece of code :)
    U Rock!

    BalasHapus
  25. Thank you Bogdan for starting the post!
    Angel your solution was what I expected.

    BalasHapus
  26. Very clever! Thank you!

    BalasHapus
  27. 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

    BalasHapus
  28. Great idea! Works in IE 6, 7, 8 and in FF 3.

    BalasHapus
  29. great piece of cod...thanks o alot.....

    BalasHapus
  30. Seems as weird as simple... and it works!

    Perfect! Thanks a lot!

    BalasHapus
  31. Doesn't work with ASP.NET AJAX.

    BalasHapus
  32. Another solution (will keep events):

    function clearFileInputField(elem) {
    $elem = $(elem);
    $elem.replaceWith($elem.clone(true));
    }

    BalasHapus
  33. delijah's improvement It's perfect

    BalasHapus
  34. Dude,
    You are awesome. You made my Day. Thanks a ton.

    BalasHapus
  35. Thank you very much for the tip, really useful for Ajax.

    BalasHapus
  36. Hi guys!!!

    The following one only worked for me...

    function ClearFileUpload() {
    var fu = document.getElementById('');
    if (fu != null) {
    document.getElementById('').outerHTML = fu.outerHTML;
    }

    BalasHapus
  37. hi,

    i want NOT to clear the input file field when i press "submit". how can i do this?

    BalasHapus
  38. i want to keep the file field populated after a failed validation.

    BalasHapus
  39. I wonder how you came to this...
    But its brilliant really! :)

    BalasHapus
  40. Nice Code. It worked even on asp.Net application.

    Thanx

    BalasHapus
  41. brilliant trick, I have been looking for something like this before. thanks

    BalasHapus
  42. Thanks you so much.... Helped me in IE browsers.

    BalasHapus
  43. Nice Trick in a shorten way.
    XOXO

    BalasHapus
  44. Thanks a lot.
    ขอบคุณครับ

    BalasHapus
  45. var afile = jQuery("#" + picName);
    afile.replaceWith(afile.clone());

    BalasHapus
  46. When I was writing this pos - I didn't know any js libraries and didn't know javascript well at all.

    BalasHapus
  47. Excellent...Done a great job. Its working fine for me.

    BalasHapus
  48. Really nice.

    Thanks a lot. It work for me.

    BalasHapus
  49. document.myForm.reset();

    BalasHapus
  50. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

10 Tempat Yang Tidak Bisa Kamu Kunjungi

Kawasaki 150 KLX S

Tips Mengatasi Ponsel Yang Terkena Air