Blank out a file field

[Monte Chan]

Hi all,
I have the following codes,

<script language="JavaScript">
function check_stuff(field)
{
alert("blank out the field now");
field.value = "";
}
</script>

<form name="test_form">
<input type="File" name="test_upload" size="50">
<input type="Button"
onclick="check_stuff(document.test_form.test_upload)" value="Click Me">
</form>

What I am trying to do is, when the users click the button, it would
blank out the path in the test_upload field. The problem is, the
test_upload field does not get cleared out and it is not giving me an
error either. May I ask how can I clear out the file field?

Thanks in advance,
Monte

 

[RobG]

Hi all,
I have the following codes,

<script language="JavaScript">
function check_stuff(field)
{
alert("blank out the field now");
field.value = "";
}
</script>

<form name="test_form">
<input type="File" name="test_upload" size="50">
<input type="Button"
onclick="check_stuff(document.test_form.test_upload)" value="Click Me">
</form>

What I am trying to do is, when the users click the button, it would
blank out the path in the test_upload field. The problem is, the
test_upload field does not get cleared out and it is not giving me an
error either. May I ask how can I clear out the file field?

Javascript security prevents you from changing the value attribute of a
file input. If you knew (or guessed) the location of a file, you could
simply change the value of the input onsubmit and get the user to send
you any file you liked rather than the one they'd selected.

You can replace the input with a new one, which will have the same
effect as 'blanking' the current one. This is not optimal as you must
copy over the properties of the old input to the new one - if you clone
the node the new one will have the same unalterable file value as the
old one.

Below is a script that creates a new input, changes it's type, matches
the id and name of the old input (if it has them), then replaces the
old with the new. You may want to copy over other attributes too, say
className, style properties, etc.

<form action="">
<input type="file" name="fifo">
<input type="submit" value="Send file"><br>
<input type="button" value="Clear filename" style="width: 10.7em;"
onclick="
var z = this.form.fifo;
var x = document.createElement('input');
x.type = 'file';
if (z.name) x.name = z.name;
if (z.id) x.id = z.id;
this.form.replaceChild(x,z);
">
</form>