Yii 1.1: coco

single and multiple file uploader using ajax jquery, drag & drop featured.
20 followers

Coco! Multi file Uploader Widget

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

Coco Screen Capture

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',

Total 20 comments

#16385 report it
@josor_ at 2014/02/17 11:05am
Impossible upload!

I got 404 error when I upload files, the documentation is poor!

#15372 report it
Plateado at 2013/11/02 05:20pm
Bug

Cuando invoco más de un Coco en un formulario, sólo funciona el primero, el resto si sube el archivo pero no devuelve nada de userdata, ¿cómo soluciono esto?.

#14951 report it
Omar Ali Ibrahim at 2013/09/24 01:33am
Cancel uploaded file (at least from the control)

After I upload a file (and let's say I'm allowing only 1 file upload)... the user decides, oh that's the wrong file I uploaded and needs to re-upload another file... How do I go about doing that. Because if he clicks on upload again... it'll say..you've reached max file uploads..

the only way would be to refresh the page.. i want to avoid that..

anyway thanks for saving valums from widen and giving us this extension :)

#14198 report it
bluyell at 2013/07/25 02:16pm
in response to: "How to get only the file name you are uploading."

use the callback.

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

this class: "application.models.MyModel" must implements the "methodName", and will receive the uploaded file and the "userdata" argument.

class MyModel {
    public function onFileUploaded($fullFileName,$userdata) {
        // userdata is the same passed via widget config.
    }
}
#13703 report it
josterricardo at 2013/06/18 05:01pm
Get file name

How to get only the file name you are uploading.

#12582 report it
Skylight at 2013/03/29 01:21pm
Awesome

@buyell, this is awesome news ... I do respect your work and I can imagine what it brings to improve/edit the valums code! I look forward to seeing it, and I think we all do :)

Keep doing the awesome job ! Cheers

#12564 report it
bluyell at 2013/03/29 12:47am
About Delete button..

@Skylight, yes you are in right. due to this extension is a big wrapper for its original valums file uploader, i must get involved in the internals of this author in order to provide this feature..possible consecuence: bug. but, it is in mind to make this enhancement.

#12520 report it
Skylight at 2013/03/25 12:52pm
New feature

Hi,

It's a very helpful and nice extension and I may have a suggestion to further improve it. It would be nice if you can add a delete button or an "x" link next to the uploaded file, in case the user changes his mind on the uploaded files.

PS: It would also be nice to add different icons before the file name preview. In other words, here is a screenshot showing the new features Screenshot

I hope you consider my suggestion :) But anyway, +1 from me, it helped me a lot! Cheers

#12420 report it
bluyell at 2013/03/19 12:52pm
maxUploads support (client-side)

this last commit has maxUploads support.

https://bitbucket.org/christiansalazarh/coco/get/0e06b51843c0.zip

#12365 report it
bluyell at 2013/03/15 02:57pm
FIXED ISSUE: Nice Urls UrlManager

download or pull the new version, it has solved the issue about UrlManager (nice urls). Sorry for late.

#11214 report it
bluyell at 2012/12/28 12:38am
to @navy, about: about: "path file return to client"

i dont understand your point, please create an issue in coco repo. thank u.

#11213 report it
bluyell at 2012/12/28 12:36am
double single quotation!. SOLVED.

thanks for report it. it is solved and published.

#11212 report it
bluyell at 2012/12/28 12:35am
to @navy, about: about 404.

this is because coco doesnt work with path based urls. in a short comming release i resolve this issue.

http://site.com/index.php/coco/coco&action=upload&nocache=135597771...

#11211 report it
bluyell at 2012/12/28 12:26am
to @navy, about: "Very **IMPORTANT** security bug!!!"

coco is based on a well and hard tested product: "the valums ajax file uploader", coco is a wrapper only, if coco is so bad and insecure then valums file uploader is the same too, and i think this is not the case.

Coco provides server side validation to check image type (based or not in mime) this is not the business for coco widget, is yours, coco only provide the uploaded file to your server.

#11210 report it
bluyell at 2012/12/28 12:14am
to "Navy"

could you please write all this things in the proper issue location on repo ? thanks for it.

#11161 report it
Nabi at 2012/12/20 01:20pm
don't check file size and file type on client side

Your widget don't use parameters(size, type,...) on client side and don't check it on client side! just send parameters to server and check it on server, this scenario is wrong and not fastest(because user must first upload and then check file type and valid extensions) and not secure (because any user can change valid file size or valid file extensions on client and upload any files!) !

#11154 report it
Nabi at 2012/12/20 12:02am
double single quotation!

in the html output widget see:

<div id='cocowidget1' class='cocowidget''>

see double single quotation in end line!

#11151 report it
Nabi at 2012/12/19 11:50pm
Very **IMPORTANT** security bug!!!

I find a very important security bug in runAction function. You use the parameters sent from client and set its for current object on server and save it, so If the user change this parameter for example change valid extensions by firebug and submit form, by easily can upload any file with any extensions on server!!!

#11150 report it
Nabi at 2012/12/19 11:41pm
path file return to client

I do not understand why after uploading, the path files are stored on the server by Ajax should be sent to the client?

path "upload/" fullpath "upload/filename.jpg"

I thinks isn't a security work.

#11149 report it
Nabi at 2012/12/19 11:35pm
return error 404

Hi,

After upload completed, return error 404, the return url is:

http://site.com/index.php/coco/coco&action=upload&nocache=135597771...

I thinks must have a "?" after controller/action , I resolved this with put "?" after defaultActionName I suggest to you, use one parameter for route and create url with createUrl yii function for create url from route and append data parameters.

Thanks

Leave a comment

Please to leave your comment.

Create extension