CakePHP: upload and resize images
CakePHP March 17th, 2007I searched on Google for a code example of how to upload and resize an image using CakePHP and I didn't get to much results on this, so I decided to make it on my own way. First of all I created the /foto/ directory in the webroot (app/webroot) and inside it other 2 directories, one for the uploaded image /big/ (this is the big version of the image) and one for the image that will be resized /small/ (this can be the thumbnail), be sure that they have write permissions.
Now create a component called image.php and inside it you will have the code that will handle getting the file extension and resizing the uploaded image (app/controllers/components/image.php):
-
class ImageComponent extends Object
-
{
-
function resize_img($imgname,$size)
-
{
-
//Header("Content-Type: image/jpeg");
-
$img_src = ImageCreateFromjpeg ($imgname);
-
$true_width = imagesx($img_src);
-
$true_height = imagesy($img_src);
-
-
if ($true_width>=$true_height)
-
{
-
$width=$size;
-
$height = ($width/$true_width)*$true_height;
-
}
-
else
-
{
-
// $height=$size;
-
$width=$size;
-
$height = ($width/$true_width)*$true_height;
-
// $width = ($height/$true_height)*$true_width;
-
}
-
$img_des = ImageCreateTrueColor($width,$height);
-
imagecopyresampled ($img_des, $img_src, 0, 0, 0, 0, $width, $height, $true_width, $true_height);
-
return $img_des;
-
}
-
-
function getFileExtension($str) {
-
-
if (!$i) { return ""; }
-
return $ext;
-
}
-
}
Now let's see the view that will show the input type file element and the form (app/views/controller_name/upload.thtml):
At the end comes the last part and the "hardest", when comes to write the controller code (app/controllers/images_controller.php):
-
class ImagesController extends AppController {
-
-
function add(){
-
-
-
$error = 0;
-
$uploaddir1 = "foto/big"; // the /big/ directory
-
$uploaddir2 = "foto/small"; // the /small/ directory with resized images
-
$filetype = $this->Image->getFileExtension($this->data['Image']['name1']['name']);
-
-
if (($filetype != "jpeg") && ($filetype != "jpg"))
-
{
-
// verify the extension
-
$error=1;
-
}
-
else
-
{
-
}
-
if (($imgsize[0]> 800) || ($imgsize[1]> 600)){
-
// verify to see if the image exceds 800 x 600 px
-
$error=1;
-
}
-
if ($error==0){
-
-
// here is generated an unic id for the image name
-
$orderid = $stamp;
-
$id_unic = $orderid;
-
$temp = $id_unic;
-
$temp.= ".";
-
$temp.=$filetype;
-
$newfile = $uploaddir1 . "/$temp";
-
{
-
{
-
print "Error Uploading File1.";
-
}
-
}
-
$newfile2 = $uploaddir2 . "/$temp";
-
-
$picture_location=$newfile;
-
$size=110; // the size for the resized image
-
$img_des= $this->Image->resize_img($picture_location, $size); //here resizing
-
imagejpeg($img_des,$newfile2,80);
-
-
// here you can have some code for example to insert in the database
-
// Image uploaded
-
}
-
}else{
-
// Image not uploaded
-
}
-
}
-
}
This is all.
This script above need to have GD installed on the server.
April 17th, 2007 at 12:19 pm
I`m probably missing something here, but cake complains about a missing image model. Anyway, it`s a good thing someone finally shows how to upload files in cakePHP in detail, so I hope I can get this working.
April 20th, 2007 at 2:28 am
Tim I think is because cake looks automatically for the Image model, but you can specify to a controller that you don’t want to use any model with it. I use for instance:
“var $uses = null;” and works fine.
May 1st, 2007 at 10:34 pm
#
$uploaddir1 = “foto/big”; // the /big/ directory
#
$uploaddir2 = “foto/small”; // the /small/ directory with resized images
Can these upload directories be outside the cake folder ?
i have cake at site.com/cake
and images at site.com/small and site.com/big
will giving /home/accountname/dir work ?
May 2nd, 2007 at 8:14 pm
Yes Varun it can, you have only to specify to the script the full path to the directories and be sure on that directories you have write permissions.
June 9th, 2007 at 2:05 am
Am I missing something or does this code snippet from the Image component produce the save values either way:
if ($true_width>=$true_height)
{
$width=$size;
$height = ($width/$true_width)*$true_height;
}
else
{
// $height=$size;
$width=$size;
$height = ($width/$true_width)*$true_height;
// $width = ($height/$true_height)*$true_width;
}
?
BTW, the getFileExtension function works so the component is being found.
Also, nothing is being returned by the function (line 24 in the component code above).
September 13th, 2007 at 11:37 pm
On line 58 in images_controller.php comment out //here resizing
and as noted about you need to add: var $uses = null;
December 10th, 2007 at 1:50 am
Peterhf: both code snippet produce the same result. If you let it this way the image width will be always less than $size, but the height can me whichever. You have to put it this way to both width and height be max $size pixels
if ( $true_width >= $true_height ){
$width = $size;
$height = ($width / $true_width) * $true_height;
} else {
$height=$size;
// $width = $size;
// $height = ($width / $true_width) * $true_height;
$width = ($height/$true_height)*$true_width;
}
December 21st, 2007 at 9:15 pm
thanks for the code, tried it but its giving me some errors.
you said:
This script above need to have GD installed on the server.
what is GD exactly?
thanks
December 21st, 2007 at 9:24 pm
GD is a library which need to be compiled with php, this library will help you to work and to manipulate images with php functions.
You can find more info about it here http://php.net/gd ; to see if it is installed use the phpinfo() function, which will give you details about the current php version and the libraries installed on the server.
January 26th, 2008 at 1:20 am
[...] Загрузка картинки и изменение размера [...]
February 6th, 2008 at 7:47 pm
Very nice script, thanks. One problem thought, it didn’t function for me until I renamed upload.thtml to add.thtml. And here “Now let’s see the view that will show the input type file element and the form (app/views/controller_name/upload.thtml)” controller_name should be images. Resulting strings: app/views/images/upload.thtml
PS: now it strikes me! I should have used http://localhost/cake/images/upload/
February 7th, 2008 at 11:22 pm
I have managed to make this script to work with multiple file uploads javascript from http://the-stickman.com. and posted a comment here but some of my code got stripped in the proccess so here is an archive with files and readme. Download files from: http://www.doingtheartwork.com/multiple-file-upload-with-cakephp.zip
unzip and read readme.txt.
Bogdan: You can approve only this comment, would be less confusig for people.
February 7th, 2008 at 11:48 pm
Hi mishu, thanks for the comments, glad if the script above helped you in any way, as I get some time I will code a better way for uploading files with cakephp, this code is one year old and I have shamefully to admid that I haven’t used cakephp for that long being caught with other projects developed in other frameworks. Soon I will start some bigger projects in cake so I will have stuff to write then.
February 8th, 2008 at 6:22 am
function getFileExtension($str) {
return strrchr($str, ‘.’);
}
September 14th, 2009 at 4:53 am
Thank you very much for that imformative entry.
October 12th, 2009 at 5:11 am
Just wanted to drop you a line to say, I enjoy reading your site. I thought about starting a blog myself but don’t have the time.
Oh well maybe one day….
October 29th, 2009 at 7:27 pm
thank you for this great post!.Couple of changes that makes it working.
1. changing the controller name to add (already mentioned) and view would be add.ctx in my case.
2.in cakephp version 1.2 we have to change the upload command
?php echo $form->file(’Image.name1′, array(’size’ => ‘40′))?>
in view.
Image/name1 is not working in cake 1.2
and that it!