Yii 1.1: xupload

jquery file upload extension for yii


jQuery file upload extension for Yii, allows your users to easily upload files to your server:

Setup instructions

Using composer

Add to your composer.json

    "config": {
        "vendor-dir": "protected/extensions/vendor"
    // custom repository is not needed, you can find it in packagist.org
    "repositories": [
        ... //Other repositories
    "require": {
        ... //Other packages
        "asgaroth/xupload": "v0.5.0"


Download the files and extract them to you project desired folder


  1. Add an application alias in you application configuration that points to the extracted folder
// protected/config/main.php
'aliases' => array(
    //If you used composer your path should be
    'xupload' => 'ext.vendor.asgaroth.xupload'
    //If you manually installed it
    'xupload' => 'ext.xupload'
  1. Create a model, declare an attribute to store the uploaded file data, and declare the attribute to be validated by the 'file' validator. Or use XUploadForm
  2. Create a controller to handle form based file uploads. Or use XUploadAction
  3. Add the Widget to you view
$this->widget('xupload.XUpload', array(
                    'url' => Yii::app()->createUrl("site/upload"),
                    'model' => $model,
                    'attribute' => 'file',
                    'multiple' => true,

Info: Ensure that the apache server has write permissions in the folder you are uploading the files, XUpload will try to create the upload folder if it doesn't exist already.

Using XUploadAction and XUploadForm:

  • XUploadAcion adds basic upload functionality to any controller.
  • XUploadForm its a simple form model to store uploaded file data
  1. Override CController::actions() and register an action of class XUploadAction we (will use 'upload' for the examples), and configure its properties:
class SiteController extends CController
    public function actions()
        return array(
                'path' =>Yii::app() -> getBasePath() . "/../uploads",
                'publicPath' => Yii::app() -> getBaseUrl() . "/uploads",
  1. Create an initial action that will render the form using the XUploadModel:
public function actionIndex() {
        $model = new XUploadForm;
        $this -> render('index', array('model' => $model, ));

Additional Documentation

Here is a wiki describing a more complex workflow using this widget.

And a wiki explaining how to send additional data with your file

Note: See the attached project for more examples



v0.5.0 Sat Nov 10 19:17:16 COT 2012

  • Added $formClass to XUploadAction, to allow overwriting the default form class
  • Improved location of thumbnail url handling
  • Improved security
  • Setup public variables to make using other form models / Active Record models easier.
  • JavaScript-part of extension now properly depends on XUpload::$multiple parameter
  • Added I18N support, added russian translation
  • Fixed incorrect behavior when XUploadAction::$subfolderVar was false
  • No script files are now loading from github.com/blueimp, all of them are locally available now
  • Added XUpload::$showForm param - this allows easily avoid rendering tag in widget view

v0.4.0 Mon Jul 2 16:25:53 COT 2012

  • Added image preview assets
  • Added image processing assets
  • Added the ability to specify upload, download, and form views

v0.3a Sun Mon Apr 2 21:43:38 COT 2012

  • Fixed missing dependencies

v0.3 Sun Apr 1 18:35:23 COT 2012

  • Updated to the new jquery plugin version

v0.2 Sun May 8 19:28:43 COT 2011

  • Added Multiple file uploading functionality
  • Integrated XUploadAction with a few changes (thanks to tydeas_dr)
  • Moved XUploadForm to the extension folder

v0.1 Mon Mar 21 14:51:13 COT 2011

  • First release



Released under the MIT license.

Total 20 comments

#19589 report it
jerome nicholas at 2015/09/22 04:31am
yii 1.16 not working

jquery.fileupload-ui.js:89 Uncaught TypeError: Cannot read property 'options' of undefined

#18860 report it
andrzej1_1 at 2015/01/25 04:46am
Good job!

The best extension for upload!

#18777 report it
Amini at 2015/01/05 04:18am
Update jquery file Upload with last version

Hi dear, please update this extension with last version of jquery plugin. thx.

#18564 report it
ahmed.ismail at 2014/11/18 05:43am

Hi, is there a version for yii2 ?

#17932 report it
mixi at 2014/08/12 12:10pm

This is great extension, thank you!!!

#16033 report it
phreak at 2014/01/13 05:34am
nothing happens - SOLVED

@kinetic_one I had the same issue and struggled a couple of hours but finally got it. You should set in the Widget configuration array:

'htmlOptions' => array('id'=>'bookForm'),

where ID is the SAME as the FORM ID in which is this file input. The component is really nice but the documentation is poor. May be a good example will be nice :).

and 10x for the extension ...

#14441 report it
kinetic_one at 2013/08/12 02:50am
nothing happens


I followed the steps above, and ti appears in my _form view, but after I select a file and close my system's window, nothing happens! No errors either.

Can you please help, maybe provide an example with everything in it, including model etc. So I can just run it and lear from that?


#14363 report it
Asgaroth at 2013/08/06 10:07am

Try the forum, there may be more people there that can help you.

#14362 report it
a.abdelaziz.eg at 2013/08/06 09:37am
The attribute option

It's a very good extension and I make use of it. But I can't change the attribute option, where it accept only the value 'file', therefore I can't use more than one instance of this widget.

can any one help me with this?

#14195 report it
Asgaroth at 2013/07/25 12:25pm

Hi, thanks for working on ir, you if you want to contribute please go to the project page on github, fork the project, add your modifications and create a Pull request, include a descriptoin of the issue and how you solved it. that's the easiest way.


#14192 report it
Fsciuti at 2013/07/25 10:36am
More Widget, One Form

Hello Asgaroth, I think to have a solution to use more widgets in the same form... but I hope to talk to you before creating confusion.

Sorry for my bad english! :S

#14167 report it
haymps at 2013/07/24 08:39am
Re:2 xupload widgets in the same form???

I had the same issue. I never found a solution. It worked if I used browse, but with drag-n-drop, it put the file into both uploads.

#14165 report it
rawlly at 2013/07/24 07:50am
2 xupload widgets in the same form???

Hello, I am trying to have 2 xupload widgets within the same form. When selecting the choose file button on either the first or second instance, the image always gets uplaoded to the second instance. I have separate models for each instance. Is there some way to have 2 on the same form? Thanks Dennis

#14147 report it
Sheillendra at 2013/07/23 02:38am
How to view uploaded file

how we can show file was uploaded??

#13904 report it
Wiseon3 at 2013/07/05 02:29am

@kernel32ddl Download the missing files from https://github.com/Asgaroth/xupload/tree/master/assets/js and load them from own assets folder (don't rely on external resources on production enviroment).

#13903 report it
kernel32ddl at 2013/07/05 02:11am
"NetworkError: 404 Not Found - http://blueimp.github.io/JavaScript-Load-Image/load-image.min.js"
"NetworkError: 404 Not Found - http://blueimp.github.io/JavaScript-Templates/tmpl.min.js"
"NetworkError: 404 Not Found - http://blueimp.github.io/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"
"NetworkError: 404 Not Found - http://blueimp.github.io/JavaScript-Load-Image/load-image.min.js"
"NetworkError: 404 Not Found - http://blueimp.github.io/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"

Extension not work more! Where these files? How to solve these, I use this exetention on production!

[Update. Solved]

To solve problem download load-image.min.js, canvas-to-blob.min.js, tmpl.min.js from https://github.com/blueimp, put them into protected/extensions/xupload/assets/js/

and modify protected/extensions/xupload/XUpload.php:

//The Templates plugin is included to render the upload/download listings
            Yii::app() -> clientScript -> registerScriptFile($baseUrl . '/js/tmpl.min.js', CClientScript::POS_END);
            // The basic File Upload plugin
            Yii::app() -> clientScript -> registerScriptFile($baseUrl . '/js/jquery.fileupload.js', CClientScript::POS_END);
            if($this->previewImages || $this->imageProcessing){
                Yii::app() -> clientScript -> registerScriptFile($baseUrl . '/js/load-image.min.js', CClientScript::POS_END);
                Yii::app() -> clientScript -> registerScriptFile($baseUrl . '/js/canvas-to-blob.min.js', CClientScript::POS_END);

Don't forgot clear assets folder.

#13756 report it
Tpona at 2013/06/23 09:20am
How i can reload images saved in session

When I uploaded the images and made a browser update, I want to restore already downloaded and stored in the temporary directory on the image. How can I do this?

#13609 report it
greed at 2013/06/11 06:49am
Other types of demo

I see other types of demo uploader: basic, basic plus, basic plus ui and angular js. How can i suppose, this extension is wrap for basic plus, and what about other types? Basic type is very usefull in my opinion

#13410 report it
waterloomatt at 2013/05/28 02:25am
Great work!

Love this extension. Thanks!!!

#13363 report it
acorncom at 2013/05/24 12:07pm
RE: not working in IE9

Pretty sure uploads are working fine on our system for IE 9 (haven't tested IE 10 yet)

Leave a comment

Please to leave your comment.

Create extension