CakePHP Image upload behavior

CakePHP Image upload behavior

• Image uploading in webdevelopment  is a very common task, To handle it in Controller is bad habit, because for that we have to write lot of code for creating thumbnails,medium size image, big size image etc .

• There in  cakephp a Image Behavior is already available for image uploading, which is able to upload images automatically. 

• Before you start reading Image Behavior , make sure you have codding  knowledge of CakePHP. 

• In this Image Behavior blog,  I will introduce you Image model Behavior ,how to use it for creating different size images in CakePHP at uploading time by writing just one array code in Model—

Image upload behavior

• Image Behavior is able to upload image automatically.
• A simple & special explaination of Image behavior. It will upload Image in afterSave() callback, in the  "app/webroot/img/" folder.

Special notes before go to Image behavior:

1. It uses file name original  filename .if original file already exists than it uses another name.
2. It stores file in directory: "app/webroot/img/" + given folder name+/+Image name

Preparation :

• Download latest cakephp & create a database
• Download image behaviour(ImageBehavior.php) if it not in you cakephp setup Put image behavout in  “app/model/ Behavior/” 

How to use cakephp image behavoir

1.Create table users

 CREATE TABLE `users` (  
      `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,  
      `email` VARCHAR( 250 ) NOT NULL  
      `file` VARCHAR( 250 ) NOT NULL  
 )  

2.Don’t forget to put ImageBehavour in “app/model/ Behavior/”

3.Create a model for users table in  “app/model” with name User.php

 User.php  
 <?php   
 class User extends AppModel {  
  var $actsAs = array('Containable',  
           'Image' => array(  
                'settings' => array(  
                     'titleField' => 'username',  
                     'fileField' => 'file',   
                     'filedata' =>'filedata',  
                     'defaultFile' => ''),  
                'photos' => array(  
                     'big' => array(  
                          'destination' => 'users',  
                          'size' => 'original',  
                          'type' => 'crop',  
                          'quality' => 100),  
                     'medium' => array(  
                          'destination' => 'users/medium',  
                          'size' => array('width' => 100, 'height' => 90),  
                          'type' => 'resizecrop',  
                          'quality' => 100),  
                     'small' => array(  
                          'destination' => 'users/small',  
                          'size' => array('width' => 52, 'height' => 52),  
                          'type' => 'resizecrop',  
                          'quality' => 100)  
                )  
           )  
 }  
 ?>   

Note: if we will not provide filedata,filename, it will try automatically to detect data[User][filedata] in view & filename field in database..

4.Create controller with name 

 UsersController.php  
 <?php  
 class UsersController extends AppController {  
 function beforeFilter() {  
            parent::beforeFilter();  
           $this->Auth->allow('add');   
 }  
 function add() {  
      if(!empty($this->request->data)) {  
           $this->User->sava($this->request->data); //It will automatically save image with thumbnails & big image..  
      }  
 }  
 ?>  

5.Create View file in add.ctp

 app/view/users/ add.ctp  
 <?php   
      echo $this->Form->create('User',array(‘type’=>’file’,'url' => array('controller'=>'users', 'action'=>’add’)));?>  
      echo $this->Form->input('email',array('type' => 'input'));  
      echo $this->Form->input('filedata',array('type' => 'file',’multiple’=>false))  
      echo $this->Form->input('Submit',array('type' => 'submit'))  
      echo $this->Form->end();  
 ?>  

6.Create Folder for Image save-

 App/webroot/users/medium  
 App/webroot/users/small  

7.Now you can run this small application by  this url

localhost/appname/users/add (assuming you are running application on localhost)

Please don’t forgot to comment you views & errors…It will be helpful to improve this blog..