Okay so here's the scenario:
User is presented with form that contains file inputs. User submits form. Form does not pass validation/verification for one reason or another. User is presented form with errors highlighted. File inputs are now blank.
Question:
Is it possible to re-populate the file inputs with the paths to the files the user originally selected. A PHP solution would be ideal, but I'm also open to JavaScript solutions as well.
Check out this answer for making file uploads with AJAX. It is possible, but not compatible in all browsers.
jQuery Upload Progress and AJAX file upload
--
Alternatively, if you want on the fly uploads, there is a cool library you can get called 'Uploadify'. It's a flash/jquery (or HTML5 now) rig that allows you to upload files on the fly. In the flash version, last time I used it... you can add in callback functions to make it do essentially anything you want.
Some clever javascript could make this work for you.
http://www.uploadify.com/
Here is a example of what Michael is talking about. http://www.phpletter.com/Our-Projects/AjaxFileUpload/
can you try $.post instead of $.ajax
$.post(url, {argument_name: value, ...} , function(data){
// callback function..
}, 'json'}
My advise would be to use the jQuery.form plugin, which turns your form into a Ajax form with very little work and code. It would make your code so much simpeler.
Download the .js file from jQuery Form Plugin, and just add this line to your code:
<script src="jquery.form.3.10.js"></script>
Remove everything except your form (but add an 'id' and an 'action' argument to it), and then add:
<script type="text/javascript">
$(document).ready(function() {
$('#yourform').ajaxForm({
beforeSubmit: checkForm,
type: 'post',
dataType: 'json',
cache: false,
beforeSend: function() {
$("#formstatus").addClass( "ui-autocomplete-loading" );
},
success: function(data, status, xhr, myForm) {
if ( data.usersfound !== undefined ) {
$('#output').html( 'ok' );
// ### todo: do something with data
}
if ( data.erroruser !== undefined ) {
$('#output').html( 'error: ' + data.erroruser.msg );
// ### your code returned an error
}
},
error: function(xhr ,status ,error ) {
$('#output').html( xhr.responseText );
// ### status != 200
},
complete: function() {
$("#formstatus").removeClass("ui-autocomplete-loading");
}
});
});
function checkForm() {
// ### todo: check the input of the form; return(false) if something is wrong, else return(true)
}
</script>
Notes:
- ui-autocomplete-loading is a class from jQuery UI which shows a 'doing-some-loading' animation. This is off course optional
- the result of saving your data should return json data. This could be (usersfound:[{"id":"1", "name":"john"}]) or (erroruser:{"msg":"bla"})
More examples can be found on the jQuery Form Plugin page!
I think the short answer here is no. You can't repopulate file upload fields. However, you can work around it.
If a file has been selected and the form submitted, then you've already received the file. What you can do is keep a reference to the file on disk and put that in a hidden field and show a message to indicate to the user you still have their file uploaded so it does not need to be replaced/re-uploaded. When your form gets submitted again without a file, you can check for the hidden field value and use that to get your local copy of the file they uploaded in their last attempt.
The other way to do this is to either submit the form via ajax (using either flash or the iframe method for the file upload) or to do an ajax call to validate the form first, and then only submit as normal if valid (thus no form reload, no loss of file upload field data).