Hey guys, I am having trouble with what seems to be fairly easy. Let me tell you what I'm trying to do, and then I will paste in my commented code.
I am trying to:
- Connect to MySQL
- Insert an incrementing value (the id)
- Temporarily store that value [i used
mysql_insert_id()] - Upload and resize an image using the class.upload.php and give it the name using the last inserted id
- Show the uploaded file, and allow user to jcrop it into a thumbnail
This is where all hell breaks loose.
- Store the thumbnail also giving it the name using the last inserted id
What I think actually happens is:
The INSERT query repeats for every step (upload, jcrop, and thumbnail display) and so it inserts 3 values. So what happens is it gives the [initially] uploaded image name of 3, but looks for image 4 to create the thumbnail from, then the page that shows the error (which is supposed to show me the thumbnail) inserts another row into MySQL. After all that happens, the next time I want to upload an image, it gives the initial upload id of 6.
I have been going crazy, trying to use different methods of inserting the row, but it seems the filename doesn't get passed through to each of the steps using any other method. I have tried using:
include_once method to insert the row
splitting the process into 2 pages, where t the firstpage inserts a row, then POSTs it using hidden field
- moving the mysql insert into one of the other steps (doesnt pass the last id into any other step)
Here is my code:
<?php
//connect to MySQL
$dbname = "****";
$username = "****";
$password = "****";
$hostname = "localhost";
//connection to the database
$dbhandle = mysql_connect($hostname, $username, $password)
or die("<br/><h1>Unable to connect to MySQL, please contact support at [email protected]</h1>");
//select a database to work with
$selected = mysql_select_db($dbname, $dbhandle)
or die("Could not select database.");
//insert an auto_incrementing value into the 'pictures' table
if (!$result = mysql_query("INSERT INTO `pictures` VALUES ('')"))
echo 'mysql error: '.mysql_error();
$filename = mysql_insert_id();
?>
<?php
//submit coordinates of jcrop preview
if ($_POST['submit_coords'])
{
$targ_w = 180; // desired width of thumbnail
$targ_h = 60; // desired height of thumbnail
$jpeg_quality = 90; // desired jpeg quality
$src = 'f/'.$filename.'.jpg'; // get path to the resized image
// Fetch the uploaded jpeg file
$img_r = imageCreateFromJpeg($src);
//Use these proportions
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
// Get coordinates from jcop, and create thumbnail
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'], $targ_w,$targ_h,$_POST['w'],$_POST['h']);
// save the thumbnail and echo the result
$output_file = 't/'.$filename.'.jpg';
imagejpeg($dst_r, $output_file, $jpeg_quality);
$results = <<<EOT
<img src="t/$filename.jpg"/>
EOT;
echo $results;
die();
}
// upload & resize mig image
if ($_POST['upload_image'] && $_FILES['image_upload'])
{
require_once '../lib/jcrop/class.upload.php';
$ih = new Upload($_FILES['image_upload']);
if ($ih->uploaded) {
//save full size
$ih->file_new_name_body = $filename;
$ih->file_new_name_ext = 'jpg';
$ih->image_resize = true;
$ih->image_x = 860;
$ih->image_ratio_y = true;
$ih->process('f/');
if ($ih->processed) {
$x = $ih->image_dst_x;
$y = $ih->image_dst_y;
echo 'image resized';
$ih->clean();
} else {
echo 'error : ' . $ih->error;
}
}
//if succesful show the thumbnail preview
$output = <<<EOT
<img src="f/$filename.jpg" id="jcrop" />
<br />
<div style="overflow: hidden; width: 180px; height: 60px;">
<img src="f/$filename.jpg" id="preview" />
</div>
EOT;
// Show uploaded image, and allow jcrop
$head = <<<EOT
<link rel="stylesheet" href="../lib/jcrop/jquery.Jcrop.css" type="text/css" />
<script type="text/javascript" src="../lib/jcrop/jquery.min.js"></script>
<script type="text/javascript" src="../lib/jcrop/jquery.Jcrop.min.js"></script>
<script>
$(function(){
function showPreview(coords)
{
var rx = 180 / coords.w;
var ry = 60 / coords.h;
$('#preview').css({
width: Math.round(rx * $x) + 'px',
height: Math.round(ry * $y) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
};
function insertCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
};
$('#jcrop').Jcrop({
onChange: showPreview,
onSelect: insertCoords,
aspectRatio: 3
});
});
</script>
EOT;
}
?>
<html>
<head>
<?php if ($head) echo $head; ?>
</head>
<body>
<?php if (!$head) : ?>
<form action="" method="POST" enctype="multipart/form-data">
<input type="file" name="image_upload" />
<input type="submit" name="upload_image" value="click me" />
</form>
<?php else : ?>
<form action="" method="POST">
<input type="hidden" name="x" id="x" />
<input type="hidden" name="y" id="y" />
<input type="hidden" name="x2" id="x2" />
<input type="hidden" name="y2" id="y2" />
<input type="hidden" name="w" id="w" />
<input type="hidden" name="h" id="h" />
<input type="hidden" name="filename" id="filename" value="<?php echo $filename ?>" />
<input type="submit" name="submit_coords" value="gogo" />
</form>
<?php endif; ?>
<?php if ($output) echo $output; ?>
</body>
</html>
Please, please, if you could help in any way, or at least suggest an alternative solution, I would greatly appreciate it.
Thank you so much in advance.