Here is my approach:
Controller:
public function actionFormUpload()
{
$this->render('upload');
}
public function actionCropImg()
{
Yii::app()->clientScript->scriptMap=array(
(YII_DEBUG ? 'jquery.js':'jquery.min.js')=>false,
);
$imageUrl = Yii::app()->request->baseUrl . '/images/users/'. $_GET['fileName'];
$this->renderPartial('cropImg', array('imageUrl'=>$imageUrl), false, true);
}
public function actionUpload()
{
Yii::import("ext.EAjaxUpload.qqFileUploader");
$folder='images/users/';// folder for uploaded files
$allowedExtensions = array("jpg", "jpeg", "gif", "png");//array("jpg","jpeg","gif","exe","mov" and etc...
$sizeLimit = 1 * 1024 * 1024;// maximum file size in bytes
$uploader = new qqFileUploader($allowedExtensions, $sizeLimit);
$result = $uploader->handleUpload($folder);
$fileSize=filesize($folder.$result['filename']);//GETTING FILE SIZE
$fileName=$result['filename'];//GETTING FILE NAME
$result=htmlspecialchars(json_encode($result), ENT_NOQUOTES);
echo $result;// it's array
}
Model: (seems that beforesave doesnt work :??)
// before saving we'll crop the image
protected function beforeSave()
{
if ($this->isNewRecord) {
$this->passwordHash = sha1($this->password);
}
$path = "/home/www/images/users/";
$filename = $this->image;
$filetype = $this->imageExt;
$this->image = $this->email.$filetype;
//cropping image
$xCoord = $this->cropX; /* these two fields are the (x,y) coordinates */
$yCoord = $this->cropY; /* of the top left corner of our new image */
$width = $this->cropW; // width of the cropped area
$height = $this->cropH; // height of the cropped area
if ($filetype == '.jpeg' || $filetype == '.jpg') {
$img = imagecreatefromjpeg($path.$filename);
} else if ($filetype == '.gif') {
$img = imagecreatefromgif($path.$filename);
} else if ($filetype == '.png') {
$img = imagecreatefrompng($path.$filename);
}
//create a new PHP image object to hold the cropped image, and crop the image
$newImage = imagecreatetruecolor($width, $height);
imagecopyresampled($newImage, $img, 0, 0, $xCoord, $yCoord, $width, $height, $width, $height);
//convert the PHP image object to a .png file
imagepng($newImage, $path.$filename, 0);
//cleanup
imagedestroy($img);
imagedestroy($newImage);
// renaming old image name to user's email
rename($path.$filename, $path.$this->image);
return parent::beforeSave(); // don't forget this line!
}
View:
<?php $previewWidth = 100; $previewHeight = 100;?>
<?php $this->widget('ext.yii-jcrop.jCropWidget',array(
'imageUrl'=>$imageUrl,
'formElementX'=>'Users_cropX',
'formElementY'=>'Users_cropY',
'formElementWidth'=>'Users_cropW',
'formElementHeight'=>'Users_cropH',
'previewId'=>'avatar-preview', //optional preview image ID, see preview div below
'previewWidth'=>$previewWidth,
'previewHeight'=>$previewHeight,
'jCropOptions'=>array(
'aspectRatio'=>1,
'minSize'=>array(100, 100),
'maxSize'=>array(100, 100),
'boxWidth'=>400,
'boxHeight'=>400,
'setSelect'=>array(0, 0, 100, 100),
),
)
);
?>
<div id="avatar-thumb" style="position:relative; overflow:hidden; width:<?=$previewWidth?>px; height:<?=$previewHeight?>px; margin-top: 10px; margin-bottom: 10px;">
<img id="avatar-preview" src="<?=$imageUrl?>" style="width: 0px; height: 0px; margin-left: 0px; margin-top: 0px;">
</div>
Form:
<div class="row">
<?php echo $form->labelEx($model,'image'); ?>
<?php echo $form->hiddenField($model,'image',array('maxlength'=>100)); ?>
<?php echo $form->hiddenField($model,'imageExt',array('maxlength'=>100)); ?>
<?php echo $form->error($model,'image');
echo $form->hiddenField($model,'cropID');
echo $form->hiddenField($model,'cropX', array('value' => '0'));
echo $form->hiddenField($model,'cropY', array('value' => '0'));
echo $form->hiddenField($model,'cropW', array('value' => '100'));
echo $form->hiddenField($model,'cropH', array('value' => '100'));
?>
<?php
$this->widget('ext.EAjaxUpload.EAjaxUpload',
array(
'id'=>'uploadFile',
'config'=>array(
'action'=> $this->createUrl('upload'),
'allowedExtensions'=> array("jpg", "jpeg", "gif", "png"),//array("jpg","jpeg","gif","exe","mov" and etc...
'sizeLimit'=>500*1024,// maximum file size in bytes
'minSizeLimit'=>10,//*1024*1024,// minimum file size in bytes
'onComplete'=>"js:function(id, fileName, responseJSON){
$('#uploadFile').hide();
if (responseJSON.success) {
$('#cropImg').load('". $this->createUrl('cropImg') ."/fileName/'+fileName);
$('#cropDialog').dialog('open');
$('#Users_image').val(responseJSON.filename);
$('#Users_imageExt').val((responseJSON.filename.substring(responseJSON.filename.lastIndexOf('.'))).toLowerCase());
$('#uploadFile').show();
$('.qq-upload-button').css('display', 'none');
} else {
$('#uploadFile').html('<p width=\"160\">' + responseJSON.error +'</p>');
}
}",
//'messages'=>array(
// 'typeError'=>"{file} has invalid extension. Only {extensions} are allowed.",
// 'sizeError'=>"{file} is too large, maximum file size is {sizeLimit}.",
// 'minSizeError'=>"{file} is too small, minimum file size is {minSizeLimit}.",
// 'emptyError'=>"{file} is empty, please select files again without it.",
// 'onLeave'=>"The files are being uploaded, if you leave now the upload will be cancelled."
// ),
'showMessage'=>"js:function(message){ alert(message); }"
)
));
?>
<?php
$this->beginWidget('zii.widgets.jui.CJuiDialog',
array(
'id'=>'cropDialog',
'options'=> array(
'title'=>'Crop',
'modal'=>true,
'width'=>728,
'height'=>600,
'buttons'=>array('CROP'=>'js:function(){$(this).dialog("close")}'),
'autoOpen'=>false,
)
));
echo '<div id="cropImg"></div>';
$this->endWidget('zii.widgets.jui.CJuiDialog');
?>
</div>