Retaining the value in the field when submit button is clicked

Question

I have got a <input type="file" > field along with other text fields in a form, When i try to upload any files using browse button and then click submit button ,the value in the input type= "file" field disappears , I would like the browsed value to remain in the <input type="file" > field if errors are present in other fields , is there any way i can retain the value that is browsed and for it to remain in the <input type="file" > field when submit button is clicked ,

<form action="form.php" method="post" enctype= multipart/form-data> 

<input type="file" value="$file" name="file"/> 
<input type="text" value="$line" name="line"> 
 <input type="submit"  name="btnsubmit"> 

</form> 

if($_POST['btnsubmit']) 
{
$line =$_POST['line'];
$file =$_FILES['file'] ['name'];

if($line) 
{
//do something
//conditions for   file check   here 

}
else 
//error 

}

Possible duplicate of http://stackoverflow.com/questions/967916/how-to-keep-input-type-file-field-value-after-failed-validation-in-asp-net-mvc — Aditya M P, Jul 11 '12 at 06:02

Aditya M P · Answer 1 · 2012-07-11T06:11:52.457

It is not possible to do this. Browser security prevents you from pre-populating the File input field, so that websites cannot steal private files of their will without the user authorizing it first (by clicking "Browse..." and choosing a file).

EDIT: It is not possible to do this natively - but you can attempt some CSS wizardry to display the previously chosen file name maybe beside the file input box to hint the user. If you want to try and be really cool, you can also attempt to overlay the browser's native file input text display area with another div that has the previous file name filled in it. But this will prevent clicking on the input area and so is user unfriendly. Too much work, little reward.

Also the fake overlay/label is deceptive because it would give the impression that clicking submit would actually submit the file listed, but it wont. — SpliFF, Oct 25 '13 at 06:43

score 1 · Answer 2 · answered Jul 11 '12 at 06:05

1

This not allowed to be set by any script for security purpose, implemented by browser vendors as file input as readonly.

answered Jul 11 '12 at 06:05

Raab

34,778
4
50
65

score 1 · Answer 3 · answered Oct 25 '13 at 06:45

There is one way to do this. Submit the form details for validation using an AJAX submission method so the user never really leaves the page or "submits" the form. That way you can validate the result server-side but the user still has all their values populated, including file inputs.

Jørgen · Answer 4 · 2013-10-25T06:41:38.523

As mentioned, input[type=file] is readonly. By validating your input on the client side, you can prevent the submit to happen unless all fields are valid. ...and, in most cases, it provides a much better user experience!

Check out jquery.validation or some other validation plugin for your favourite framework, or write one yourself. Keep in mind that you should also validate on the server side.

By preventing the request, the file input will keep it's value until all fields are OK. If you need server side validation, you could also do this using ajax.

Retaining the value in the field when submit button is clicked

4 Answers4