Loading ...

Tips and tricks: How to clear the file upload control value using jQuery / JavaScript | CodeAsp.Net

Tips and tricks: How to clear the file upload control value using jQuery / JavaScript

 /5
0 (0votes)

I have seen this as a problem in many cases, asked in the forums and other community places and thought it would be good to document it and write about it on my blog post here.

So, due to security reasons, Internet Explorer won't let you play much with clearing the value or changing the value of the file upload control, other than the selected value using the Browse functionality.

Someone may ask why isn't this allowed and what are the security threats? Well, imagine someone selects file myFile.txt and instead that file, you overwrite it and you make him as he has selected file passwords.txt and upload that file to your server? Well, thats indeed a big security issue!

So, lets get back to our problem here. We want to clear the value of the file upload control, on client side.

Either if you add html element such as

<input type="file" id="upload1" />

or you use ASP.NET FileUpload contro, the rendered HTML will be pretty much the same as the HTML code above.

So, if you put it like that and lets say add a Clear button with the following definition:

<input type="button" id="btnClear" value="Clear" />


and then add jQuery code (or plain JavaScript) that will clear the upload1 control

<script type="text/javascript">
$(document).ready(function() {
    $("#btnClear").click(function(event){
		event.preventDefault();
		$("#upload1").val('');
	});
});
</script>


This will certainly work fine in Mozilla, but reasonably won't work on IE due to the possible security reasons that may occur due to playing with such controls.

So, whats the workaround?

First of all, define the following clear_html function:

function clear_html(id) {
    $('#'+id).html($('#'+id).html());
}

What it does is it clears the html of the element with the given id as parameter to the function. Mainly, it finds that element, and replaces the html of the element with its html. (I hope you don't have dizziness now...)

How to use this function? Very simple

Wrap the file upload and the clear button inside div with given id, and call the clear_html function with the id of the div in onclick event.

Complete example using jQuery:

<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js" type="text/javascript"></script>
<script type="text/javascript">
function clear_html(id) {
    $('#'+id).html($('#'+id).html());
}
</script>
<head>
<body>

<div id="myDiv1">
	<input type="file" id="upload1" />
	<input type="button" value="Clear" onclick="clear_html('myDiv1')" />
</div>

</body>
</html>

 


Complete example with Plain JavaScript:

<html>
<head>
<script type="text/javascript">
function clear_html(id) {
    var element = document.getElementById(id);
	element.innerHTML = element.innerHTML;
}
</script>
<head>
<body>

<div id="myDiv1">
	<input type="file" id="upload1" />
	<input type="button" value="Clear" onclick="clear_html('myDiv1')" />
</div>

</body>
</html>


Interesting problem and nice to have it documented here.

Hope this helps,
Hajan

Comments (no comments yet)

  • :*
  • :*
  • :
 *

Top Posts