Cakephp Media Plugin is one of the best PHP file upload platform or plugin that is out on the web right now. Although this plugin is not yet done but we can already use its beta and it works fine, I'm using it for a while now (from 0.6 to 1.3 betas).

Throughout the tutorial I would like to introduce to you the combination of cakephp and jquery for simple yet powerful File upload.

Step 1: Download all the necessary files

1. Download the updated version of CakePHP 1.3 (http://www.cakephp.org)
2. Download David Persson’s  Cakephp Media Plugin (https://github.com/davidpersson/media)
3. Download my jQuery Fileuploader plugin (https://github.com/johnlanz/jquery-fileuploader)

Step 2: Installation

1. Extract cakephp media plugin and move or copy it to cakephp app plugins folder (/path/to/your/app/plugins/media)
2. Extract fileuploader and move the js files (jquery.fileUploader.js and jquery) into cakephp js webroot folder  (/path/to/your/app/webroot/js)
• Move fileUploader.css into ‘/path/to/your/app/webroot/css’
• Move the images close.gif and image_upload.gif into ‘/path/to/your/app/webroot/img’
3. Create a table that stores information about your uploaded files.

 
CREATE TABLE `galleries` (
	`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
	`basename` VARCHAR( 255 ) NOT NULL,
	`dirname` VARCHAR( 255 ) NOT NULL ,
	`created` DATETIME NULL,
	`modified` DATETIME NULL 
) ENGINE = MYISAM;
 

Step 3: Media Plugin Configuration

Edit bootstrap.php located at '/app/config/' and add the following lines

 
require APP . 'plugins' . DS . 'media' . DS . 'config' . DS . 'core.php';
//images sizes
$small = array('fitCrop' => array(75, 50));
$medium = array('fitCrop' => array(220, 140));
$large = array('fitCrop' => array(700, 335));
 
Configure::write('Media.filter', array(
	'audio' =>  array(),
	'document' =>  array(),
	'generic' => array(),
	'image' => compact('small', 'medium', 'large'),
	'video' => compact('medium', 'large')
));
 

Step 4: Create a Model, View, and Controller for the gallery

1. Create gallery.php model

    
   < ?php
   class Gallery extends AppModel {
   	var $name = 'Gallery';
   	//media plugin behaviors
   	var $actsAs = array(
   		'Media.Transfer',
   		'Media.Coupler',
   		'Media.Generator'
   	);
   	//file validation which only allowed jpeg and png to be uploaded
   	var $validate = array(
   		'file' => array(
   			'mimeType' => array(
   				'rule' => array('checkMimeType', false, array( 'image/jpeg', 'image/png'))
   			)
   		)
   	);
   }
   ?>
    

2. Create galleries_controller.php

    
   < ?php
   class GalleriesController extends AppController {
    
   	var $name = 'Galleries';
   	var $components = array('RequestHandler');
    
   	function add() {
   		if (!empty($this->data)) {
   			if ($this->Gallery->save($this->data)) {
   				$result = '<div id="status">success</div>';
   				$result .= '<div id="message">Successfully Uploaded</div>';
   			} else {
   				$result = "<div id='status'>error</div>";
   				$result .= '<div id="message">'. $this->Gallery->validationErrors['file'] .'</div>';
   			}
    
   			$this->RequestHandler->renderAs($this, 'ajax');
   			$this->set('result', $result);
   			$this->render('../elements/ajax');
   		}
   	}
    
   }
   ?>
    

   As you can see I've used request handler component which I assumed that all submitted form data came from ajax.
   
   
3. Create ajax.ctp and put inside '/app/views/elements' folder

    
   < ?php
   	Configure::write('debug', 0);
   	echo $result;
   ?>
    

   It handles views for ajax request.
4. Create folder galleries inside '/app/views'. And create add.ctp file inside galleries folder.

    
   # add.ctp
   < ?php
   	echo $html->script('jquery-1.6.2.min', false);
   	echo $html->script('jquery-ui-1.8.14.custom.min', false);
   	echo $html->script('jquery.fileUploader', false);
   	echo $html->css('ui-lightness/jquery-ui-1.8.14.custom', null, array(), false);
   	echo $html->css('fileUploader', null, array(), false);
   ?>
    
   <div class="galleries form">
   	<h2>< ?php __('jQuery Fileuploder Plugin');?></h2>
   	< ?php
   		echo $this->Form->create('Gallery', array('type' => 'file'));
   		echo $this->Form->input('file', array(
   			'type' => 'file', 
   			'label' => false, 'div' => false,
   			'class' => 'fileUpload', 
   			'multiple' => 'multiple'
   		));		
   		echo $this->Form->button('Upload', array('type' => 'submit', 'id' => 'px-submit'));
   		echo $this->Form->button('Clear', array('type' => 'reset', 'id' => 'px-clear'));
   		echo $form->end();
   	?>
   </div>
    
   < script type="text/javascript">
   	$(function(){
   		$('.fileUpload').fileUploader();
   	});
   < /script>
    

That's it. You can upload videos, documents, images, etc., and cakephp media plugin handles them perfectly.

You can download the whole tutorials here. jQuery Fileuploader and CakePHP Media Plugin