The value of an HTML file input field cannot be changed or reset (without doing a full form reset) for security reasons. The other day I read Bogdan Gusiev’s post about how to clear an upload file input field by resetting the HTML of a containing div to its intial state using Javascript and thought I’d take it one step further by doing this in jQuery and adding a clear button next to any file input field on a web page.
The HTML of any element can be reset with jQuery using the following function and passing in the id of the element’s parent. This will reset the HTML within the parent to its original state; it will lose any binding you’d added after the DOM was loaded (such as adding an event handler in $(document).ready). Here’s the Javascript for doing this:
function reset_html(id) {
$('#'+id).html($('#'+id).html());
}
In $(document).ready we can now add a div around every <input type="file"> element with a clear button, binding a function to it which will reset the HTML of the div like so:
$(document).ready(function() {
var file_input_index = 0;
$('input[type=file]').each(function() {
file_input_index++;
$(this).wrap('<div id="file_input_container_'+file_input_index+'"></div>');
$(this).after('<input type="button" value="Clear" onclick="reset_html('file_input_container_'+file_input_index+'')" />');
});
});
The file_input_index var is used so there can be a unique id for each containing <div> – it’s incremented inside the loop and used along with the "file_input_container_" prefix to have a unique id for each containing div.
$(‘input[type=file]’).each() will find all the file upload input fields and apply the div and button to it. Note that this will have to traverse the entire DOM so it’s not particularly optimal. If your forms all have a common unique id then it would be better to do something along the lines of $(‘#form input[type=file]’).each() to make it more efficient.
$(this).wrap() ads the containing div around the file input field.
$(this).after() then adds a button after the containing div which, when clicked, will reset the html of the containing div back to its initial state, thus clearing the value of the file upload input field. This will be on a new line because of the containing div; to make it appear to the right of the form input assign a class (or style) to the containing div which floats it to the left.
The nice thing about added the containing div and the button with jQuery in the document initialization is that you don’t need to add anything extra to your forms; it will be automatically added after the page has loaded.
Finally, here’s an example of the clearing file upload function. This doesn’t use the document initialization but is coded into the button itself.
Please note that if you are reading this in an RSS feed reader then the example above won’t work so you’ll need to click through to this post and view it in a web browser.