Ext.ux.Plupload[Panel|Button] (file uploader)

[Kannabismus]

The extension to upload files using Plupload.

It features:

Multiple files selection (of course).
Several runtimes (Flash, Silverlight, Google Gears, BrowserPlus, HTML5, HTML4) with fallback in order you specify.
Drag&Drop (HTML5, Gears, BrowserPlus runtime).
Client side image resize
See http://www.plupload.com for more info.


There are two extensions: Ext.ux.PluploadPanel and Ext.ux.PluploadButton which creates window with the panel for you.

Downloading:

Check out demo (http://adtim.ru/extjs/ux_plupload)

ext.ux.plupload.v0.1.full.zip (http://adtim.ru/extjs/files/ext.ux.plupload.v0.1.full.zip) - Get extension with Plupload 1.2.2
ext.ux.plupload.v0.1.zip (http://adtim.ru/extjs/files/ext.ux.plupload.v0.1.zip) Get extension only

Setup:
You must have Plupload, ext.ux.plupload.js, ext.ux.plupload.css and optionally DataView-more.js from ExtJS examples.



<!-- include DataView plugins to enable drag selection of queue -->
<script type="text/javascript" src="/js/ext-3.2.0/examples/ux/DataView-more.js"></script>

<script type="text/javascript" src="/js/plupload/js/gears_init.js"></script>
<script type="text/javascript" src="http://bp.yahooapis.com/2.7.1/browserplus-min.js"></script>
<script type="text/javascript" src="/js/plupload/js/plupload.full.min.js"></script>

<!-- ! EDIT icon path in css -->
<link rel="stylesheet" type="text/css" href="/js/ext.ux.plupload.css" />
<script type="text/javascript" src="/js/ext.ux.plupload.js"></script>


Xtypes are 'pluploadpanel' and 'pluploadbutton'

Ext.ux.PluploadPanel



var myPanel = new Ext.ux.PluploadPanel({
url: '/path/to/upload/handler',
//the only required parameter

runtimes: 'gears,flash,silverlight,html5,browserplus,html4',
// first available runtime will be used

multipart: true,
multipart_params: { param1: 1, param2: 2 },
// works as baseParams for store.
// Accessible via this.uploader.settings.multipart_params after init
// multipart must be true

max_file_size: '10mb',

resize: {width: 640, height: 480, quality: 60},

flash_swf_url: '/js/plupload/js/plupload.flash.swf',
silverlight_xap_url: '/js/plupload/js/plupload.silverlight.xap',
// urls must be set properly or absent, otherwise uploader fail to initialize

filters: [ {title : "Image files", extensions : "jpg,JPG,gif,GIF,png,PNG"},
{title : "Zip files", extensions : "zip,ZIP"},
{title : "Text files", extensions : "txt,TXT"}
],

runtime_visible: true, // show current runtime in statusbar

// icon classes for toolbar buttons
addButtonCls: 'silk-add',
uploadButtonCls: 'silk-arrow-up',
cancelButtonCls: 'silk-stop',
deleteButtonCls: 'silk-cross',

// localization
addButtonText: 'Add files',
uploadButtonText: 'Upload',
cancelButtonText: 'Cancel upload',
deleteButtonText: 'Remove',
deleteSelectedText: '<b>Remove selected</b>',
deleteUploadedText: 'Remove uploaded',
deleteAllText: 'Remove ALL',

statusQueuedText: 'Queued',
statusUploadingText: 'Uploading ({0}%)',
statusFailedText: '<span style="color: red">FAILED</span>',
statusDoneText: '<span style="color: green">DONE</span>',

statusInvalidSizeText: 'Too big',
statusInvalidExtensionText: 'Invalid file type',

emptyText: '<div class="plupload_emptytext"><span>Upload queue is empty</span></div>',
emptyDropText: '<div class="plupload_emptytext"><span>Drop files here</span></div>',

progressText: '{0}/{1} ({3} failed) ({5}/s)',
// params are number of
// {0} files sent
// {1} total files
// {2} files successfully uploaded
// {3} failed files
// {4} files left in queue
// {5} current upload speed

listeners: {
beforestart: function(uploadpanel) {
uploadpanel.uploader.settings.url = '/path/to/upload/handler?_runtime=' + uploadpanel.runtime;
},
uploadstarted: function(uploadpanel) {

},
uploadcomplete: function(uploadpanel, success, failures) {
if ( success.length ) {
myStore.reload();
}
}
}
});


You can access Plupload object via myPanel.uploader property

Ext.ux.PluploadButton extends Ext.Button with params:



var myButton = new Ext.ux.PluploadButton({
text: 'Upload files',
window_width: 640,
window_height: 480,
window_title: 'Upload files',
clearOnClose: false, //clear queue after window is closed (actually window is hidden )
upload_config: { // Ext.ux.PluploadPanel config object (see above)
url: '/path/to/upload/handler',
...
}
});


Pluploadpanel accessible via myButton.uploadpanel

Hope it helps.

[kisscool82]

Nice work, thanks for sharing !

There's a little bug with cursor style on the "Add files" button with HTML5 runtime.

I'd like to attach a form for each file upload like the SwfUpload extension :
http://www.extjs.com/forum/showthread.php?87910-Ext.ux.swfbtn-SwfUpload-2.2.0-ext-3.0-Flash-10-features&highlight=swf+button

How can I do that ?

[tohir]

Hi Kannabismus

Could you please post the source code of the PHP file for uploading. Well done in any case, really cool work

[galdaka]

Is posible only a Ext.ux.PluploadButton demo?

Greetings,

[kisscool82]

Hi Kannabismus

Could you please post the source code of the PHP file for uploading. Well done in any case, really cool work

There's a php example in the full zip file.
Just a basic upload management.

[Korex]

I can't get it work under desktop mode. Anyone tried it?

[Bulle Bas]

Uploading works fine, but the ui reports the uploads have failed. I do however return

{"jsonrpc" : "2.0", "result" : null, "id" : "id"}

the same response as the demo on plupload.org.

What response makes your extension think the upload succeeded succcesfully?


ANSWER TO MY OWN QUESTION:
{success: true}

So you shouldn't use the output of the php example in the zip.

[BigTitus]

Very good work, thanks for sharing!

Has anyone tried the HTML5 runtime for Safari or Chrome? Everything seems to work fine on client side, but I don't receive a file on server.

Any ideas?

[wemerson.januario]

nice works. Thanks for sharing

[evertonce]

tanks my friend

[juljupy]

Hi, thanks for your contribution, i have a question, how can i pass extra params for each file i upload. For example if i want to send a custom name for each file, how can i do that?, thanks.

[grgur]

admirable - excellent work

[sosy]

I like it! Put it to my favorites.. thnx

[senacle]

Nice !

I've found 2 bugs :
The progressbar isn't full displayed when the plupload panel is inside an item which as the 'form' layout config
The Add button isn't in 3D when the mouse is over it

Some fix ?

[Scorpie]

Another bug; try collapsing and expanding the panel and add an file to upload; the file will be added numerous times.

[imm]

The Add button isn't in 3D when the mouse is over it
You can move <div> with pluploader's button to element of "addButton".

listeners: {
afterrender: function(){
this.tbar.child(".plupload").appendTo(this.getTopToolbar().getComponent('addButton').el)
}
}

It works in recent browser except IE8 (but IE7 still works).

[imm]

Sorry. It's bad idea. It works only with flash runtime. =(

[kirillka]

Good evening. Can anyone upload work sample, including js, css and php files? Cause i can't do the same thing like here (http://adtim.ru/extjs/ux_plupload). I've downloaded all required files (js and css) but when i click 'upload' appear ERROR. Please, help me. Thanks.

[imm]

In my test on ruby i wrote


post '/uploader' do
name = params["name"]
root = params["root"]
file = params["file"][:tempfile] if params["file"]
if file
File.open(File.join('public'+root,name),'w') do |f|
f.puts file.read
end
return {"jsonrpc" => "2.0", "result" => nil, "success" => true}.to_json
else
return {"jsonrpc" => "2.0", "result" => nil, "success" => false}.to_json
end
end

I used sinatra.

Perhaps it will help =)

[Felicitus]

What's the license for this? I'd love to put the code on GitHub to make modifications, but I'm not sure if I'm allowed to.

[fruitwerks]

I love this, awesome work.

I think I missed something - and I have read this thread twice... where are the settings?

[fruitwerks]

I figured it out, but I have run into two issues..

I had a plupload panel in a tab, if you click on another tab, the uploading stops immediately, I also tried in a collapsible window, same thing on collapse.

I also want to disable image resizing - leaving out the resize param returns failed every time.

Thanks!

[salamo]

To fix the cursor style on the "Add files" button with HTML5 runtime, you can add these params to the input tag: <input type="file"> in "plupload.full.min.js"


size="1" style="width:100%; right: 35px; position: absolute; cursor:pointer; font-size: 16px;"

The details are explained here:

http://tiagoe.blogspot.com/2010/01/css-style-typefile-tags.html

[wuschba]

Nice work! Has anybody updated this to ExtJs 4?

[bee]

I am looking for the same. in extjs 4 please

[pmiguelmartins]

Any example with ExtJs 4
please

Pedro Martins

[ontho]

Please have a look at:[/URL]
http://www.sencha.com/forum/showthread.php?168999-Ext.ux.panel.UploadPanel-for-ExtJs-4-(file-uploader)-with-plupload (http://www.sencha.com/forum/showthread.php?168999-Ext.ux.panel.UploadPanel-for-ExtJs-4-(file-uploader))

or at:
[URL]http://www.thomatechnik.de/webmaster-tools/extjs-plupload/

for an example with ExtJs 4.

[miclys]

Could somebody reupload files ext.ux.plupload.v0.1.full.zip (http://adtim.ru/extjs/files/ext.ux.plupload.v0.1.full.zip) and ext.ux.plupload.v0.1.zip (http://adtim.ru/extjs/files/ext.ux.plupload.v0.1.zip) from first page?
please

[rv77ax]

Here, I upload the script (with one fix in renderStatus) in github gist: https://gist.github.com/2827463