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 13 comments

#18315 report it
Blastodermo at 2014/10/14 11:29am
Ajax problem

Can not get to run the extension when the view containing the widget is loaded via Ajax. Not throw me any errors ... Any help would be appreciated

#18248 report it
kay at 2014/10/07 07:22am
a litle tweak for delete

hello guys yesterday i download dropzone.js and update with the new one from github you should do that.

on form section i create a hiddentext field

<?php echo CHtml::hiddenField('uploadId' , 'value', array('id' => 'hiddenInput')); ?>

and on the widget i use the onSucccess function

<?php echo $form->labelEx($model,'file'); ?>
<?php $this->widget('ext.dropzone.EDropzone', array(
        'model' => $model,
        'attribute' => 'file',
        'url' => Yii::app()->request->baseUrl.'/api/insert',
        'mimeTypes' => array('image/jpeg', 'image/png'),
        'onSuccess' => 'succcesupload',
        'options' => array('addRemoveLinks' =>true,),
    )); ?>

where the onSuccess function i updated with

$options = CMap::mergeArray(array(
                'url' => $this->url,
                'parallelUploads' => 1,
                'paramName' => $this->name,
                'accept' => "js:function(file, done){if(jQuery.inArray(file.type,{$this->mimeTypes}) == -1 ){done('File type not allowed.');}else{done();}}",
                'init' => "js:function(){this.on('success',$this->onSuccess);}"
                ), $this->options);

where will return the object and id from fileupload controller such as id so i can remove and delete file that i upload before

function succcesupload(file ,response){
    if($('#hiddenInput').val() == 'value'){
        var before =  $('#hiddenInput').val();
        $('#hiddenInput').val(before +','+response);
    var data = $('#hiddenInput').val();
    var y = data.split(',');
    $(".dz-remove").each(function(i) {
        $(this).attr("value" , y[i++]);
        var id = $(this).val();
        var data = $('#hiddenInput').val();
        var remove = data.split(',');
        remove = jQuery.grep(remove, function(value) {
          return value != id;
        var token = '<?php echo Yii::app()->request->csrfToken; ?>';
        var SiteUrl = '<?php echo Yii::app()->request->baseUrl; ?>';
            type: 'POST',
            url: SiteUrl+'/api/deleteupload',
            data : {YII_CSRF_TOKEN : token, fileId : id, type:'Avatar' },
            success : function(){
            error : function(){

and here my controller for saving uploads

public function actionInsert(){
        if (!empty($_FILES)) {
          // Yii::app()->session['id_upload'] == '';  
            $random = rand(0,99999999999);
          $tempFile = $_FILES['avatar']['tmp_name']['file']; 
          $targetPath = Yii::getPathOfAlias('webroot').'/images/avatar/'; 
          $file_name = $random.'_'.str_replace(' ' ,'_' ,$_FILES['avatar']['name']['file']); 
          $targetFile =  $targetPath.$file_name;
            $upload = new SimpegUpload;
            $upload->file_name =  $file_name;
            $upload->url = Yii::app()->request->baseUrl.'/images/avatar/'.$file_name;
            $to_return = SimpegUpload::model()->findByAttributes(array('file_name'=>$file_name));
            // var_dump($to_return->id);
            Yii::app()->session['id_upload'] = $to_return->id;
            echo $to_return->id;

and controller for deleting uploads

public function actiondeleteupload(){
            if($_POST['type'] == 'Avatar'){
                 $targetPath = Yii::getPathOfAlias('webroot').'/images/avatar/photos/'; 
            $data = SimpegUpload::model()->findbyPk($_POST['fileId']);
            if($data != null){
         return true;

hopes this working for you and sorry for terible english

#17475 report it
Bjorn at 2014/06/18 11:03am

I really like Dropzone a lot and also your extension making the implementation even more easier.

What I can't figure out so far, is why I can't translate the errors. Like the FileTooBig error, I tried:

.... 'options' => array( 'dictFileTooBig'=>'To big stupid!', ....

Has no effect.

#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