Image upload and show the image in yii

Before we begin, we must have an img_path field in our database this is where we will store our image path for showing it later on our view, that is all we need for now.

Model
In our Model Post, we will create a non database field. we will use this non database field as a temporary holder for our image data.

class Post extends CActiveRecord
{
 /**
  * The followings are the available columns in table 'tbl_post':
  * @var some var here
  */  
  public $image;
}

We will add validation on our function rules

class Post extends CActiveRecord
{
 public function rules()
 {
  array('image',  'required','on'=>'insert'),
  array('image', 'file', 'types'=>'jpg, gif, png,jpeg','allowEmpty' => true)
 }
}

View
Open the view where the form is generated, in my case it is under views/post/_form.php change the htmlOptions option to multipart

$form=$this->beginWidget('CActiveForm', array(
 'htmlOptions' => array('enctype' => 'multipart/form-data'),
));

We can now get our non database model in our view. Note that setting the $image in our model is important. Our CActiveForm will get data fields on our model and use it on our view.

echo $form->labelEx($model, 'image');
    echo $form->fileField($model, 'image');
    echo $form->error($model, 'image'); 

Controller
We will insert our image only if our controller receives a post request coming from our form

public function actionCreate()
{ 
 $model=new Post;  
 if(isset($_POST['Post']))
 {  
  $model->attributes=$_POST['Post'];
  //*** image upload start here ***// 
   $model->image=CUploadedFile::getInstance($model,'image');
   //save the image on our folder with the name sample.jpg
   $model->image->saveAs('../img/sample.jpg');
   //store the path in our database
   $model->img_path = 'img/sample.jpg');     
  //*** end image upload ***//  
  if($model->save()) 
  $this->redirect(array('view','id'=>$model->id));
 }
 $this->render('create',array(
  'model'=>$model,
 ));
}

at this point the image uploader is already functional but we want it to be dynamic so we will add validation check first if image is set before running the upload code

if(isset($model->image)){ 
 //save the image on our folder with the name sample.jpg
 $model->image->saveAs('../img/sample.jpg');
 //store the path in our database
 $model->img_path = 'img/sample.jpg'); 
} 

make the naming more dynamic and safe. I use the field title as the name of the image when it is save. you can change this depending on the database model you have.

$model->image->saveAs(Yii::app()->basePath . '/../img/' .  preg_replace('@[\s!:;_\?=\\\+\*/%&#]+@', '-', $model->title) . '.' . mb_strtolower($model->image->getExtensionName()) );
$model->img_path = 'img/' . preg_replace('@[\s!:;_\?=\\\+\*/%&#]+@', '-', $model->title) . '.'  . mb_strtolower($model->image->getExtensionName()); 

Explanation :

Yii::app()->basePath
get the root path of the yii application

preg_replace('@[\s!:;_\?=\\\+\*/%&#]+@', '-', $model->title)
replace 'space' to '-' ex ('hello m' is equals to 'hello-m'), I use my field title as the name of the image when it is save on the folder

mb_strtolower($model->image->getExtensionName())
change 'JPG' to 'jpg'for consistency.

Adding all up

public function actionCreate()
{ 
 $model=new Post;  
 if(isset($_POST['Post']))
 {  
  $model->attributes=$_POST['Post'];  
  //*** image upload start here ***// 
  $model->image=CUploadedFile::getInstance($model,'image');
  if(isset($model->image)){    
   //save the image on our folder with the name sample.jpg
   $model->image->saveAs(Yii::app()->basePath . '/../img/' .  preg_replace('@[\s!:;_\?=\\\+\*/%&#]+@', '-', $model->title) . '.' . mb_strtolower($model->image->getExtensionName()) );
   //store the path in our database
   $model->img_path = 'img/' . preg_replace('@[\s!:;_\?=\\\+\*/%&#]+@', '-', $model->title) . '.'  . mb_strtolower($model->image->getExtensionName());   
  }  
  //*** end image upload ***//  
  if($model->save()) 
  $this->redirect(array('view','id'=>$model->id));
 }
 $this->render('create',array(
  'model'=>$model,
 ));
}

We already have the image path in our database and the image itself in our folder. We can now show our image in view by simply calling the image path on any html file that we want it to appear.
ex : <img  src=<?php echo $var->img_path;?>