Calling all Javascript gurus

surzycki · Nov 27, 2004

Hello,

I am trying to build a special upload component in javascript. The problem that I am having is that I would like to clear out the file input tag on only certain file input fields (not all). As well, I don't want to have to reload the page. Imaging a situation in which a user has selected 5 files and wishs to remove one of them before uploading. I would like the user to be-able to click a button and the file input field would be zeroed out (no page reload is VERY important) Is there a way to do this that is cross browser compatible?

Stefan

tgreer · Nov 27, 2004

You cannot clear the value of an <input type="file"> field with JavaScript, due to the JavaScript security model.

Thomas D. Greer

http://www.tgreer.com

Providing PostScript & PDF
Training, Development & Consulting

BillyRayPreachersSon · Nov 28, 2004

You may well be able to do this by removing the file upload control using the DOM, and then re-writing it - again, using the DOM. Something like this works for me in both IE6 and FF1:

Code:

<html>
<head>
	<script type="text/javascript">
	<!--
		function clearFileBox(whichBox) {
			var container = document.getElementById(whichBox + 'Container');
			container.removeChild(container.firstChild);
			var newFile = document.createElement('input');
			newFile.type = 'file';
			newFile.name = whichBox;
			container.appendChild(newFile);
		}
	//-->
	</script>
</head>
<body>
	<form>
		<div id="file01Container"><input type="file" name="file01" /></div>
		<input type="button" value="'Clear' File Input" onclick="clearFileBox('file01');" />
	</form>
</body>
</html>

I cannot guarantee the naming scheme of the file boxes submitted to the server - so you will need to confirm this.

Hope this helps,
Dan

adam0101 · Nov 29, 2004

I've done this before using slightly different code. It may not be as cross-browser friendly as Dan's example, but it's handy if you've made some run-time style changes to the box and you want to keep those changes.

Code:

<html>
<head>
    <script type="text/javascript">
    <!--
    function clearFileBox(whichBox) {
      var myFile=document.getElementById(whichBox);
      myFile.outerHTML=myFile.outerHTML;
    }
    //-->
    </script>
</head>
<body>
    <form>
        <input type="file" name="file01" />
        <input type="button" value="'Clear' File Input" onclick="clearFileBox('file01');" />
    </form>
</body>
</html>

Adam
while(ignorance){perpetuate(violence,fear,hatred);life=life-1};

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Calling all Javascript gurus

surzycki

IS-IT--Management

tgreer

Programmer

BillyRayPreachersSon

Programmer

adam0101

Programmer

Similar threads

Part and Inventory Search

Sponsor