Difference between #3 and #2 of How to use YiiBooster TbFileUpload widget

How to use YiiBooster TbFileUpload widget
YiiBooster, How to, File upload
The following wiki is to explain how to make use of the TbFileUpload widget from
YiiBooster. I have received a couple of requests and I thought was worth writing
a wiki for it. 

### Preparation 
First, we need to make sure we have a folder with write permissions, that will
be the place where we are going to save our uploaded files. 

I normally create a `files` folder and I allocate it within my `www` one, that
is where I keep my css, js, images files. So, even though you can place it where
ever you wish and for the sake of the example, I will use the `files` folder

I also assume that you have configured a path alias that references the `files`
folder. On this example, the path alias is `frontend.www.files`. 

### Note   
* This demo only works if the MyModel class already includes the function
getImageUrl($img_type=null). If not, comment the 2 lines inside the data array,
where 'url' and 'thumbnail_url' are defined, to make the demo work  
* If the MyModel has a different name, it needs to be replaced 1-2 times inside
the upload action  
* The url where we are going to upload our files => upload action  

_Thanks [Don Felipe](http://www.yiiframework.com/user/9450/)_  

### Setup your model
The way you handle validation on the server is up to you, the configuration I am
going to provide now is just an example. 

We are going to add one extra attribute to the model `picture`, which is going
to hold any $_FILE type resource uploaded and validated when model is on
`upload` scenario.
class MyModel extends CActiveRecord {
// ... more code here
* This is the attribute holding the uploaded picture
* @var CUploadedFile
public $picture;
// ... more code

* @return array validation rules for model attributes.
public function rules()
  return array(
    // ... more rules here
    array('picture', 'length', 'max' => 255, 'tooLong' => '{attribute} is
too long (max {max} chars).', 'on' => 'upload'),
    array('picture', 'file', 'types' => 'jpg,jpeg,gif,png', 'maxSize' =>
1024 * 1024 * 2, 'tooLarge' => 'Size should be less then 2MB !!!', 'on' =>
    // ... more rules here

### Configuring the Widget
To render the widget on your view is quite straightforward, the are a couple of
things very important to configure:   

* the url where we are going to upload our files   
* the file types we are going to accept and their maximum size
Now, lets render it:
<?php $this->widget('bootstrap.widgets.TbFileUpload', array(
    'url' => $this->createUrl("my/upload"),
    'model' => $model,
    'attribute' => 'picture', // see the attribute?
    'multiple' => true,
    'options' => array(
    'maxFileSize' => 2000000,
    'acceptFileTypes' => 'js:/(\.|\/)(gif|jpe?g|png)$/i',
))); ?>
#### Handling Upload
Everything is ready now but the controller. We have to configure the action that
will handle the upload process. Here you go, the upload action of our controller
-very, very basic - and not fully tested: 
class myController extends CController {
// ... more code here

* Handles resource upload
* @throws CHttpException
public function actionUpload()
    header('Vary: Accept');
    if (isset($_SERVER['HTTP_ACCEPT']) && 
        (strpos($_SERVER['HTTP_ACCEPT'], 'application/json') !== false))
        header('Content-type: application/json');
    } else {
        header('Content-type: text/plain');
    $data = array();

    $model = new MyModel('upload');
    $model->picture = CUploadedFile::getInstance($model, 'picture');
    if ($model->picture !== null  &&
        $model->file_name = $model->picture->name;
        // save picture name
        if( $model->save())
            // return data to the fileuploader
            $data[] = array(
                'name' => $model->picture->name,
                'type' => $model->picture->type,
                'size' => $model->picture->size,
                // we need to return the place where our image has been saved
                'url' => $model->getImageUrl(), // Should we add a helper
                // we need to provide a thumbnail url to display on the list
                // after upload. Again, the helper method now getting thumbnail.
                'thumbnail_url' =>
                // we need to include the action that is going to delete the
                // if we want to after loading 
                'delete_url' => $this->createUrl('my/delete', 
                    array('id' => $model->id, 'method' => 'uploader')),
                'delete_type' => 'POST');
        } else {
            $data[] = array('error' => 'Unable to save model after saving
    } else {
        if ($model->hasErrors('picture'))
            $data[] = array('error', $model->getErrors('picture'));
        } else {
            throw new CHttpException(500, "Could not upload file ".   
    // JQuery File Upload expects JSON data
    echo json_encode($data);

// .... more code here 

} // end of controller
- [http://blueimp.github.com/jQuery-File-Upload/
](http://blueimp.github.com/jQuery-File-Upload/  "")

Final Notes
The upload action example was not really tested, if any of you had problems with
it, please submit your changes to the [YiiBooster Forum
Topic](http://www.yiiframework.com/forum/index.php/topic/36258-yiibooster/). Any
help would be highly appreciated to improve this wiki.