Clear value in Input Type = File

Hello

I have a form that has many input types on it such as a text box, select box, etc but it also contains the input type file. The form allows multiple files to be uploaded so after the user selects a file using the browse button, they then need to click an attach file button. On click of the attached file button, I wanted to clear the contents of the input type file text box.

I have tried multiple ways to complete this. I tried setting the value = “” but this did not work which lead me to doing some research which said this was not possible. It then indicated to use a reset button but the problem is that I do not want the whole form to be reset, just the value in the 1 input type = file text box.

My question is, how have other people handled this situation? Is there a way to clear the value of just the input type = file text box?

Below is code that I got to work but it does not work in Netscape.


<html>

<head>

<script language="JavaScript">

function ClearFile()
{
   alert(document.testForm.input.value);

   document.testForm.input.outerHTML = '<input type="file" size=50 name="input" value="">';
}

</script>

</head>

<body>

<form name="testForm">

<select name="list">
   <option value="Test">test</option>
   <option value="Test1">test1</option>
</select>

<input type="File" name="input" size="30">

<input type="Button" name="cmdClear" onClick="ClearFile()" value="Clear">

<input type="reset" value="clear">

</form>

</body>

</html>

Any suggestions would be appreciated.

Thanks

<html>

<head>

<script language="JavaScript">

function ClearFile(objid){
 var ip=document.testForm[objid];
 var ipn=ip.cloneNode(false);
 ip.parentNode.insertBefore(ipn,ip);
 ip.parentNode.removeChild(ip);
}

</script>

</head>

<body>

<form name="testForm">

<select name="list">
   <option value="Test">test</option>
   <option value="Test1">test1</option>
</select>

<input type="File" name="input" size="30">

<input type="Button" name="cmdClear" onClick="ClearFile('input')" value="Clear">

<input type="reset" value="clear">

</form>

</body>

</html>

Thank you very much for the post and the code but I was not able to get it to work in Netscape. If you have any other ideas, it would be appreciated.

Also, I am having a tough time in figuring out what JavaScript code can work in IE and what can work in Netscape. Is there a good site that highlights the differences and gives ideas on what code should be used? Or is this a situation where JavaScript should be doing a lot of browser detection and writing code for specific browsers.

<html>

<head>

<script language="JavaScript">

function ClearFile(objid){
 var ip=document.testForm[objid];
 var ipn=document.createElement('INPUT');
 ipn.type=ip.type;
 ipn.size=ip.size;
 ipn.name=ip.name;

 ip.parentNode.insertBefore(ipn,ip);
 ip.parentNode.removeChild(ip);
}

</script>

</head>

<body>

<form name="testForm">

<select name="list">
   <option value="Test">test</option>
   <option value="Test1">test1</option>
</select>

<input  type="File" name="input" size="30">

<input type="Button" name="cmdClear" onClick="ClearFile('input')" value="Clear">

<input type="reset" value="clear">

</form>

</body>

</html>

IT is very difficult to play around with file inputs. Because all browsers a long time ago agreed not to let anyone mess with that field, for security reasons.

Thank you very much! The code worked both in Netscape and in IE 6.0. There was one issue I found in IE 6.0. If I clicked on Clear without the INPUT TYPE text box containing a value, IE 6.0 had a JavaScript error. I think I could get around that by just checking to make sure a value is populated before that code runs. I will post some code when I get it working but thank you again for your help!!!