Follow @asgarothbelem
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
[javascript]
{
"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 ¶
- 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'
),
- 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
- Create a controller to handle form based file uploads. Or use XUploadAction
- 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
- 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",
),
);
}
}
- 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 ¶
- Forum Discussion : for any questions or community support
- Project page : to fork and contribute
- Demo
- jQuery Plugin Wiki
- jQuery File Upload Plugin
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.
Guidance please!
Can you give more explanation on how to use this widget and what changes are to be made to incorporate this widget in a project?
Thanks!
@ppravin88
The download is actually a project with the widget installed, it should as most extensions, go in protected/extensions folder. check SiteController, and the views, index and queue for an example.
Multiple Upload Not Working
Couldn't get the Multiple (Queue) working on the downloaded project. I.e. could only select a single file. Using the latest version of Chrome.
Not a problem when viewing the demo the demo. Is there multiple attribute that I need to set in HTMLOptions?
@waterloomatt
Ill look into it, I tested using firefox 4.
Please try to report such issues in http://code.google.com/p/yii-xupload/issues/list thanks.
Update for multiple files
To be able to update multiple files. You have transform:
echo CHtml::activeFileField($this->model, $this->attribute);
to:
echo CHtml::activeFileField($this->model, $this->attribute,array('multiple'=>true));
and the js function in _getBuildUploadRow function from:
$js = <<<EOD js:function (file) { return $('<tr>'+ '<td class="filename">'+file[0].name+'</td>'+ '<td class="filesize">'+file[0].name+'</td>'+ ...
to:
$js = <<<EOD js:function (file, index) { return $('<tr>'+ '<td class="filename">'+file[index].name+'</td>'+ '<td class="filesize">'+file[index].name+'</td>'+ ...
@klod
You shouldnt modify the Widget directly, instead try this:
echo CHtml::activeFileField($this->model, $this->attribute,array('multiple'=>true, 'buildUploadRow' => "js:function (file, index) { return $('<tr>'+ '<td class=\"filename\">'+file[index].name+'</td>'+ '<td class=\"filesize\">'+file[index].name+'</td>'+ ..." ));
@Asgaroth
Hello Asgaroth,
First, thanks for your module it saved me a lot of time. I had to transform your widget because there is no possibility to add the "multiple" param to the CHtml::activeFileField the way you implemented it. Of course, I didn't implement it the way I mentioned before.
I just added a multiple param to the view like that:
$this->widget('ext.xupload.XUploadWidget', array( 'url' => Yii::app()->createUrl('album/ajaxphotocreate',array('aid'=>$photo->album->id)), 'model' => $photo, 'attribute' => 'url', 'multiple' => true, 'htmlOptions'=>array('id' => 'album-form','class' => 'grid_12'), ));
and then transformed your widget class do handel it.
@klod
Actually I had the multiple param before, but I found it unnecessary, since the form is not submitted with all the fields at once, at least not on the example on git.
Instead it makes separate calls for each file, meaning the server will actually receive only 1 file per request, so no need for the multiple attribute.
If you please create an issue here giving more detail and an example, or the code you are using, ill look into it this weekend and upload a new version.
Thanks for the feedback.
@Asgaroth
The issue is already on your issue cue.
Don't you think selecting multiple files at once is a good thing?
Personally I use your module to upload files to a photo gallery and it would be very painful to upload them one by one.
@klod
I was refering to this example you can select various files and then upload them all, to the user they are uploading all at the same time, but to the server they are all diferent submitions of only 1 file.
I dont know If im misunderstanding the matter. I this is not what you actually want then I ask you to please elaborate more, so I can add the missing funcionality :)
again thanks for the feedback.
@Asgaroth
Asgaroth > I dont know If im misunderstanding the matter .
Yes I thing so Asgaroth. The plug in you implemented has a very good and helpful feature that is multiple selection. This means you don't have to select files one by one. You can drop a selection of files on the <div> and all will be threated.
The version of your extension I have downloaded is a single file version. The two views you provide are "an automatic single file selection upload view" (index.php) and "a queued single file selection upload view" (queue.php). Not single and multiple as your extention tab is labeled.
@klod
Thank you so much for the clarification, I will upload a new version supporting the multiple feature this weekend hopefully.
Callbacks.
Looks great.
I'm taking a look, but I don't see how to create callbacks when the upload is successful or when it fails.
Thanks.
@ yiisus
$this->widget('xupload', array( 'url' => Yii::app()->createUrl("//admin/portfolio/startUpload", array('id' => $model->id)), 'model' => $model, 'attribute' => 'image', 'multiple' => true, 'options' => array( 'beforeSend' => 'js:function (event, files, index, xhr, handler, callBack) { handler.uploadRow.find(".file_upload_start button").click(callBack); }', 'onComplete' => 'js:function (event, files, index, xhr, handler, callBack) { $.fn.yiiGridView.update("image-grid"); }' ), ));
Multiple upload not working..
how can i use the multiple file upload?
how can i also add callback once it completed all downloads?
@esthony
The multiple file uploading is currently broken, I havent had time to update the widget, but will soon hopefully
as for the call back take a look at the wiki here
A simple action for XUpload extension
Check this wiki. It's a ready to go CAction for this Extension. 99% of this code is written by Asgaroth.
How to retrive more information once uploaded
Hi, great job with this extension, but I can't figure how to retrieve more information once a file is uploaded, all I can get is an array with a name, type, size, etc, but I would like to add a custom message such "file uploaded correctly" or even a full widget returned from the server, to place it on the page, how can I do that, again thank you and great job.
@quarkmarino
From the xupload.tar.gz check
~~~
File: xupload/protected/controllers/SiteController.php
Method: actionUpload()
~~~
or EXUploadAction
~~~
File: EXUploadAction
Method: run()
~~~
which is the same code.
There is an if there like.
... if ($model->validate()) { ... echo json_encode(array("name" => $model->name,"type" => $model->mime_type,"size"=> $model->getReadableFileSize())); } else { echo CVarDumper::dumpAsString($model->getErrors()); ... } ...
This is how and what you return.
I don't know what is the jquery code is expecting to get back, and if sending back something != from json encoded string, and how it is handling it.
nice
nice one.
Multiple instances
Hi, great module, thanks, but how do I manage multiple instances, I've just created 2 juidialog and load an xupload extencion on each one from diferent views, but when a add i file to the second xupload widget it is queued to the first xupload widget, so how do I add files to each one separately, thank you, and great extension.
@quarkmarino
The wiki for the original jquery plugin has been restored
https://github.com/blueimp/jQuery-File-Upload/wiki
You can find the answer to your specific need here
Returning and displaying errors.
In my LoadController/uploda action, I'm opening the file which has been uploaded and doing some validation on the actual contents of the file.
If I find errors, how do I send show those errors to the user?
Thanks
Russell
Thanks
Thanks a lot for this extension!
Upload Multiple files
Bundle of thanks for providing that extensions, thanks again and again
Issues with upload
hi there
This extension is great as people say but I am extremely frustrated by no help at forums over stackoverflow and Yii forums. Also I may be wrong but documentation is poor it should be detailed.
Secondly you would say try demo out ......And demo does not work either it does not uploads files just shows progress bar for 1-2 seconds and then vanishes.
I posted question and waited for whole 1 day and still no answer
http://www.yiiframework.com/forum/index.php?/topic/27918-upload-image-with-image-title/
@afnan
hi there This extension is great as people say but I am extremely frustrated by no help at forums over stackoverflow and Yii forums.
This has nothing to do with the current extension. Its normal that many people over stackoverflow and forum have no experience with the current extensions. I can not understand why you mention this at all
Also I may be wrong but documentation is poor it should be detailed.
The extension is open source and you contribute to it by giving a more details documentation. So go and do it.
I posted question and waited for whole 1 day and still no answer
Why do you thing this is related to the extension?
@afnan
Hi afnan,
I'm sorry that no one replied to your post.
I order to receive better support, you may post to the extension forum thread, which I will receive a notification for. I don't log into the forums often. so I didn't know about your random thread.
If you are having trouble with the demo, It might be your local configuration, as the demo was tested before being uploaded, and no one else has mention issues with it before.
I would also recommend, to investigate a little more, before posting a question. in the resources section of this extension, there is a Wiki that answers many common questions, and has several examples, including one to yours.
Breaks jQuery ui and Callbacks don't work
also..
list($name, $id) = $this->resolveNameID();
if (isset($this->htmlOptions['id'])) { $id=$this->htmlOptions['id']; } else { $this->htmlOptions['id']=$id; }
xupload inside Cjuidialog widget
is that possible to use this widget inside a Cjuidialog widget
@riyas
try http://www.yiiframework.com/forum/index.php/topic/21284-xupload-update/page__view__findpost__p__143349
Overwriting
I have the 0.2 version of your uploader is it ok if I overwrite the old XUploadAction with the new one?
@laupkram
It is not backwards compatible. the jquery plugin changed a lot.
Donwloading index.php in IE 8 and lower
when I'm using your uploader in Internet Explorer 8 and lower the uploader opens my download dialog downloading the index.php
thumbs not displayed
First of all... great extension! Many thanks for that. If it wasn't for this extension I wouldn't even know about this great jQuery plugin. Unfortunately, I have a minor problem with the thumbs that are not displayed when using this demo/plugin; however when using the original jQuery demo the result is slightly different...
Mac/Safari:
jQuery demo: after drop: thumbs no
jQuery demo: after upload: thumbs ok
vs
this demo: after drop: thumbs no
this demo: after upload: thumbs no
Mac/Firefox:
jQuery demo: after drop: thumbs ok
jQuery demo: after upload: thumbs ok
vs
this demo: after drop: thumbs ok
this demo: after upload: thumbs no
It doesn't seem to be a path issue because the images are uploaded properly and the link to the full-size image is working, too; only the thumbs won't show. Is this a matter of platform/browser or jQuery version (using 1.7.1)? Or am I missing something else?
Thanks for help.
@yiidf
Thanks for your words, they are very much appreciated, but please use the forum for support.
The reason the thumbs are not working in this demo, its because I didn't include the required files/logic, if you want to have thumbs, take a look at How to use image resizing functionality with the basic plugin
lost css
It works fine in the demo.
But each time I put it in my project.
no css will appear.... any ideas?
@jzhong5
Styles are given by bootstrap CSS, styling is out of the scope of the extension, you can style the widgets any way you like, if you want the same styles as the demo check this post
destination file name ?
what 's the destination file name . how can i get it ?
there is not a way to get dest file path ! unless you expose it as a XUploadAction's public variable . we often save it to database .
you should give this permission to us , but as your manners .
@yiqing95
You can always create your own upload action, XUploadAction is just basic upload functionality.
Please use the forums for support.
And please try not to yell at me :)
Elemental Question.
Hi, I have an elemental question...
What type is the attribue that hold the image, is the image path ? or the image data? some kind of blob data type ??
I'm new to this matter. I want to add images to peoples table..
Best Regards
for resizing thumb nail
go to download.php inside extensions/view/download.php ---> there is an
<a href="something" <img src="{% something %}" /> </a>
please give height width parameters...
i m newbie ..please like me i can give some answers
hi dears go to download.php there u can find the target file name...or go to xupload action there also u can change file name and target folder...if anyone got help by this like me or comment...i m new to yii and to this type of forums...
hi xNicox
the image is not storing in to the database...it stores to some files that u can search in the application folder.sometimes named uploads or create that folder in the application root folder in the name->means www/testdrive/uploads
hi @yiqing95
hi go for extensions/actions/xuploadactions u ll find the controller and the destination..or u can edit the extensions/xupload/view/download .php and put ur target folder.the destination file is some what named uploads..if such a file does not exists in the application root folder www/testdrive/uploads create it.the file will be uploaded to that folder..
plz encourage me by likes or comment...i m a newbie to yii and these types of forums...
I get a error Plz help me
Property "xupload.url" is not defined.
My Code is:
$this->widget('xupload.XUpload', array( 'url' => Yii::app()->createUrl("site/upload"), 'model' => $model, 'attribute' => 'file', 'multiple' => true, ));
@Rajib Rakhmit
Not sure what the problem its, why does it says "xupload.url" in lowercase?
Please use the forum for this kind of questions
json return value expected,key 'files' expected
I replaced assets with the newer version.Files get uploaded but the callback gives an error.Looked at the demo and now it seems that the plugin expects the json indexed by files,like so
echo json_encode(array('files'=>array( array( 'name' => $model->{$this->displayNameAttribute}, 'type' => $model->{$this->mimeTypeAttribute}, 'size' => $model->{$this->sizeAttribute}, 'url' => $this->getFileUrl($model->{$this->fileNameAttribute}), 'thumbnail_url' => $model->getThumbnailUrl($this->getPublicPath()), 'delete_url' => $this->getController()->createUrl($this->getId(), array( '_method' => 'delete', 'file' => $model->{$this->fileNameAttribute}, )), 'delete_type' => 'POST' ))));
After fixing that,the callback gave no error.Yet,the uploaded preview images are the full images by default.Still more editing to do,to make it work.
re: json return value expected,key 'files' expected
@drumaddict: if you can post your issue to the Github repo / add a pull request, would love to get those bugs fixed ...
In mac it needs write access on parent folder of where you are uploading
Great extension. thanks Asgaroth.
After start uploading , the photo is displaying in big size, any option to display it as in the preview? before clicking on start upload?
Does nothing
The demo looks great, but it doesn't do a lot when I installed it.
I added the widget to my form as directed above and the buttons rendered on the page. I hit "Add files" which opened a file dialog, chose a file, and hit "Open".
The dialog closed and nothing else happened. No error messages, no network requests, nothing. Without an error message, it's a bit hard to debug - any ideas what's wrong, or at least a clue where I should look?
@happyjim
Did you add in the upload action to your controller actions array? Probably worth starting there if you haven't. If you do, you should get some errors back from the server's Ajax response. If you need more help though, it's better to discuss on the forum.
error
i am able to bring up the extension, but when i add files the files are not showing up, any suggesstion, this one is also not saving in my upload folder.
Any changes required with dbsession?
Asgaroth,
I think this is the only thing I need to fix with xupload before it is working perfectly.
I have enabled db session in the main.php with below code, then multiple files state is not maintaining.
Code causing error :
$userFiles = Yii::app()->user->getState($this->stateVariable, array());
so it is throwing error in firebug and not deleting all the files.
Do I need to modify anything to use db sesssion?
@venuk
Not that I know of, that line should't throw any error, please ask in the forum, and provide all relevant information.
no doubt its awesome
good and nice extension
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
Does this extension work with IE ?
does the latest version work with IE 9+ ?
RE: not working in IE9
It works for me in IE10. Does it work for anyone with IE9?
RE: not working in IE9
Pretty sure uploads are working fine on our system for IE 9 (haven't tested IE 10 yet)
Great work!
Love this extension. Thanks!!!
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
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?
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.
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).
How to view uploaded file
how we can show file was uploaded??
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
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.
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
@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
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?
@a.abdelaziz.eg
Try the forum, there may be more people there that can help you.
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
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 ...
Thanks!
This is great extension, thank you!!!
yii2
Hi, is there a version for yii2 ?
Update jquery file Upload with last version
Hi dear,
please update this extension with last version of jquery plugin.
thx.
Good job!
The best extension for upload!
yii 1.16 not working
jquery.fileupload-ui.js:89
Uncaught TypeError: Cannot read property 'options' of undefined
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.