Coco! Multi file Uploader Widget ¶

1. INSTALL
2. 1) GIT Cloning
3. 2) Setup 'config/main'
4. 3) Action Setup
5. 4) Insert and configure the Widget
6. 5) How to receive the uploaded file.
7. 6) When your file is not received, or it always reports: "Failed"
8. 7) Extra Options

by: Christian Salazar. christiansalazarh@gmail.com @yiienespanol, oct. 2012.

Ver la Documentación en Español

http://opensource.org/licenses/bsd-license.php

Requirement: Yii 1.1.11 a lower yii version than 1.1.12 produces an "CJavaScriptExpression" exception, please refer to issues about how to solve it.

Go to Coco Repository at Bit Bucket !

Try my new ajax uploader & user's file manager

1. Single & Multi File Uploads via Ajax-jQuery
2. Drag & Drop.

'Coco' is a widget for yii framework designed to handle File Uploads (Single and Multiple) using Ajax.

Using 'coco' is very simple, at first place you are required to setup a fixed action in any controller, this action serves for all every coco-widgets in your application.

At second place, you must insert the widget in any form. All the uploaded files will be stored in the path provided by widget attribute named: 'uploadDir', so this path must have write permissions for the user holding the www service. Common permissions are 777.

Coco takes its functionality from a very nice PHP library located at valums repository in github, all licences are explicit in coco related to Valums work. This is the same core code used in EAjaxUploader.

Go to the official valums google group.

INSTALL ¶

1) GIT Cloning ¶

	cd /home/blabla/myapp/protected
	mkdir extensions
	cd extensions
	git clone https://christiansalazarh@bitbucket.org/christiansalazarh/coco.git

When you aren't using GIT copy the entire 'coco' folder into your extensions folder

ABOUT DIRECT DOWNLOAD ! ¶

Please download the provided zip, and uncompress it into /protected/extensions/coco.

2) Setup 'config/main' ¶

	'import'=>array(
		'application.models.*',
		'application.components.*',
		'application.extensions.coco.*',			// <------
	),

3) Action Setup ¶

Connect the widget into your current web application using a fixed Action in siteController (or a distinct controller if you prefer). Only one action is required for all coco instances.

By default, using:

myapp/protected/controllers/SiteController.php

public function actions()
	{
		return array(
			'captcha'=>array(
				'class'=>'CCaptchaAction',
				'backColor'=>0xFFFFFF,
			),
			'page'=>array(
				'class'=>'CViewAction',
			),
			'coco'=>array(
				'class'=>'CocoAction',
			),
		);
	}

4) Insert and configure the Widget ¶

<?php
    $this->widget('ext.coco.CocoWidget'
        ,array(
            'id'=>'cocowidget1',
            'onCompleted'=>'function(id,filename,jsoninfo){  }',
            'onCancelled'=>'function(id,filename){ alert("cancelled"); }',
            'onMessage'=>'function(m){ alert(m); }',
            'allowedExtensions'=>array('jpeg','jpg','gif','png'), // server-side mime-type validated
            'sizeLimit'=>2000000, // limit in server-side and in client-side
            'uploadDir' => 'assets/', // coco will @mkdir it
            // this arguments are used to send a notification
            // on a specific class when a new file is uploaded,
            'receptorClassName'=>'application.models.MyModel',
            'methodName'=>'onFileUploaded',
            'userdata'=>$model->primaryKey,
            // controls how many files must be uploaded
            'maxUploads'=>3, // defaults to -1 (unlimited)
            'maxUploadsReachMessage'=>'No more files allowed', // if empty, no message is shown
            // controls how many files the can select (not upload, for uploads see also: maxUploads)
            'multipleFileSelection'=>true, // true or false, defaults: true
        ));
    ?>

5) How to receive the uploaded file. ¶

Coco invokes an specific method in your own class to notify you the uploaded file, this method is referenced by its name (the methodName widget attribute) and a specific class name (the receptorClassName widget attribute).

When a new file arrives from the view into your provided class then the Coco widget invokes this method and pass to it the 'userdata' argument and the full local path of the given uploaded file.

As an example, suppose you have /protected/models/MyModel.php and you need the uploaded file arrives in this class, so the widget config will be:

'receptorClassName'=>'application.models.MyModel',
'methodName'=>'myFileReceptor',
'userdata'=>$model->primaryKey,

Your class and method in MyModel would be:

class MyModel {
	public function myFileReceptor($fullFileName,$userdata) {
		// userdata is the same passed via widget config.
	}
}

6) When your file is not received, or it always reports: "Failed" ¶

1. Check your php.ini for post_max_uploads variable, and please be consistent with 'sizeLimit'=>2000000.

2. Check log for errors. Coco will write an error log when something goes wrong.

7) Extra Options ¶

'buttonText'=>'Find & Upload',
'dropFilesText'=>'Drop Files Here !',
'htmlOptions'=>array('style'=>'width: 300px;'),
'defaultControllerName'=>'site',
'defaultActionName'=>'coco',