Yii 1.1: YiiBooster: How to implement files and images upload on TbRedactor Widget

22 followers

Introduction

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.

How to do it

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:

Captura de pantalla 2013-03-24 a la(s) 15.34.57

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.

// 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:

Files Upload

Images Upload

Important 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 to read the documentation at imperavi.

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.

// 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:

public function actionTestImageThumbs()
{
   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:

Images Choose

Further Reading

2amigOS!
web development has never been so fun
www.2amigos.us

Total 3 comments

#17579 report it
Rohit Suthar at 2014/07/04 07:59am
YiiBooster: TbRedactor Widget

thanks for sharing this articles..

#13097 report it
Stefano Mtangoo at 2013/05/04 05:41pm
YiiBooster: How to implement files and images upload on TbRedactor Widget

Thanks Antonio. This is one of the things I need most. BTW I saw in your LinkedIn Yiistrap but cannot find it anywhere. Pls don't let YiiBooster die, it is one of the best thing ever happened to Yii Community!

#12533 report it
akitikkx at 2013/03/27 02:42am
YiiBooster: How to implement files and images upload on TbRedactor Widget

I am sure a lot of people have been anticipating this guide. Thanks Antonio

Leave a comment

Please to leave your comment.

Write new article