yii-dropzone

Yii Framework Extensions

Popular Tags

yii-dropzone Yii extension for the Dropzone.js file upload library

Requirements
Usage
Resources

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

Requirements ¶

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

Usage ¶

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.

Resources ¶

8 0

28 followers

2 152 downloads

Yii Version: 1.1

License: GPL-3.0

Category: User Interface

Developed by: subdee

Created on: Apr 10, 2013

Last updated: 11 years ago

Downloads

show all

Related Extensions

User Contributed Notes 13

#13133

0 0

test

nice, dropzone extension

dedi sugianto at May 7, 2013, 10:29:06 AM

#13575

0 0

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.

sidewinder at Jun 7, 2013, 8:30:58 AM

#13576

0 0

Updates

@sidewinder

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

Thanks for your suggestions!

subdee at Jun 7, 2013, 9:10:24 AM

#14057

0 0

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),
));?>

suparmanto at Jul 16, 2013, 4:04:11 AM

#14952

0 0

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();}}",

yan at Sep 24, 2013, 6:37:34 AM

#14963

0 0

@yan

fixed

subdee at Sep 25, 2013, 9:32:23 AM

#15099

1 0

looks good

looks good,but how to remove the uploaded file?

gin at Oct 7, 2013, 5:14:11 PM

#16025

0 0

[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

M0ka at Jan 11, 2014, 10:04:48 AM

#16891

0 0

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)

Thanks

Bernardus at Apr 10, 2014, 2:56:09 AM

#16894

1 0

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(){' .
        $mocks
        . '}'

M0ka at Apr 10, 2014, 10:03:42 AM

#17475

0 0

Translation?

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.

Bjorn at Jun 18, 2014, 3:03:18 PM

#18248

0 0

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')); ?>
	</div>

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'){
		$('#hiddenInput').val(response);
	}else{
		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++]);
	});
	$(".dz-remove").click(function(){
		var id = $(this).val();
		var data = $('#hiddenInput').val();
		var remove = data.split(',');
		remove = jQuery.grep(remove, function(value) {
		  return value != id;
		});
		$('#hiddenInput').val(remove.toString());
		var token = '<?php echo Yii::app()->request->csrfToken; ?>';
		var SiteUrl = '<?php echo Yii::app()->request->baseUrl; ?>';
		$.ajax({
			type: 'POST',
			url: SiteUrl+'/api/deleteupload',
			data : {YII_CSRF_TOKEN : token, fileId : id, type:'Avatar' },
			success : function(){
				$('.allert').show();
			},
			error : function(){
				$('.error').show();	
			},
		});
	});
	}


</script>

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;
       
          if(move_uploaded_file($tempFile,$targetFile)){
            $upload = new SimpegUpload;
            $upload->file_name =  $file_name;
            $upload->url = Yii::app()->request->baseUrl.'/images/avatar/'.$file_name;
            $upload->save();

            $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(isset($_POST['fileId'])){
    		
    		if($_POST['type'] == 'Avatar'){
    			 $targetPath = Yii::getPathOfAlias('webroot').'/images/avatar/photos/'; 
    		}
    		$data = SimpegUpload::model()->findbyPk($_POST['fileId']);
    		if($data != null){
    			if(unlink($targetPath.$data->file_name)){
    				$data->delete();
    			}	
    		}
    	}
         return true;
    }

hopes this working for you
and sorry for terible english

kay at Oct 7, 2014, 11:22:55 AM

#18315

0 0

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

Blastodermo at Oct 14, 2014, 3:29:04 PM

Categories