Yii 1.1: xupload

jquery file upload extension for yii
145 followers

Demo

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"
    }
}

Manually

Download the files and extract them to you project desired folder

Configuration

  1. Add an application alias in you application configuration that points to the extracted folder
// protected/config/main.php
...
'import'=>array(
    'application.models.*',
    'application.components.*',
),
'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
<?php
$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:
//protected/controllers/SiteController.php
class SiteController extends CController
{
    public function actions()
    {
        return array(
            'upload'=>array(
                'class'=>'xupload.actions.XUploadAction',
                'path' =>Yii::app() -> getBasePath() . "/../uploads",
                'publicPath' => Yii::app() -> getBaseUrl() . "/uploads",
            ),
        );
    }
}
  1. Create an initial action that will render the form using the XUploadModel:
//protected/controllers/SiteController.php
public function actionIndex() {
        Yii::import("xupload.models.XUploadForm");
        $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

Resources

Changelog

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

Colaborators

License

Released under the MIT license.

Total 20 comments

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

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

Hello,

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?

Thanks

#14363 report it
Asgaroth at 2013/08/06 10:07am
@a.abdelaziz.eg

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
@Fsciuti

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.

Thanks

#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
Assets

@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
Problem
"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)

#13361 report it
haymps at 2013/05/24 08:14am
RE: not working in IE9

It works for me in IE10. Does it work for anyone with IE9?

#13224 report it
njasm at 2013/05/16 04:51am
Does this extension work with IE ?

does the latest version work with IE 9+ ?

#13111 report it
Edson Rodrigues at 2013/05/05 02:40pm
Javascript library update

The extension is very good, more could update javascript and extension because it has several options, and the process method that resizes the image and between several. thanks

#12910 report it
myrazel at 2013/04/20 04:12am
no doubt its awesome

good and nice extension

Leave a comment

Please to leave your comment.

Create extension