PDA

View Full Version : Ext.ux.Plupload[Panel|Button] (file uploader)



Kannabismus
28 Apr 2010, 5:09 AM
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
4 May 2010, 6:32 AM
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
5 May 2010, 5:27 AM
Hi Kannabismus

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

galdaka
5 May 2010, 10:39 PM
Is posible only a Ext.ux.PluploadButton demo?

Greetings,

kisscool82
6 May 2010, 4:11 AM
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
6 May 2010, 12:20 PM
I can't get it work under desktop mode. Anyone tried it?

Bulle Bas
13 May 2010, 7:09 AM
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
8 Jun 2010, 1:25 AM
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
8 Jun 2010, 10:57 AM
nice works. Thanks for sharing

evertonce
12 Jun 2010, 8:40 PM
tanks my friend

juljupy
22 Jun 2010, 2:18 PM
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
14 Jul 2010, 4:47 AM
admirable - excellent work

sosy
24 Jul 2010, 12:51 AM
I like it! Put it to my favorites.. thnx

senacle
27 Jul 2010, 4:57 AM
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
2 Aug 2010, 12:43 PM
Another bug; try collapsing and expanding the panel and add an file to upload; the file will be added numerous times.

imm
9 Aug 2010, 5:42 AM
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
9 Aug 2010, 5:50 AM
Sorry. It's bad idea. It works only with flash runtime. =(

kirillka
21 Aug 2010, 5:11 AM
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
22 Aug 2010, 5:46 AM
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
25 Feb 2011, 5:13 AM
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
19 Mar 2011, 2:56 PM
I love this, awesome work.

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

fruitwerks
27 Mar 2011, 11:50 AM
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
6 May 2011, 12:55 AM
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
12 Aug 2011, 4:30 AM
Nice work! Has anybody updated this to ExtJs 4?

bee
23 Aug 2011, 9:31 AM
I am looking for the same. in extjs 4 please

pmiguelmartins
22 Dec 2011, 8:32 AM
Any example with ExtJs 4
please

Pedro Martins

ontho
31 Dec 2011, 8:03 AM
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
23 May 2012, 11:40 PM
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
29 May 2012, 3:11 AM
Here, I upload the script (with one fix in renderStatus) in github gist: https://gist.github.com/2827463

lopezdonaque
6 Aug 2013, 7:40 AM
I have created a Fiddle to test it:

http://jsfiddle.net/lopezdonaque/jWPLH/ (http://jsfiddle.net/lopezdonaque/jWPLH/)

raminbp
1 Feb 2014, 4:15 AM
ux download links are broken

jnjc
2 Feb 2014, 5:04 PM
I think I have found it on GIT. Check it out here:

https://bitbucket.org/lombardo/ext.elna.ux/src/08b1c72951a7/src_plupload/?at=default

Someone has also created a fiddle example here (you might be able to pull some code from it):

http://jsfiddle.net/lopezdonaque/jWPLH/

HTH,
JC