Jump to content

Image Upload Issues


chome4

Recommended Posts

Got some code from a tutorial that didn't work but managed to get rid of error messages.

Now, when I upload the first image, it display with any text I type. Same with other images - but if I click 'upload image', a blank image space appears. I'd like to know how to stop this 'phantom' uploading along with a message: 'Please select an image'

<?php
	$msg = "";
	if (isset($_POST['upload'])){
		$target = "images/".basename($_FILES['image']['name']);
		
		$db = mysqli_connect("localhost","root","","photos");
		
		$image = $_FILES['image']['name'];
		
		$text = $_POST['text'];
		
		$sql = "INSERT INTO images (image, text) VALUES ('$image', '$text')";
		
		mysqli_query($db, $sql);
		
		if (move_uploaded_file($_FILES['image']['tmp_name'], $target)) {
			$msg = "Image uploaded";
			
		}else{
			$msg = "There was a problem";
		}
		$result = mysqli_query($db, "SELECT * FROM images");
	}
	
	
?>
<!DOCTYPE html>
<html>
<head>
<title>Image Upload</title>
<style type="text/css">
   #content{
   	width: 50%;
   	margin: 20px auto;
   	border: 1px solid #cbcbcb;
   }
   form{
   	width: 50%;
   	margin: 20px auto;
   }
   form div{
   	margin-top: 5px;
   }
   #img_div{
   	width: 80%;
   	padding: 5px;
   	margin: 15px auto;
   	border: 1px solid #cbcbcb;
   }
   #img_div:after{
   	content: "";
   	display: block;
   	clear: both;
   }
   img{
   	float: left;
   	margin: 5px;
   	width: 300px;
   	height: 140px;
   }
</style>
</head>
<body>
	<div id="content">
	  <?php
			$db = mysqli_connect("localhost","root","","photos");
			$sql = "SELECT * FROM images";
			$result = mysqli_query($db, $sql);
			while ($row = mysqli_fetch_array($result)) {
				echo "<div id='img_div'>";
					echo "<img src='images/".$row['image']."' >";
					echo "<p>".$row['text']."</p>";
				echo "</div>";
			}
	  ?>
  
	  <form method="post" action="index.php" enctype="multipart/form-data">
		<input type="hidden" name="size" value="1000000">
			<div>
			  <input type="file" name="image">
			</div>
				<div>
				  <textarea name="text" cols="40" rows="4" placeholder="Say something"></textarea>
				</div>
			<div>
				<input type="submit" name="upload" value="upload Image">
			</div>	
				
		<!--<div>
		<button type="submit" name="upload">POST</button>
		</div>-->
	  </form>
	  
	</div>
</body>
</html>

I called my database 'photos' and the table 'images' with 'id (primary, auto_increment)', 'image' and 'text'.

Thanks in advance.

Link to comment
Share on other sites

the posted code has almost no error handling/validation logic and the error handling it does have is not being used ($msg is not being displayed anywhere in the html document.)

to answer your question of how to test if a 'required' file was uploaded and display a message, your code needs to test for upload errors and then validate the submitted form data, only using the form data if there are no errors and the data passed all the validation tests.

the simplest, general-purpose way of doing this is to use an array to hold user error/validation messages. this array is also an error flag. if the array is empty, there are no errors and you can use the submitted form data. if the array is not empty, there are errors. you can test and display the content of this array in the html document to let the visitor know what problems occurred with the data that they submitted.

here's what your form processing code should do -

  1. detect if a post method form was submitted.
  2. detect if the total size of the form data exceeded the post_max_size setting. if this condition occurs, the web server will abort the form submission, and both the $_POST and $_FILES arrays will be empty. since you expect a non-empty $_FILES array, to keep it simple, you can just test for this (there are actually other reasons the $_FILES array can be empty - an invalid upload form, uploads are not enabled.)
  3. if there is data in the $_FILES array, you would then test if the upload was successful - $_FILES['image']['error'] will be UPLOAD_ERR_OK (0). for the case of not selecting a file in the form, the ['error'] element will be UPLOAD_ERR_NO_FILE (4). your code would add an error message to the array of error messages. if you want to add other validation of the uploaded file, such as file extension, mime type, file size, image size, ... you would perform those tests next.
  4. validate the other input(s), adding any validation error message(s) to the array of error messages. if the textarea input is 'required' you would validate that it is not an empty string.
  5. after all the validation logic, if the array holding the error messages is empty, you would use the submitted form data, adding any new error messages to the array of error messages.
  6. at the end of the post method form processing code, if there are no errors, you should redirect to the exact same URL of the page to cause a get request. this stops the browser from trying to re-submit the previous form data. if you want to display a one-time success message, store it in a session variable, the test, display, and clear that variable in the html document.

some other suggestions for the code -

  1. make only one database connection and use it throughout the rest of the code.
  2. use a prepared query when supplying external, unknown, dynamic data to a query.
  3. switch to the much simpler PDO database extension. this is even more important when using prepared queries since the mysqli prepared query interface is overly complicated and inconsistent.
  4. put the database specific code, that knows how to query for and retrieve the data needed to display the page, before the start of the html document, fetch all the data from the query into an appropriately named php variable, then test/loop over this variable in the html document. if there is no data from the query to display, you should output an appropriate message on the web page.
  5. apply htmlentities() to all dynamic values when you output them on a web page to help prevent cross site scripting.
  6. all database statements that can fail - connection, query, prepare, and execute, ALWAYS need error handling. the simplest way of adding this without adding logic at each statement that can fail is to use exceptions for errors and in most cases let php catch the exception where it will use its error related settings to control what happens with the actual error information (database statement errors will 'automatically' get displayed/logged the same as php errors.)
Edited by mac_gyver
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.