Submitting form fields and upload file in one form

cannondale

I have an html form, which contains several form fields and a filename field (type=file), in a single php script.
Validation of form fields and the $FILES array are done in php.
The php script works fine if there are no form field validation errors.
However, if there are form field errors (empty form field, invalid field format, ...), the php script fails on subsequent submissions because the uploaded file is gone and the $FILES array is empty.

When the form is submitted, the file is uploaded before anything in php is done. If a validation error occurs, the form is redisplayed with the appropriate error messages.
However, the file is NOT uploaded again even though the file name is displayed in the form field.

I do not want to preform form validation in Javascript or JQuery.

Is there a better approach?

sneakyimp

Uploading files presents a security issue. You cannot pre-populate a file input because that might let a malicious programmer show a user a form and then steal c:\my documents\secret-password-file.doc. I'm not 100% certain but I believe that if someone makes a mistake on the form, there are two options
1) User must browse and select the file all over again. This is fairly common, in my experience
2) YOU (the developer) must take care to keep a copy of the file somewhere on the server and keep track of it through multiple form submissions until you are sure success has been achieved. This is not crazy complicated, but there are quite a few considerations to think about.

Bonesnap

There is a third option which is to submit the form via AJAX so the page doesn't have to reload if you get back an error. The main consideration with this is browser compatibility since this uses the FormData class in JavaScript which is only supported in IE10+.

So if browser compatibility is a concern than this option is not viable. I just did this two days ago so it's fresh in my mind.

cannondale

Thanks for the ideas. I think I'll pursue option three and submit the form via AJAX just for the form field edits. If all is good, I'll post the form naturally in php and allow the uploads to occur. I'll post my results back here in order to close the loop and hopefully help someone else.

cannondale

Example solution posted below.

HTML

<html>
<head>
<title>Submit Form Using AJAX and jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="ajaxsubmit4.js"></script>
</head>
<body>
<h2>Submit Form Using AJAX and jQuery</h2><br> 
<form action='ajaxsubmit4.php' method='post' id='f1' accept-charset='utf-8' enctype='multipart/form-data'>
	<label>Name :</label><input id="name" name="name"type="text" value='Cannondale'><br>
	<label>Email :</label><input id="email" name="email" type="text" value='cannondale@yahoo.com'><br>
	<label>Password :</label><input id="password" name="password" type="password" value='123'><br>
	<label>File :</label><input id="file" name="file" type="file"><br><br>
	<label>PHP Validation Errors:</label>
		<div id="php_validation_errors_ajax">
		<!-- ajax text returned here -->
		</div>
	<br><br>

<input id="asubmit" name=asubmit type="button" value="Ajax Submit">
</form>

</body>
</html>

JQuery/Ajax

$(document).ready(function(){

$("#asubmit").click(function(event){
	var form_id = '#f1'; //Form id
    var post_data = $(form_id).serialize(); //All form data (fields) that contain a name attribute. Note: Excludes type=file fields
    var form_url = $(form_id).attr("action"); //Program to execute from form action attribute		

	//AJAX code to submit form
	$.ajax({
		type: "POST",
		url: form_url,
		data : post_data, //Does not included file upload
		cache: false,
		success: function(data){
			$('#php_validation_errors_ajax').html(data); //Any validation error text returned from php
			if($('#php_validation_errors_ajax').text().length === 0){
				$(form_id).submit(); //Natural form post to upload file if no validation errors returned from php
			}
			else{
				return false; //preventDefault and stopPropagation	
			}
		},
		error: function(){
			$('#php_validation_errors_ajax').html('ajax error occured');
		}
	}); //End ajax
}); //End click

}); //End ready

PHP

<?php

$ERRORS_AR = array(); //Array to hold form validation errors	

if(_validate_media_form_fields() === FALSE){
	echo _return_display_form_validation_errors($_GET['title']); //Errors
	exit;
}

if(isset($_FILES['file']['name'])){
	echo("<br>_POST Array<br>");
	print_r($_POST);	
	echo("<br>_FILES Array<br>");
	print_r($_FILES);
	echo("<br> Form Submitted");
}



//Validate form fields. Note: TRUE = error 
function _validate_media_form_fields(){
	Global $ERRORS_AR;

$errors = FALSE;

if(empty($_POST['name'])) {
	$errors = TRUE;
	$ERRORS_AR[] = "1105-Error: Name is required and cannot be blank.";
}	

if(empty($_POST['email'])) {
	$errors = TRUE;
	$ERRORS_AR[] = "1110-Error: Email is required and cannot be blank.";
}	

if(empty($_POST['password'])) {
	$errors = TRUE;
	$ERRORS_AR[] = "1115-Error: Password is required and cannot be blank.";
}	

if(strlen($_POST['password']) <= 4) {
	$errors = TRUE;
	$ERRORS_AR[] = "1120-Error: Password length must be greater than 4 chars.";
}	

if($errors === FALSE) 
	return TRUE; //Errors
else	
	return FALSE; //No Errors


} //_validate_media_form_fields 


function _return_display_form_validation_errors($title){
	Global $ERRORS_AR;

$i_max = count($ERRORS_AR);

$str .= "<br>Oops!  One or more entered fields are invalid. Please review errors below.<br>";

for($i = 0; $i < $i_max; $i++) {
	$str .= "&#9679;&nbsp;" . $ERRORS_AR[$i] . "<br>";
}

return $str;					

}

?>

laserlight

It looks like you did not implement CSRF protection. Was that deliberate or an oversight?

cannondale

Thanks for the feedback. The focus on this solution was to provide a way to validate form fields via php on a form that also included a file field (type=file) for upload. There are lots of additional security considerations missing from the example code in order to avoid getting bogged down in extraneous details not directly related to the problem I was trying to solve.

Zorden

I also suggest using Ajax for this purpose. It'll look much more neat and attractive.