Difference between #1 and #2 of YiiBooster: How to implement files and images upload on TbRedactor Widget

unchanged
Title
YiiBooster: How to implement files and images upload on TbRedactor Widget
unchanged
Category
How-tos
unchanged
Tags
How to, YiiBooster, Widgets
changed
Content
<h2>Introduction</h2>
I have been requested to provide a tutorial on how to use the file upload
feature of the TbRedactor widget, and even though I am no longer supporting the
library due that the work belongs to Clevertech, I feel that I owe that to the
Yii developers. So, here is the  tutorial.
<h2>How to do it</h2>
As you know, if you try to use TbRedactor "out of the box" and if you
click on the "insert image", you will see a "popup window"
as the following image:

<center><img class="aligncenter size-medium wp-image-1131"
alt="Captura de pantalla 2013-03-24 a la(s) 15.34.57"
src="http://www.ramirezcobos.com/wp-content/uploads/2013/03/Captura-de-pantalla-2013-03-24-a-las-15.34.57-300x124.png"
width="300" height="124" /></center>

Not bad... but too plain. What about the really cool Fileupload shown on
redactorJS site? How do we set it up? The answer is easier that you can imagine.
In fact, the only thing that we need to tell the plugin is the URL address that
will handle file and image upload processes.

~~~
[php]
// with a TbActiveForm
echo $form->redactorRow(
    $model,
    'attribute_name',
    array(
       'class'=>'span4',
       'rows'=>5,
       'options'=>array(
          'fileUpload' => $this->createUrl('site/testFileUpload'),
          'imageUpload' => $this->createUrl('site/testImageUpload'),
       )
    )
);

// as a widget
$this->widget('bootstrap.widgets.TbRedactorJs',
    array(
      'model'=>$model,
      'attribute'=>'attribute_name',
      'editorOptions'=>array(
          'fileUpload' => $this->createUrl('site/testFileUpload'),
          'imageUpload' => $this->createUrl('site/testImageUpload'),
          'width'=>'100%',
          'height'=>'400px'
       )
    ));
~~~

As soon as we have that setup, the popup window will display differently:

<center>
<img class="size-medium wp-image-1133" alt="Files Upload"
src="http://www.ramirezcobos.com/wp-content/uploads/2013/03/Captura-de-pantalla-2013-03-26-a-las-09.49.56-300x228.png"
width="300" height="228" />

<img class="size-medium wp-image-1136" alt="Images
Upload"
src="http://www.ramirezcobos.com/wp-content/uploads/2013/03/Captura-de-pantalla-2013-03-26-a-las-09.57.41-300x197.png"
width="300" height="197" />
</center>

<b>Important</b> How to handle file uploads is out of the scope of
this tutorial. If you wish to know how to handle file uploads on the server from
redactorJS, I highly recommend you <a title="Files upload"
href="http://imperavi.com/redactor/docs/files/"
target="_blank">to read the documentation at imperavi</a>.

But wait a minute, what about if we wish to insert an image that has been
previously uploaded? If we look at the redactor's site we find really cool
thumbnail images to choose from. Well, is a bit tricky but not too hard. The
only thing that you have to do is to provide a URL where to download the
"json" file that will get the uploaded files and their location.

~~~
[php]
// with a TbActiveForm
echo $form->redactorRow(
    $model,
    'attribute_name',
    array(
       'class'=>'span4',
       'rows'=>5,
       'options'=>array(
          'fileUpload' => $this->createUrl('site/testFileUpload'),
          'imageUpload' => $this->createUrl('site/testImageUpload'),
          'imageGetJson'=> $this->createUrl('site/testImageThumbs')
       )
    )
);

// as a widget
$this->widget('bootstrap.widgets.TbRedactorJs',
    array(
      'model'=>$model,
      'attribute'=>'attribute_name',
      'editorOptions'=>array(
          'fileUpload' => $this->createUrl('site/testFileUpload'),
          'imageUpload' => $this->createUrl('site/testImageUpload'),
          'imageGetJson'=> $this->createUrl('site/testImageThumbs')
          'width'=>'100%',
          'height'=>'400px'
       )
    ));
~~~

The following is an example action to return the thumbs and image information:

~~~
[php]
public function actionTestImageThumbs()actionTestUpload()
{
   echo json_encode(array(
        array(
           'thumb' => '/images/image1_thumb.png',
           'image' => '/images/image1_big.png',
           'title' => 'Title1', // optional
           'folder' => 'myFolder' // optional
        ),
        array(
           'thumb' => '/images/image2_thumb.png',
           'image' => '/images/image2_big.png',
           'title' => 'Title2', // optional
           'folder' => 'myFolder' // optional
        )
   ));
}
~~~

Obviously, the above example has to contain the right resources to work but the
result would endup with something similar to the following:

<center>
<img class="size-medium wp-image-1139" alt="Images
Choose"
src="http://www.ramirezcobos.com/wp-content/uploads/2013/03/Captura-de-pantalla-2013-03-26-a-las-10.15.26-300x225.png"
width="300" height="225" />
</center>

<h2>Further Reading</h2>
<ul>
	<li><a href="http://imperavi.com/redactor/docs/settings/"
target="_blank">Imperavi Redactor Doc Settings</a></li>
	<li><a href="http://imperavi.com/redactor/docs/files/"
target="_blank">Imperavi Redactor Doc Files
Upload</a></li>
	<li><a href="http://imperavi.com/redactor/docs/images/"
target="_blank">Imperavi Redactor Doc Images
Upload</a></li>
</ul>

>
[![2amigOS!](http://www.gravatar.com/avatar/55363394d72945ff7ed312556ec041e0.png)](http://www.2amigos.us)
   
<i>web development has never been so fun</i>  
[www.2amigos.us](http://www.2amigos.us)