coco Follow @yiiframework

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

Go to Coco Repository at Bit Bucket !

INSTALL

1) GIT Cloning

ABOUT DIRECT DOWNLOAD !

2) Setup 'config/main'

3) Action Setup

4) Insert and configure the Widget / Configura el Widget

5) How to receive the uploaded file.

6) If your File is not received, or it says: "Failed" everytime..

7) Extra Options

Por: Christian Salazar Follow @salazarchris74

Coco! Multi file Uploader Widget

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 ** if you are using a lower yii version then you will receive an error about "CJavaScriptExpression", please refer to issues about how to solve this issue.

Go to Coco Repository at Bit Bucket ! ¶

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

'Coco' is a widget for yii framework designed to handle File Uploads (Single and Multiple). Is designed using Ajax-jQuery and a well formed Architecture based on MVC (and UML). Using 'coco' is very simple, at first place you setup a fixed action in any controller, this action serves for all every coco-widgets in your application. At second place you insert the widget in your form, all uploaded files will be stored in the path provided by 'uploadDir' widget attribute. Very simple and usefull. Please enjoy it.

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. 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

    If you dont use GIT please 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 with your current application using a fixed Action in siteController (or a distinct controller if you prefer).

By default, using:

myapp/protected/controllers/SiteController.php

IMPORTANT: This action is required only one time for all above project !!

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 / Configura el 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 will invoke an specific method name (methodName) in an specific class provided in widget config (receptorClassName). When a new file arrives from upload the Coco will invoke this method passing to you the 'userdata' argument and the full file path.

By 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) If your File is not received, or it says: "Failed" everytime.. ¶

Check your php.ini for post_max_uploads variable, and please be consistent with 'sizeLimit'=>2000000.
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

#13703

josterricardo at 2013/06/18 05:01pm

Get file name

How to get only the file name you are uploading.

#12582

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

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

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

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

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

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

bluyell at 2012/12/28 12:36am

double single quotation!. SOLVED.

thanks for report it. it is solved and published.

#11212

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

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

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

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

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

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

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

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

#11122

bluyell at 2012/12/18 11:46am

Widget for Manage images via Ajax

You can manage the uploaded images using this widget: Imagegallery1 Ajax Image Manager

#10425

E.J. at 2012/10/26 01:05pm

I need function delete file.

May be user upload missing file So then I need function delete file.

Thank a lot for useful extension.>

I mean it can delete or remove file from the list before upload.

#10339

bluyell at 2012/10/20 07:41pm

issue #1 SOLVED ! thanks for comments, enjoy it !

bug. Coco always allow uploads using any file extension no matter if is allowed or not in 'allowedExtensions'.

in file CocoWidget.php line number 179, please change:

$uploader = new ValumsFileUploader(array(), $this->sizeLimit);

for this:

$uploader = new ValumsFileUploader($this->allowedExtensions, $this->sizeLimit);

review the issue at: review code changes to solve issue #1

#10334

Giuseppe Santoro at 2012/10/20 06:21am

Usefull Extension

I tried it, it's really a usefull extension.

Just a note. if you set:

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

it should be unnecessary write:

$this->widget('ext.coco.CocoWidget'
        ......

to use:

$this->widget('CocoWidget'
        ......

should be enough.

thanks for your contribution, Cheers

Please login to leave your comment.