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


  1. Features
  2. Decencies
  3. Installation:
  4. Contributing
  5. Resources
  6. Changelog

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


0. Download and extract extension somewhere in your application(in this guide into extensions/imageAttachment). Also available in composer.

  1. 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
3 0
3 070 downloads
Yii Version: Unknown
License: BSD-2-Clause
Category: User Interface
Developed by: Bogdan Savluk
Created on: Aug 29, 2013
Last updated: 10 years ago


show all

Related Extensions