How to save image to directory with random file name?

[bausman480]

Hi,

 

I'm looking for a way to rename an uploaded image file name in order to save it in a directory. I don't want any overwritten images due to duplicate file names.. adding a rand(); function to the file name breaks my code for some reason, making the upload image form refresh but not show the uploaded image.

 

The code is from www.webmotionuk.com, but I'm modifying it to suit my needs.

 

Here is the line of code where I set the image name:

 

$large_image_name = $_SESSION['large_image_name'] = "largeimage.jpg"; 		
$thumb_image_name = $_SESSION['thumb_image_name'] = rand()."thumbnail_pic.jpg"; 

 

I am using the rand() function for the thumbnail image (which gets handled very similarly), and it works perfectly. for the large image, it doesn't work though. Here is all the rest of my code:

 

THANK YOU!!!

 

<?php
session_start();

$_SESSION['option'] = $_POST['option'];
$upload_dir = "upload_pic"; 				// The directory for the images to be saved in
$upload_path = $upload_dir."/";				// The path to where the image will be saved
$large_image_name = $_SESSION['large_image_name'] = "largeimage.jpg"; 		// New name of the large image
$thumb_image_name = $_SESSION['thumb_image_name'] = rand()."thumbnail_pic.jpg"; 	// New name of the thumbnail image
$max_file = "4594304"; 						// Approx 4MB
$max_width = "700";							// Max width allowed for the large image
$thumb_width = $_SESSION['width'];						// Width of thumbnail image
$thumb_height = $_SESSION['height'];						// Height of thumbnail image

$_SESSION['width'] = 200;
$_SESSION['height'] = 280;

}

//Image functions
//You do not need to alter these functions
function resizeImage($image,$width,$height,$scale) {
$newImageWidth = ceil($width * $scale);
$newImageHeight = ceil($height * $scale);
$newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
$source = imagecreatefromjpeg($image);
imagecopyresampled($newImage,$source,0,0,0,0,$newImageWidth,$newImageHeight,$width,$height);
imagejpeg($newImage,$image,90);
chmod($image, 0777);
return $image;
}
//You do not need to alter these functions
function resizeThumbnailImage($thumb_image_name, $image, $width, $height, $start_width, $start_height, $scale){
$newImageWidth = ceil($width * $scale);
$newImageHeight = ceil($height * $scale);
$newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
$source = imagecreatefromjpeg($image);
imagecopyresampled($newImage,$source,0,0,$start_width,$start_height,$newImageWidth,$newImageHeight,$width,$height);
imagejpeg($newImage,$thumb_image_name,90);
chmod($thumb_image_name, 0777);
return $thumb_image_name;
}
//You do not need to alter these functions
function getHeight($image) {
$sizes = getimagesize($image);
$height = $sizes[1];
return $height;
}
//You do not need to alter these functions
function getWidth($image) {
$sizes = getimagesize($image);
$width = $sizes[0];
return $width;
}

//Image Locations
$large_image_location = $upload_path.$large_image_name;
$thumb_image_location = $upload_path.$thumb_image_name;

//Create the upload directory with the right permissions if it doesn't exist
if(!is_dir($upload_dir)){
mkdir($upload_dir, 0777);
chmod($upload_dir, 0777);
}


//Check to see if any images with the same names already exist
if (file_exists($large_image_location)){
if(file_exists($thumb_image_location)){
	$thumb_photo_exists = $_SESSION['thumb_photo_exists'] = "<img src=\"".$large_image_location."\" alt=\"Thumbnail Image\"/>";
}else{
	$thumb_photo_exists = "";
}
   	$large_photo_exists = $_SESSION['large_photo_exists'] = "<img src=\"".$large_image_location."\" alt=\"Large Image\"/>";
} else {
   	$large_photo_exists = "";
$thumb_photo_exists = "";
}

if (isset($_POST["upload"])) { 
//Get the file information
$userfile_name = $_FILES['image']['name'];
$userfile_tmp = $_FILES['image']['tmp_name'];
$userfile_size = $_FILES['image']['size'];
$filename = basename($_FILES['image']['name']);
$file_ext = substr($filename, strrpos($filename, '.') + 1);

//Only process if the file is a JPG and below the allowed limit
if((!empty($_FILES["image"])) && ($_FILES['image']['error'] == 0)) {
	if (($file_ext!="jpg") && ($userfile_size > $max_file)) {
		$error= "ONLY jpeg images under 4MB are accepted for upload";
	}
}else{
	$error= "Select a jpeg image for upload";
}
//Everything is ok, so we can upload the image.
if (strlen($error)==0){

	if (isset($_FILES['image']['name'])){

		move_uploaded_file($userfile_tmp, $large_image_location);
		chmod($large_image_location, 0777);

		$width = getWidth($large_image_location);
		$height = getHeight($large_image_location);
		//Scale the image if it is greater than the width set above
		if ($width > $max_width){
			$scale = $max_width/$width;
			$uploaded = resizeImage($large_image_location,$width,$height,$scale);
		}else{
			$scale = 1;
			$uploaded = resizeImage($large_image_location,$width,$height,$scale);
		}

		//Delete the thumbnail file so the user can create a new one
		if (file_exists($thumb_image_location)) {
			unlink($thumb_image_location);
		} 
	} else {
		echo "there's been an error with upload";
	}
	//Refresh the page to show the new uploaded image
	header("location:".$_SERVER["PHP_SELF"]);
	exit();
}
} 

if (isset($_POST["upload_thumbnail"]) && strlen($large_photo_exists)>0) {
//Get the new coordinates to crop the image.
$x1 = $_SESSION['x1'] = $_POST["x1"];
$y1 = $_SESSION['y1'] = $_POST["y1"];
$x2 = $_SESSION['x2'] = $_POST["x2"];
$y2 = $_SESSION['y2'] = $_POST["y2"];
$w = $_SESSION['w'] = $_POST["w"];
$h = $_SESSION['h'] = $_POST["h"];
//Scale the image to the thumb_width set above
$scale = $thumb_width/$w;
$cropped = resizeThumbnailImage($thumb_image_location, $large_image_location,$w,$h,$x1,$y1,$scale);
//Reload the page again to view the thumbnail

include "constants.php";
		// prepare the image for insertion
                    $imgData =addslashes (file_get_contents($cropped));

                    // put the image in the db...
                    // select the db
                    mysql_select_db ($db) OR DIE ("Unable to select db".mysql_error());

                    // our sql query
                    $sql = "INSERT INTO test_image
                    (name)
                    VALUES
                    ('{$cropped}');";

                    // insert the image
                    mysql_query($sql) or die("Error in Query: " . mysql_error());
				$_SESSION['id']=mysql_insert_id();

if (file_exists($large_image_location)) {
	unlink($large_image_location);
}



if (file_exists($thumb_image_location)) {		
	//unlink($thumb_image_location);
}
                    
header("location:".$_SERVER["PHP_SELF"]);
exit();
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Upload & Crop</title>
<script type="text/javascript" src="js/jquery-pack.js"></script>
<script type="text/javascript" src="js/jquery.imgareaselect-0.3.min.js"></script>
</head>
<body>
<?php
session_start();
//Only display the javacript if an image has been uploaded
if(strlen($large_photo_exists)>0){
$current_large_image_width = getWidth($large_image_location);
$current_large_image_height = getHeight($large_image_location);?>
<script type="text/javascript">
function preview(img, selection) { 
var scaleX = <?php echo $thumb_width;?> / selection.width; 
var scaleY = <?php echo $thumb_height;?> / selection.height; 

$('#thumbnail + div > img').css({ 
	width: Math.round(scaleX * <?php echo $current_large_image_width;?>) + 'px', 
	height: Math.round(scaleY * <?php echo $current_large_image_height;?>) + 'px',
	marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
	marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);

} 

$(document).ready(function () { 
$('#save_thumb').click(function() {
	var x1 = $('#x1').val();
	var y1 = $('#y1').val();
	var x2 = $('#x2').val();
	var y2 = $('#y2').val();
	var w = $('#w').val();
	var h = $('#h').val();
	if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
		alert("You must make a selection first");
		return false;
	}else{
		return true;
	}
});
}); 

$(window).load(function () { 
$('#thumbnail').imgAreaSelect({ aspectRatio: <?php echo $thumb_width;?> + ':' + <?php echo $thumb_height;?>, onSelectChange: preview }); 
});

</script>
<?php }?>
<h1>Photo Upload and Crop</h1>
<?php
session_start();
include "constants.php";
// select the db
mysql_select_db ($db) OR DIE ("Unable to select db".mysql_error());
//sql query
$sql = mysql_query("SELECT name FROM test_image WHERE id='$_SESSION[id]'");
//Display error message if there are any
if(strlen($error)>0){
echo "<ul><li><strong>Error!</strong></li><li>".$error."</li></ul>";
}
if(isset($_SESSION['id'])){
$_SESSION['pathname']=mysql_result($sql,0,"name");
echo "<img src=".$_SESSION['pathname'].">";
echo "  <form method='post' action='number.php' enctype='multipart/form-data'>";
echo "Option: <select name='number' size='1'>";
echo "<option value='2'>2 photos</option>";
echo "<option value='4'>4 photos</option>";
echo "</select>";
echo "<input type='hidden' name='session_name'>";
echo "<input type='submit' value='Submit'>";
echo "<br><a href=/form1.php>Go back</a>";
unset ($_SESSION['id'], $id);
}else{
	if(strlen($large_photo_exists)>0){?>
	<h2>Create Thumbnail</h2>
	<div align="center">
		<img src="<?php echo $large_image_location;?>" style="float: left; margin-right: 10px;" id="thumbnail" alt="Create Thumbnail" />
		<div style="float:left; position:relative; overflow:hidden; width:<?php echo $thumb_width;?>px; height:<?php echo $thumb_height;?>px;">
			<img src="<?php echo $large_image_location;?>" style="position: relative;" alt="Thumbnail Preview" />
		</div>
		<br style="clear:both;"/>
		<form name="thumbnail" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
			<input type="hidden" name="x1" value="" id="x1" />
			<input type="hidden" name="y1" value="" id="y1" />
			<input type="hidden" name="x2" value="" id="x2" />
			<input type="hidden" name="y2" value="" id="y2" />
			<input type="hidden" name="w" value="" id="w" />
			<input type="hidden" name="h" value="" id="h" />
			<input type="submit" name="upload_thumbnail" value="Save Thumbnail" id="save_thumb" />
		</form>
	</div>
<hr />
<?php 	} ?>
<h2>Upload Photo</h2>
<form name="photo" enctype="multipart/form-data" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
Photo <input type="file" name="image" size="30" /> <input type="hidden" name="MAX_FILE_SIZE" value="40000000"> <input type="submit" name="upload" value="Upload" />
</form>
<?php } ?>
</body>
</html>

[floridaflatlander]

I think you just change $image in imagejpeg($newImage,$image,90); and for the thumb one too. I use time and for thumbs I use thbtime.

[bausman480]

Hmm, I tried a few variations, and this does nothing. The program still works, but it uploads the image with the file name "largeimage.jpg", as opposed to anything having to do with "time" or "rand".

 

imagejpeg($newImage,rand(),90);

 

This does nothing... I wish I could somehow save the large image in a session, use it for my program, and destroy it after. Any ideas?

[mrMarcus]

Do you name every picture "largeimage.jpg" and "thumbnail_pic.jpg"?  You could just do something like:

 

$image = md5($_FILES['image']['name']) .'_'. time(); // will generate something like 29c0eb0d71eee700df2bb4675c6d8938_1337968092

 

Of course you have to reattach the extension to the filename.

 

There is still a chance that rand() creates a duplicate over time, so I would suggest against it.

[bausman480]

Hi MrMarcus,

 

Thanks for the quick response. However, that still doesn't work... I mean, it uploads the file perfectly, saves it in my directory, but refuses to display the image upon resending headers. This is what that part of the code looks like now:

 

The issue leaves where there are no "variable" parts in the uploaded image name, but I can't afford to do that... So I'm guessing the issue comes from how my code is handling the variable $lil, seen below.

 

if (isset($_POST["upload"])) {
//Get the file information
$image = md5($_FILES['image']['name']) .'_'. time();
$userfile_tmp = $_FILES['image']['tmp_name'];
$userfile_size = $_FILES['image']['size'];
$filename = basename($_FILES['image']['name']);
$file_ext = substr($filename, strrpos($filename, '.') + 1);

//Only process if the file is a JPG and below the allowed limit
if((!empty($_FILES["image"])) && ($_FILES['image']['error'] == 0)) {
	if (($file_ext!="jpg") && ($userfile_size > $max_file)) {
		$error= "ONLY jpeg images under 1MB are accepted for upload";
	}
}else{
	$error= "Select a jpeg image for upload";
}
//Everything is ok, so we can upload the image.
if (strlen($error)==0){

	if (isset($_FILES['image']['name'])){

		$_SESSION['lil'] = $lil = $upload_path.$image.".".$file_ext;
		move_uploaded_file($userfile_tmp, $lil);
		chmod($lil, 0777);

		$width = getWidth($lil);
		$height = getHeight($lil);
		//Scale the image if it is greater than the width set above
		if ($width > $max_width){
			$scale = $max_width/$width;
			$uploaded = resizeImage($lil,$width,$height,$scale);
		}else{
			$scale = 1;
			$uploaded = resizeImage($lil,$width,$height,$scale);
		}

		//Delete the thumbnail file so the user can create a new one
		if (file_exists($thumb_image_location)) {
			unlink($thumb_image_location);
		} 
	} else {
		echo "there's been an error with upload";
	}
	//Refresh the page to show the new uploaded image
	header("location:".$_SERVER["PHP_SELF"]);
	exit();
}
} 

 

The code for the display of images is now as follows:

 

<?php
session_start();

include "constants.php";
// select the db
mysql_select_db ($db) OR DIE ("Unable to select db".mysql_error());
//sql query
$sql = mysql_query("SELECT name FROM test_image WHERE id='$_SESSION[id]'");
//Display error message if there are any
if(strlen($error)>0){
echo "<ul><li><strong>Error!</strong></li><li>".$error."</li></ul>";
}
if(isset($_SESSION['id'])){
$_SESSION['pathname']=mysql_result($sql,0,"name");
echo "<img src=".$_SESSION['pathname'].">";
echo "  <form method='post' action='number.php' enctype='multipart/form-data'>";
echo "Option: <select name='number' size='1'>";
echo "<option value='2'>2 photos</option>";
echo "<option value='4'>4 photos</option>";
echo "</select>";
echo "<input type='submit' value='Submit'>";
echo "<br><a href=/form1.php>Go back</a>";
unset ($_SESSION['id'], $id);
}else{
	if(strlen($large_photo_exists)>0){?>
	<h2>Create Thumbnail</h2>
	<div align="center">
		<img src="<?php echo $lil;?>" style="float: left; margin-right: 10px;" id="thumbnail" alt="Create Thumbnail" />
		<div style="float:left; position:relative; overflow:hidden; width:<?php echo $thumb_width;?>px; height:<?php echo $thumb_height;?>px;">
			<img src="<?php echo $lil;?>" style="position: relative;" alt="Thumbnail Preview" />
		</div>
		<br style="clear:both;"/>
		<form name="thumbnail" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
			<input type="hidden" name="x1" value="" id="x1" />
			<input type="hidden" name="y1" value="" id="y1" />
			<input type="hidden" name="x2" value="" id="x2" />
			<input type="hidden" name="y2" value="" id="y2" />
			<input type="hidden" name="w" value="" id="w" />
			<input type="hidden" name="h" value="" id="h" />
			<input type="submit" name="upload_thumbnail" value="Save Thumbnail" id="save_thumb" />
		</form>
	</div>
<hr />
<?php 	} ?>
<h2>Upload Photo</h2>
<form name="photo" enctype="multipart/form-data" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
Photo <input type="file" name="image" size="30" /> <input type="hidden" name="MAX_FILE_SIZE" value="40000000"> <input type="submit" name="upload" value="Upload" />
</form>
<?php } ?>
</body>
</html>