Yii 1.1: yii-dropzone

Yii extension for the Dropzone.js file upload library

This extension uses the Dropzone.js open source file upload library to allow asynchronous file uploads in your form or ActiveForm.


Developed using Yii 1.1.13 but should work with older versions as well.


Unzip the contents to your extensions folder.

In your view use it like this:

$this->widget('ext.dropzone.EDropzone', array(
    'model' => $model,
    'attribute' => 'file',
    'url' => $this->createUrl('controller/action'),
    'mimeTypes' => array('image/jpeg', 'image/png'),
    'onSuccess' => 'someJsFunction();',
    'options' => array(),

The options array accepts any option supported by the Dropzone.js library. Check the link below for all available options.


Total 10 comments

#16894 report it
M0ka at 2014/04/10 06:03am
Here its

Update your extension from the github link I set before, and set these attributes

if (count($model['ADV_PIC']) > 0) {
    for ($i = 0; $i < count($model['ADV_PIC']); $i++) {
        $mocks .= 'var mockFile' . $i . ' = {name: "' . $model['ADV_PIC'][$i] . '", size: ' . filesize(Yii::app()->params->imagesDir . $model['ADV_PIC'][$i]) . ', type: "image/jpeg"}; this.addFile.call(this, mockFile' . $i . '); this.options.thumbnail.call(this, mockFile' . $i . ', "' . Yii::app()->params->thumbsPath . $model['ADV_PIC'][$i] . '");';
        $fields .= CHtml::hiddenField('picsers[]', $model['ADV_PIC'][$i]);
'init' => 'js:function(){' .
        . '}'
#16891 report it
Bernardus at 2014/04/09 10:56pm
how to make it reload?

Thanks for this great extension....

I want to ask something.... I combine this extension with a form.... when I use that form, I upload some image, and then I submit the form, if there is an error (validating error), page will come back to form.... how to reload image that I already upload? (without I upload again)


#16025 report it
M0ka at 2014/01/11 05:04am
[Answer]How to remove uploaded file

You can simple update your CSS file from here copy and paste the content of dropzone.css and the JS files from here

file name dropzone.js

#15099 report it
gin at 2013/10/07 01:14pm
looks good

looks good,but how to remove the uploaded file?

#14963 report it
subdee at 2013/09/25 05:32am


#14952 report it
yan at 2013/09/24 02:37am
not working selection of types

bug in

'accept' => "js:function(file, done){if(jQuery.inArray(file.type,{$this->mimeTypes})){done('File type not allowed.');}else{done();}}",

incorrect use of jQuery.inArray(), should be

'accept' => "js:function(file, done){if(jQuery.inArray(file.type,{$this->mimeTypes})==-1){done('File type not allowed.');}else{done();}}",
#14057 report it
suparmanto at 2013/07/16 12:04am
option addRemoveLinks not work..

Hi, all..

I doing like this, but no addition button appear on preview... could anyone help...

<?php  $this->widget('ext.dropzone.EDropzone', array(
    'model' => $model, 
    'attribute' => 'file', 
    'url' => $this->createUrl('gallery/save_tempphoto',array('index'=>null)),
    'mimeTypes' => array('image/jpg', 'image/png', 'image/gif'),
    'options' => array('addRemoveLinks' =>true),
#13576 report it
subdee at 2013/06/07 05:10am


Yes I will update it as soon as I can, kind of got some big projects these days.

Thanks for your suggestions!

#13575 report it
sidewinder at 2013/06/07 04:30am
Small and clean

Nicely done. If you are planning any upgrades, let me suggest adding support for more events. IMHO error and complete are first candidates.

#13133 report it
dedi sugianto at 2013/05/07 06:29am

nice, dropzone extension

Leave a comment

Please to leave your comment.

Create extension