user friendly widget, to manage(upload, remove, replace) image associated with model


This extension intended to handle actions with images associated with model.

Extensions provides user friendly widget, to upload and remove image.

Screenshots: Yii image attachement screenshots


  1. Asynchronous image upload
  2. Ability to generate few image versions with different configurations
  3. Drag & Drop


  1. Yii
  2. Twitter bootstrap
  3. yii-image component


  1. Download and extract extension somewhere in your application(in this guide into extensions/imageAttachment). Also available in composer.
  2. Add ImageAttachmentBehavior to you model, and configure it, create folder for uploaded files.
public function behaviors()
            return array(
                'preview' => array(
                    'class' => 'ext.imageAttachment.ImageAttachmentBehavior',
                    // size for image preview in widget
                    'previewHeight' => 200,
                    'previewWidth' => 300,
                    // extension for image saving, can be also tiff, png or gif
                    'extension' => 'jpg',
                    // folder to store images
                    'directory' => Yii::getPathOfAlias('webroot').'/images/productTheme/preview',
                    // url for images folder
                    'url' => Yii::app()->request->baseUrl . '/images/productTheme/preview',
                    // image versions
                    'versions' => array(
                        'small' => array(
                            'resize' => array(200, null),
                        'medium' => array(
                            'resize' => array(800, null),
  1. Add ImageAttachmentAction in controller somewhere in your application. Also on this step you can add some security checks for this action.
class ApiController extends Controller
            public function actions()
                return array(
                    'saveImageAttachment' => 'ext.imageAttachment.ImageAttachmentAction',
  1. Add ImageAttachmentWidget somewhere in you application, for example in editing from.
$this->widget('ext.imageAttachment.ImageAttachmentWidget', array(
            'model' => $model,
            'behaviorName' => 'preview',
            'apiRoute' => 'api/saveImageAttachment',
  1. It is done! You can use it now.
            echo CHtml::image($model->preview->getUrl('medium'),'Medium image version');
            echo 'no image uploaded';


Pull requests are welcome! Also, if you any ideas or questions about - welcome to issue tracker


Forum discussion

Extension, on Bitbuket

Image component, on Bitbuket

Example application - it is fork from yii blog demo, with some of my extensions.


  • December 2, 2013 - update documentation, added min size for preview, fix bug with photo removal, on some urlManager configurations, bug fix for directory creation, fixes in updateImages method.
  • September 4, 2013 - Fix bugs: when using model with composite key, with automatic directory creation

Total 10 comments

#18034 report it
Sachy at 2014/08/28 05:00pm
Re: i always just see "Before image upload. Save this"

My image model is like this ImageId, Name, ImageLocation, Caption, Productid

Also what it means by " try to save it before using image-attachement extension." How can I save a model?


What do I need to do exactly to get it working? Thx

#17772 report it
Bogdan Savluk at 2014/07/21 04:57pm
Re: i always just see "Before image upload. Save this"

Problem is not with yii-image extension.

This message appears because you can not upload images for new model, try to save it before using image-attachement extension.

#17771 report it
Bianchi at 2014/07/21 01:10pm
i always just see "Before image upload. Save this"

I'm having the same problem.

I downloaded imageAttachment and image extensions.

I extracted imageAttachment on /protected/imageAttachment and imagem on /protected/imageAttachment/image

Then I added the following in main


and did everything you said on this page. What else should I do?

#16964 report it
DryKillLogic at 2014/04/16 05:12pm

Thanks, good extension. Multiupload support would be a great feature. I know we can use your other extension GalleryManager but sometimes is too much for some specific projects.

#15635 report it
Bogdan Savluk at 2013/12/02 09:52am
re: i always just see "Before image upload. Save this"

Hi, yes - you should install "image" component. I have added it to downloads, and added link to it into extension description.

Also I have added link to application with example how to use this extension.

#15631 report it
Fire at 2013/12/02 12:34am
i always just see "Before image upload. Save this"

Hi there, I am having trouble installing. I followed all the steps. I am confused however, about the dependency yii-image component. How should I install this, do I need to?

#15613 report it
Bogdan Savluk at 2013/11/28 07:42am
re: have multiload images support? If no, why?

No, there is only one image... So no need in multiupload. Or you meant something else?

#15610 report it
shapovalov_org at 2013/11/28 04:41am

Look nice! Do this ext. have multiload images support? If no, why?

#14646 report it
Bogdan Savluk at 2013/08/31 06:08pm
Re: bug in doc

Thanks - fixed behavior name in doc. About yii-bootstrap - "bootstrap.css" is the only thing you need from it in order to use this extension

#14644 report it
Maxxer at 2013/08/31 05:38pm
bug in doc

rename previewImageAttachmentBehavior -> preview ? thanks, looks great! should also doc how to see correct buttons using yii-bootstrap instead of a bootstrap theme itself

Leave a comment

Please to leave your comment.

Create extension