Validation in image upload

Greetings!! I have my code here that supposed to be validate my image upload.


$uploaddir = './images/';
$file = $uploaddir ."user_".basename($_FILES['uploadfile']['name']);
$file_name= "user_".$_FILES['uploadfile']['name'];


if (!empty($fname) && !empty($lname) && !empty($id) && ($file>0))
	{
		if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file))
			{ 	echo "success";
			
			echo 'user successfully added!';
			echo $fname.'<br/>';
			echo $lname.'<br/>';
			echo $id.'<br/>';
			
			} 	else
		{   echo "error"; }
			
		
		}
	else
	{
	echo 'Please fill in the required fields.';
	}
	

I want to check if the image is uploaded together with other input box is filled, else I will prompt an error message. But why is that when I try to put image and fill the text box I still receive the required fields. Any help would be appreciated. T

Where is $fname, $lname and $id been set as they would be the first thing to look at.

As Chris says, check those values first.

Here I spoofed them to check your logic is correct:


$fname = 1;
$lname = 2;
$id = 3;
$file = 4;
$move_uploaded_file = 1;

if (!empty($fname) && !empty($lname) && !empty($id) && ($file>0)) {
		if ($move_uploaded_file) {
 	       echo "success! "; 
			
		echo 'user successfully added! <br />';
		echo $fname.'<br/>';
		echo $lname.'<br/>';
		echo $id.'<br/>';
		} 	else  {  
                echo "error"; 
               }
}  else {
echo 'Please fill in the required fields.';
}

// gives

success! user successfully added!
1
2
3


sorry for that, here is my entire code


if(isset($_POST['fname']) && isset($_POST['lname']) ){

$fname = $_POST['fname'];
$lname = $_POST['lname'];
$program = $_POST['program'];
$id = $_POST['stud_id'];
$gender = $_POST['gender'];

//upload photo
$uploaddir = './images/';
$file = $uploaddir ."studentuser_".basename($_FILES['uploadfile']['name']);
$file_name= "studentuser_".$_FILES['uploadfile']['name'];



	if (!empty($fname) && !empty($lname) && !empty($id) && ($file>0))
	{
		if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file))
			{ 	echo "success";
			
			echo 'user successfully added!';
			echo $fname.'<br/>';
			echo $lname.'<br/>';
			echo $gender.'<br/>';
			echo $program.'<br/>';
			echo $id.'<br/>';
			echo $file_name;
			
			} 	else
		{   echo "error"; }
			
		
		}
	else
	{
	echo 'Please fill in the required fields.';
	}
	
	

}

Why not just check what variables contain, if anything:



//upload photo
$uploaddir = './images/'; 
$file = $uploaddir ."studentuser_".basename($_FILES['uploadfile']['name']); 
$file_name= "studentuser_".$_FILES['uploadfile']['name']; 

			echo $fname.'<br/>';
			echo $lname.'<br/>';
			echo $gender.'<br/>';
			echo $program.'<br/>';
			echo $id.'<br/>';
			echo $file.'<br/>';
			echo $file_name.'<br/>';

// continue your conditional check


I think I’m lost now, I tried your suggestion but it has no result, it only display the text input and this thing ‘./images/user_
user_’

I included my script just in case


<script>
$(function(){
		var btnUpload=$('#me');
		var mestatus=$('#mestatus');
		var files=$('#files');
		new AjaxUpload(btnUpload, {
			action: 'uploadPhoto.php',
			name: 'uploadfile',
			onSubmit: function(file, ext){
				 if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
                    // extension is not allowed
					mestatus.text('Only JPG, PNG or GIF files are allowed');
					return false;
				}
				mestatus.html('<img src="ajax-loader.gif" height="16" width="16">');
			},
			onComplete: function(file, response){
				//On completion clear the status
				mestatus.text('Photo Uploaded Sucessfully!');
				//On completion clear the status
				files.html('');
				//Add uploaded file to list
				if(response==="success"){
					$('<li></li>').appendTo('#files').html('<img src="images/user_'+file+'" alt="" height="120" width="130" /><br />').addClass('success');
				} else{
					$('<li></li>').appendTo('#files').text(file).addClass('error');
				}
			}
		});
		
	});
	</script>

</head>
<body>
	
		<fieldset >
		<legend>Add Student</legend>
		<!--image upload-->
		<div id="image">
			<div id="flash"></div>
			<div id="ajaxresult"></div>
    				<div id="files"><li class="success"><img src  ='images/untitled.png'></li></div>
					<div id="me" class="styleall" style=" cursor:pointer;">
						<span style=" cursor:pointer; font-family:Verdana, Geneva, sans-serif; font-size:10px;">
							<span style=" cursor:pointer;">Select image</span>
						</span>
					</div>
					<br/>
					<span id="mestatus" > </span>
		</div>			
		
	
				
				<p><label for="id">ID</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input class = "placeholder" type="text" id="stud_id" name="stud_id" placeholder= "Type here" /></p>
				<p><label for="fname">First Name</label>&nbsp;&nbsp;<input class = "placeholder" type="text" id="fname" name="fname" placeholder= "First Name" /></p>
				<p><label for="lname">Last  Name</label>&nbsp;&nbsp;<input class = "placeholder" type="text" id="lname" name="lname" placeholder="Last name" /></p>
				<p><label for="gender">Gender</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<select name="gender" id= "gender">
				<option value = 'Male' >Male</option>
				<option value = 'female'>Female</option>
				</select></p>
				<p><label for="program">Program</label>&nbsp;&nbsp;&nbsp;&nbsp;
				<select name ="program"  id= "program">
				<option value= 'Day'>Day</option>
				<option value= 'Evening'>Evening</option>
				<option value = 'Weekend'>Weekend</option>
				<option value = 'Sunday'>Sunday</option>
				</select></p>
				
				<p class = "submit_left"><input type="submit" value="Submit" onclick="insert()" /></p>
				

I’m grateful for the quick response, help me out of these…

but I can see already in my image folder the uploaded image, I wonder what’s wrong with this thing.

I just think that perhaps ajax is not promising to use in my form validation since once it is clicked it automatically saved in my image folder, what I want is to check all user input and image before it is submitted. Perhaps, I can use the traditional html input type file.

Try adding these lines at the top of the form handler:


<?php
var_dump($_GET);
var_dump($_POST);
var_dump($_FILES);

// rest of your code



But yes, getting uploading to work with a straight html form first does seem like a good idea :wink: