PDA

View Full Version : [2.x] Ext.ux.SwfUploadPanel 0.3 Beta



mikegiddens
24 Nov 2007, 11:53 AM
Extension
LastModified: March 6th, 2008

The SwfUploadPanel widget is a control, where the user can pick multiple files and upload them en a queue style fashion.

Released for ExtJS 2.x.

Demo:
FF with Firebug
http://www.silverbiology.com/ext_samples/SwfUploadPanel/uploaddemo.php?debug=true

IE no Firebug
http://www.silverbiology.com/ext_samples/SwfUploadPanel/uploaddemo.php

SVN:
- https://svn2.hosted-projects.com/mikegiddens/extjs_ux/swfuploader/tags/0.4/
- https://svn2.hosted-projects.com/mikegiddens/extjs_ux/swfuploader/trunk

user: extjs
pass: readonly

If you wish to contribute just PM me.

Usage

* Download ExtJS 2.x library
* Download Ext.ux.SwfUploadPanel library
* Unpack ExtJS library to a folder
* Unpack http://www.silverbiology.com/ext/plugins/SwfUploadPanel/Ext.ux.SwfUploadPanel.js.zip to the same folder! (I like to use a plugins subfolder)

Changelog
* Ver.: 0.4 Upgraded to SwfUpload 2.0.2
* Ver.: 0.3 (beta) Fixed the progress bar to be dynamic 100%
- Fixed the postParam to work correctly now just past the (name, value)
- added a few events so you can bind some listeners ie. swfUploadLoaded, fileUploadComplete, queueUploadComplete
* Ver.: 0.2 (beta) Added Stop Upload, Remove Files from Queue
* Ver.: 0.1 (beta) Basic MultiFile Upload

SilveR316
24 Nov 2007, 12:56 PM
(Note: Horrible Documentation and Examples)


Tell me about it. I'm trying to write an upload field (really simple field that you can stick in your form and select multiple files) and the docs for it are horrible.


Nice job on the implementation, I might have to borrow some ideas for my ux.

Foggy
26 Nov 2007, 9:48 AM
Hi mikegiddens
Very impressive work but i miss the html file wich is calling the upload...
And a live demo would be very nice ;)
Anyway, thanks sharing...

Greets Foggy

mikegiddens
26 Nov 2007, 10:38 AM
Sorry I changed the main msg and forgot the link:

FF with Firebug
http://www.silverbiology.com/ext_samples/SwfUploadPanel/uploaddemo.php?debug=true

IE no Firebug :)
http://www.silverbiology.com/ext_samples/SwfUploadPanel/uploaddemo.php

Foggy
26 Nov 2007, 11:04 AM
Nice, thanks for update :)

BTW:

* Go to the [ext folder]/examples/color-picker/ folder and launch color-picker.ux.html in a browser.
I really should launch color-picker.ux.html? ;)

Foggy
26 Nov 2007, 1:46 PM
Hey
I like your upload panel really much... So i have played with it this evening :)
Maybe you are interested about the removeColumn Plugin that is growed in this way...

Plugin:

RemoveColumn = function(){
var grid;

function getRecord(t){
var index = grid.getView().findRowIndex(t);
return grid.store.getAt(index);
}

function onMouseDown(e, t){
e.stopEvent();
var record = getRecord(t);
grid.getStore().remove(record);
grid.suo.cancelUpload(record.id);
}

Ext.apply(this, {
width: 22,
fixed: true,
id: 'remove-upload-col',

renderer: function(){
return '<div class="SwfUploadElement-remove"></div>';
},

init : function(xg){
grid = xg;
store = grid.getStore();
grid.on('mousedown', function(){
var view = grid.getView();
Ext.each(Ext.query('div.SwfUploadElement-remove', view.el.dom), function(el) {
var cmp = Ext.get(el);
if (!cmp.hasClass('is-activated')) {
cmp.addClass('is-activated');
cmp.on('mouseup', onMouseDown);
}
});
});
}
});
};



CSS:

.SwfUploadElement-remove {
background-image:url(delete.png);
height: 16px;
width: 16px;
}

Use:

var removeColumn = new RemoveColumn();

var cm = new Ext.grid.ColumnModel([
removeColumn
, {id:'name', header: "Dateiname", dataIndex: 'name'}
, {id:'size', header: "Gr&ouml;sse", width: 80, dataIndex: 'size', renderer: this.formatBytes }
, {id:'status', header: "Status", width: 85, dataIndex: 'status', renderer: this.formatStatus }
]);

config = config || {};
config = Ext.apply(config || {}, {

store: store
, plugins: [removeColumn]
, cm: cm
...

Just my 2 Cents ;)
Hope its useful, if i could helb by any other stuff, just say it ;)

mikegiddens
26 Nov 2007, 2:25 PM
Foggy thanks for the heads up. I do listen to the keypress del that deletes row if it is not in the mode of uploading. It is not a visual thing but it works well. I will consider the remove col. Might help for the users.

Update: I have been fixing the addPostParams. it seemed that it wasn't working. I have fixed that and also added 2 new listeners for when the flash is loaded so you can do an on("swfUploadLoaded" to add custom params and also a event called fileUploaded which returns the json data from the server when the file is processed to do js stuff. I am planning to add more listeners so the panel can be more interactive but currently doing things that are required for me to get it into production. It seems to be working well now but have to sleep more. Will post revision in next 24 hrs.

One issue I have been trying to solve is:
http://extjs.com/forum/showthread.php?t=19200

al_capone
27 Nov 2007, 1:33 AM
something wrong is in your js source code

this.store.remove(this.store.getById(file.id)) has no properties in SwfUploadPanel.js (line 281)

only when uploadig from dialog sample

george.antoniadis
27 Nov 2007, 8:25 AM
Woa this plugin is nice :D
Great job mike! :)


I couldn't make the damn addPostParam to work...
From what I can see in the SWFUpload the addFileParam needs 3 params (file, name, value) but you only send 2 (name, value)
but I still ain't sure if that's file specific or not... (indeed swf docs suck)


Ext.getCmp('swfuploader').suo.setPostParams({'path': './' });

this seems to play nice, but I think it's designed to overwrite the set params.

ps. doesn't anchoring work with progress bars?

george.antoniadis
27 Nov 2007, 8:51 AM
When setting remove_completed to true it gives out an error that can be stopped by removing the .defer(100) in this.store.remove(this.store.getById(file.id)).defer(100); (swfuploadpanel.js) :/ just a note

mikegiddens
27 Nov 2007, 9:13 AM
george I have posted a revision from yesterday to fix some issues and enhance some others. There are still some things missing that I will eventually get to but it works for what I needed to develop it for.

I will also try and get some more examples too when I have some free time. hmmmm

Anyway the progress bar is now more flexiable and does not require a panel width in the config.

- The defer was removed. forgot to take that out in the zip. sorry.
- The addPostParam(name, value) is now working correctly.

Anything else just let me know. Thanks for the compliments. It is always encouraging.

Also one known issue that I ran across with the uploader is with htaccess security. It does prompt me but it seems to lose the file data when it finishes. Not sure if there is a fix for that and is presenting a problem since I am using it for a secure area. grrrrr... I will let yall know if I find a workaround.

-Mike

seancallan
27 Nov 2007, 1:55 PM
Mike,

first off, amazing widget. I've been working on trying to integrate SWFUpload into some of my code and it's been a hassle considering they have 4 versions and almost 0 documentation.

I do get an error when I try to add the widget to a panel of mine



items: [
new Ext.form.TextField({
id: config.id + '_title',
allowBlank:true,
fieldLabel:'URL',
style: 'width:100%',
name: 'url'
}),
new Ext.ux.SwfUploadPanel({
title: 'File Select',
renderTo: 'grid',
width: 500,
height: 300,
upload_url: '../upload/',
post_params: { id: this.id},
debug: true,
flash_url: "../../swf/swfupload.swf",
single_file_select: false,
confirm_delete: false,
remove_completed: false,
})
]

Error I get in FB is:
ct has no properties
[Break on this error] this.el = ct.createChild({
ext-all-debug.js (line 15621)

Maybe I'm doing something wrong I'm not sure, still new to Ext.

mikegiddens
27 Nov 2007, 2:08 PM
seancallan,

Thanks for the compliments. The renderTo might be the problem if you don't have a div id called "grid" also the upload url I was never able to asign relative. Try using an absolute path to your upload file.

Also you don't need to include these params since teh default is false.
single_file_select: false,
confirm_delete: false,
remove_completed: false,

george.antoniadis
28 Nov 2007, 12:02 AM
From what I have gathered the upload_url must be relative to the swfupload.swf and NOT your script page...

Also you might wanna try sticking your whole script in an Ext.onReady event cause once the SwfUploadPanel is initialized it will try to find the div to render the flash element.
add debug: true and check in your FB if the flash element is created correctly. (swfupload has a pretty verbose debug system)

mike thanks a million for all this, it's really great :D

ps. isn't there any known way to make the custom event listeners play like:



listeners: {
'swfUploadLoaded': function(){
alert('test');
Ext.getCmp('fileGrid').store.reload();
}
}
instead of .on('swfUploadLoaded')...? :/

mikegiddens
28 Nov 2007, 12:50 AM
I was playing with that but have no idea how the config applys the listeners and never could get it to work directly. I had to do the swgrid.on(".... stuff to get it to attach the listener to the event. If anyone knows how to fix this so it can be inline I would be have to change the code.

franckxx
28 Nov 2007, 4:31 AM
hi,

I've try to install your "upload dialog"
I think i do something wrong... :(

http://img103.imageshack.us/img103/5239/sanstitre1wb7.jpg

The upload progress stay "uploading", and nothing be uploaded.

Can you help me ? :-?

thx for share your work ;)

mikegiddens
28 Nov 2007, 4:36 AM
franckxx

use the debug mode to see if you are getting an error from your response text. I return "{success: true}" in my upload.php file so for best practice but also check to see if your upload url is an absolute path. I had problems with it when I tried to make it relative.

ie: upload_url: 'http://www.yourdomain.com/path/upload.php',

Foggy
28 Nov 2007, 5:20 AM
Also one known issue that I ran across with the uploader is with htaccess security. It does prompt me but it seems to lose the file data when it finishes. Not sure if there is a fix for that and is presenting a problem since I am using it for a secure area. grrrrr... I will let yall know if I find a workaround.
Hm, thats funny to hear, i have some similar problems but with a php session on server side.
The requests from the swfuploader has a new (empty) session. First, i tought maybe my session is not in a cookie and if it is maybe it should work...
But session.use_only_cookies in php.ini seems doesent take any effect.
Maybe you could send me a link to the right "sfwupload" download you use in your extension, i think theres something strange in the flashfile or thats a normal thing if you use js and flash so flash is opening a new connection...
Dont konw really yet but i think i can figure this out if i have the exact .fla to test with it...

Edit: did you use the v 7.0-beta-3?

george.antoniadis
28 Nov 2007, 5:45 AM
never really played with htaccess security (I think we are talking about htpasswd right http://httpd.apache.org/docs/1.3/programs/htpasswd.html ?)

can't you access is over
http://user:password@protected.domain/dir/file.php
?

mikegiddens
28 Nov 2007, 5:45 AM
Foggy I am using the 7 beta 3 and it comes with the source too so you can find it there. As for the security stuff it is strange. I am using a LAMP system and when the security prompt is accepted the first file is processed to the upload.php script and the queue continues without any more prompts until the session is closed. The tmp file is getting put and the information is being passed but I am doing some image manipulation and imagecreatefromjpeg errors out saying the jpg is not a valid file. I repeat the process right after or the second on ein the queue gets processed just fine even if it is the same image. I have not gone into too much detail to see exactly what is occurring and since I know nothing about action scripts I stay away from fla files. haha.

I have not looked into the session to see if there is anyway to be one and the same.

Foggy
28 Nov 2007, 6:14 AM
Hey mike
Thanks for specify your version...
So, how i understand this, the uploads would be processed in this as function

private function BuildRequest():URLRequest {
// Build the Post values
var key:String;
var post:URLVariables = new URLVariables();
for (key in this.uploadPostObject) {
this.Debug("Global Post Item: " + key + "=" + this.uploadPostObject[key]);
if (this.uploadPostObject.hasOwnProperty(key)) {
post[key] = this.uploadPostObject[key];
}
}
var file_post:Object = this.current_file_item.GetPostObject();
for (key in file_post) {
this.Debug("File Post Item: " + key + "=" + this.uploadPostObject[key]);
if (file_post.hasOwnProperty(key)) {
post[key] = file_post[key];
}
}

// Create the request object
var request:URLRequest = new URLRequest();
request.method = URLRequestMethod.POST;
request.url = this.uploadURL;
request.data = post;

return request;
}
So in my opinion
var request:URLRequest = new URLRequest(); does open a brand new request without any cookies or other login information. I think its a similar effect if you perform a login in ie and open the same page after in FF, so you have to login too with your ff of course...
How i said before, im not sure about that stuff. Maybe in my case it should help to set up the upload url with the current session_id. But i dont like that idea :)
But with a htaccess it could be really hard i think...

I think thats is really the problem, some debug info said:

The normal requests over the ext view:
[HTTP_USER_AGENT] => Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.8.1.10) Gecko/20071115 Firefox/2.0.0.10

The upload requests containing Filedata
[HTTP_USER_AGENT] => Shockwave Flash

So how i said, in my case its easy (not very nice/good) to set up my upload_url with the session id. A automated htaccess login is very hard...
In php i know some solutions, but in flash, hui ui ui... :-?

One solution would be to use flash only for selecting the files and perform the upload in ajax manner with a iframe like the most other upload extension does it...

DigitalSkyline
28 Nov 2007, 2:36 PM
hmm... that's interesting... I just assumed that flash would send the headers along with the request... I have not tested but its always worked that way in the past... anyways...

I have a different issue, I haven't even got to the point of actually uploading :) its a quickie.

I have errors in firebug so I just commented these out:
try {
// this.progress_bar.setWidth(this.bbar.getWidth() - 5);
// Ext.fly(this.progress_bar.el.dom.firstChild.firstChild).applyStyles("height: 16px");
} catch (ex1) {

}

And it works fine so far without them... (again, in my 10 minutes using it)

JeffHowden
28 Nov 2007, 5:10 PM
You probably have "break on all errors" checked. Uncheck that and not only will it not break on those lines, but it won't report any errors either (cause of the try/catch).

Foggy
29 Nov 2007, 2:10 AM
I could solve my php session problem with a new login call in the actionscript method.
My Method is now looking like this:

private function BuildRequest():URLRequest {
// Build the Post values
var key:String;
var file:URLVariables = new URLVariables();
for (key in this.uploadPostObject) {
this.Debug("Global Post Item: " + key + "=" + this.uploadPostObject[key]);
if (this.uploadPostObject.hasOwnProperty(key)) {
file[key] = this.uploadPostObject[key];
}
}
var file_post:Object = this.current_file_item.GetPostObject();
for (key in file_post) {
this.Debug("File Post Item: " + key + "=" + this.uploadPostObject[key]);
if (file_post.hasOwnProperty(key)) {
file[key] = file_post[key];
}
}

var post:URLVariables = new URLVariables();
post['controller'] = 'MainApp';
post['action'] = 'login';
post['user'] = 'user';
post['pass'] = 'pass';

var loader:URLLoader = new URLLoader();

var login_request:URLRequest = new URLRequest();
login_request.method = URLRequestMethod.POST;
login_request.url = 'http://localhost/business.php';
login_request.data = post;
loader.load(login_request);


// Create the request object
var request:URLRequest = new URLRequest();
request.method = URLRequestMethod.POST;
request.url = this.uploadURL;
request.data = file;

return request;
}
If you can see, i just do a new login before the file uplaod would start. Of course you have to get the username and passwort from your running ext applikation, but anyway it should show the right way. But i still dont have any ideas for a htaccess login...

seancallan
29 Nov 2007, 11:19 AM
This may sound silly, but I was looking through the code and I notice how you use the variable `config` but when you apply to the superclass constructor you use `arguments` which isn't used previously.




Ext.ux.SwfUploadPanel = function(config){ ...

config = config || {};
config = Ext.apply(config || {}, {
store: store,
cm: cm
...
});



Ext.ux.SwfUploadPanel.superclass.constructor.apply(this, arguments);

seancallan
30 Nov 2007, 12:06 PM
I see a lot of people talking about the sessions on here so I figured I'd go ahead and shed what little insight I have on the matter.

I've been working with SwfUploader for awhile and after browsing their forums I came upon a similar post. It turns out that currently Flash doesn't send the session with the uploads but the issue only exists in Firefox. This required a decent amount of server side development to handle this issue because of the custom environment I'm working with.

I hope that sheds some light on the issue, not sure when/if the issue will be corrected.

DigitalSkyline
30 Nov 2007, 12:27 PM
So then it doesn't send the cookie and header information? I could probably send the session ID along with the querystring in that case.

seancallan
30 Nov 2007, 12:51 PM
Thats what I was planning on doing but I can't even see to get the extra post params to work like I had hoped and I'm trying to stay away from modifying the upload url if I can help it.



var sfu = new Ext.ux.SwfUploadPanel({
title: 'Dialog Sample',
width: 500,
height: 300,
border: false,
upload_url: '../upload/',
post_params: { 'repositoryPath': '/help:help/help:files' },
flash_url: "../swf/swfupload.swf",
remove_completed: true
});

Foggy
3 Dec 2007, 12:05 AM
I could probably send the session ID along with the querystring in that case.
Of course, that would solve the problem, but i think thats a bad solution, if i can get your session id, im able to login with your permissions on your web app. Thats the reason why i pass the username and password from Ext to swf and do a login in the swf again...

Here are my 2 debug files, if anyone is interested:

First is a normal request via Ext:

Session ID
65b7ba7e58669cd9d8ec721162991ec9


_FILES
Array
(
)


_REQUEST
Array
(
[controller] => DataNode
[basePath] => modules/dataNode/
[action] => getFolderContent
[folder] => publicDirectory/Dokumente/Beispieldokumente
)


_SERVER
Array
(
[HTTP_HOST] => localhost
[HTTP_USER_AGENT] => Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.8.1.10) Gecko/20071115 Firefox/2.0.0.10
[HTTP_ACCEPT] => text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
[HTTP_ACCEPT_LANGUAGE] => de-de,de;q=0.8,en-us;q=0.5,en;q=0.3
[HTTP_ACCEPT_ENCODING] => gzip,deflate
[HTTP_ACCEPT_CHARSET] => ISO-8859-1,utf-8;q=0.7,*;q=0.7
[HTTP_KEEP_ALIVE] => 300
[HTTP_CONNECTION] => keep-alive
[HTTP_X_REQUESTED_WITH] => XMLHttpRequest
[CONTENT_TYPE] => application/x-www-form-urlencoded
[HTTP_REFERER] => http://localhost/view/desktop.php
[CONTENT_LENGTH] => 129
[HTTP_COOKIE] => PHPSESSID=65b7ba7e58669cd9d8ec721162991ec9
[HTTP_PRAGMA] => no-cache
[HTTP_CACHE_CONTROL] => no-cache
[PATH] => C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\Programme\PHP-Gtk2
[SystemRoot] => C:\WINDOWS
[COMSPEC] => C:\WINDOWS\system32\cmd.exe
[PATHEXT] => .COM;.EXE;.BAT;.CMD;.VBS;.VBE;.JS;.JSE;.WSF;.WSH
[WINDIR] => C:\WINDOWS
[SERVER_SIGNATURE] => <address>Apache/2.2.6 (Win32) DAV/2 mod_ssl/2.2.6 OpenSSL/0.9.8e mod_autoindex_color PHP/5.2.4 Server at localhost Port 80</address>

[SERVER_SOFTWARE] => Apache/2.2.6 (Win32) DAV/2 mod_ssl/2.2.6 OpenSSL/0.9.8e mod_autoindex_color PHP/5.2.4
[SERVER_NAME] => localhost
[SERVER_ADDR] => 127.0.0.1
[SERVER_PORT] => 80
[REMOTE_ADDR] => 127.0.0.1
[DOCUMENT_ROOT] => D:/public_html
[SERVER_ADMIN] => admin@localhost
[SCRIPT_FILENAME] => D:/public_html/business.php
[REMOTE_PORT] => 1086
[GATEWAY_INTERFACE] => CGI/1.1
[SERVER_PROTOCOL] => HTTP/1.1
[REQUEST_METHOD] => POST
[QUERY_STRING] => controller=DataNode&basePath=modules/dataNode/&action=getFolderContent
[REQUEST_URI] => /business.php?controller=DataNode&basePath=modules/dataNode/&action=getFolderContent
[SCRIPT_NAME] => /business.php
[PHP_SELF] => /business.php
[REQUEST_TIME] => 1196266983
[argv] => Array
(
[0] => controller=DataNode&basePath=modules/dataNode/&action=getFolderContent
)

[argc] => 1
)

Second is a upload request from Flash

Session ID
a56ba9cd3b98ad620be7cef5f70fc66d


_FILES
Array
(
[Filedata] => Array
(
[name] => Blaue Berge.jpg
[type] => application/octet-stream
[tmp_name] => C:\Programme\xampp\tmp\php699.tmp
[error] => 0
[size] => 28521
)

)

_REQUEST
Array
(
[Filename] => Blaue Berge.jpg
[controller] => DataNode
[action] => uploadFile
[targetDir] => publicDirectory/Bilder/seppli
[basePath] => modules/dataNode/
[Upload] => Submit Query
)

_SERVER
Array
(
[HTTP_ACCEPT] => text/*
[CONTENT_TYPE] => multipart/form-data; boundary=----------ei4KM7ei4gL6GI3KM7gL6cH2cH2ei4
[HTTP_USER_AGENT] => Shockwave Flash
[HTTP_HOST] => localhost
[CONTENT_LENGTH] => 29532
[HTTP_CONNECTION] => Keep-Alive
[HTTP_CACHE_CONTROL] => no-cache
[HTTP_COOKIE] => PHPSESSID=a56ba9cd3b98ad620be7cef5f70fc66d
[PATH] => C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\Programme\PHP-Gtk2
[SystemRoot] => C:\WINDOWS
[COMSPEC] => C:\WINDOWS\system32\cmd.exe
[PATHEXT] => .COM;.EXE;.BAT;.CMD;.VBS;.VBE;.JS;.JSE;.WSF;.WSH
[WINDIR] => C:\WINDOWS
[SERVER_SIGNATURE] => <address>Apache/2.2.6 (Win32) DAV/2 mod_ssl/2.2.6 OpenSSL/0.9.8e mod_autoindex_color PHP/5.2.4 Server at localhost Port 80</address>

[SERVER_SOFTWARE] => Apache/2.2.6 (Win32) DAV/2 mod_ssl/2.2.6 OpenSSL/0.9.8e mod_autoindex_color PHP/5.2.4
[SERVER_NAME] => localhost
[SERVER_ADDR] => 127.0.0.1
[SERVER_PORT] => 80
[REMOTE_ADDR] => 127.0.0.1
[DOCUMENT_ROOT] => D:/public_html
[SERVER_ADMIN] => admin@localhost
[SCRIPT_FILENAME] => D:/public_html/business.php
[REMOTE_PORT] => 4643
[GATEWAY_INTERFACE] => CGI/1.1
[SERVER_PROTOCOL] => HTTP/1.1
[REQUEST_METHOD] => POST
[QUERY_STRING] =>
[REQUEST_URI] => business.php
[SCRIPT_NAME] => business.php
[PHP_SELF] => business.php
[REQUEST_TIME] => 1196266074
[argv] => Array
(
)

[argc] => 0
)
So in my opinion this is the same effect, if you access to a login site with your Internet Explorer and with your Firefox. You have to login with both browsers of course...

mzagzoog
3 Dec 2007, 9:52 AM
Hi,

Thank you for this widget...
I love it...

Can you please help to fix this?
I get the following error:
sp has no properties
apply(removeRows(grid), undefined, Object)ext-base.js (line 9)
[Break on this error] Ext={version:"2.0-rc1"};window["undefined"]=window["undefined"];Ext.apply=functi...

I am using this with desktop

my code is:


MyDesktop.uploadFile = Ext.extend(Ext.app.Module, {
id:'upload-win',
init : function(){
this.launcher = {
text: 'Upload Window',
iconCls:'icon-grid',
handler : this.createWindow,
scope: this
}
},

createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('upload-win');
if(!win){
win = desktop.createWindow({
id: 'upload-win',
title:'Upload Window',
width:740,
height:480,
iconCls: 'icon-grid',
layout: 'fit',
items: new Ext.ux.SwfUploadPanel({
title: 'Dialog Sample',
width: 500,
height: 300,
border: false,

// Uploader Params
upload_url: 'http://localhost/newstarworld/php_side/upload_example.php',
//upload_url: 'http://localhost/www.silverbiology.com/ext/plugins/SwfUploadPanel/upload_example.php'
post_params: { id: this.id},
file_types: '*.jpg',
file_types_description: 'Image Files',
debug: true,
flash_url: "./swf/swfupload.swf",
// single_select: true // Select only one file from the FileDialog

// Custom Params
single_file_select: false, // Set to true if you only want to select one file from the FileDialog.
confirm_delete: false, // This will prompt for removing files
remove_completed: true // Remove file from grid after uploaded.
})
});

}
win.show();
}
});

stever
6 Dec 2007, 5:59 PM
Extension
LastModified: 11/27/2007

Changelog

* Ver.: 0.3 (beta) Fixed the progress bar to be dynamic 100%
- Fixed the postParam to work correctly now just past the (name, value)
- added a few events so you can bind some listeners ie. swfUploadLoaded, fileUploadComplete, queueUploadComplete
* Ver.: 0.2 (beta) Added Stop Upload, Remove Files from Queue
* Ver.: 0.1 (beta) Basic MultiFile Upload

Where is version 0.3? Both the example site and the download zip say:

* @created 2007-11-26
* @version 0.2

wakextreme
11 Dec 2007, 6:10 AM
Thanks for this great upload tool!

Any chance of getting this updated to SWFUpload v2.0.1.

http://swfupload.org/forum/news/139

Thanks

mikegiddens
11 Dec 2007, 7:39 AM
Sorry guys for the delay. I have been on the road for the past week and have not had a change to do any changes. I will try and update the ux and website to reflect everything accordingly. There are a few changes I want to make to enhance and fix some minor flaws in the interface.

Keep in mind this was more for me and figured I would try and wrap it up so others can use it too so if everything is not perfect I apologize. I do have a fulltime job this was on the side.

Thanks for everyone that has found this useful.

Cheers,

-Mike

AdmiralKirk
11 Dec 2007, 7:55 AM
Thier realy is no reason not to send the Session ID in the query string. You are not any less secure for doing so. The session id is sent in plain text on a non-secure connection anyway in the form of the contents of the browser cookies. Or directly in the query string anyway if your PHP is setup that way.

seancallan
11 Dec 2007, 10:31 AM
Of course, that would solve the problem, but i think thats a bad solution, if i can get your session id, im able to login with your permissions on your web app. Thats the reason why i pass the username and password from Ext to swf and do a login in the swf again...

Foggy, this is not the case. As most often is the case, the server used other checks along with the session ID to ensure it is the correct user. IP address + Session ID is a common combination.

benny_boi
12 Dec 2007, 3:58 AM
Hey Mike,

Let me reassure you that the rest of us in Ext land appreciate your work - it's a really clean and impressive looking Ext implementation of the swfupload technique and I'm sure lots of people will benefit from your work.

Look forward to playing with version 0.3 and beyond... :-)

Cheers,

Ben

seancallan
12 Dec 2007, 7:45 AM
I wanted to make everyone aware that there seems to be an issue with the MIME types. The issue does not stem from Mike's component but rather an issue with flash.

I'm currently using this component as the front end with Apache's FileUpload on server side and regardless of the file extension the MIME is appearing as application/octet-stream.

Mike keep up the good work!

BigTitus
18 Dec 2007, 8:13 AM
First, many thanks for this amazing stuff, you saved me a lot of work! :D

Just one question:

Is there any chance to realize something like a "before queue" event e.g. to check if a file has been uploaded already?

Thanks for any hint!

willydee
3 Jan 2008, 1:51 AM
Hello mikegiddens,

do you think it's possible to add some drag'n'drop capabilities to the upload widget? I'd love to select a bunch of files in Explorer/Finder/<your-favourite-OS-shell> and drop them into a browser window for en bloc upload. I know that no browser does support this natively. I have no knowledge of SWF, but you might know if this is possible.
Any chance?

DigitalSkyline
3 Jan 2008, 2:09 AM
Not with current technologies... perhaps a java applet could support such a thing, and even then it most likely would not work cross platform.

temporary
3 Jan 2008, 7:24 AM
Take a look at this:

http://www.zimbra.com/blog/archives/2007/12/one_of_the_coolest_things_ever.html

They are doing it with a firefox extension... looks nice, though...

temporary
3 Jan 2008, 7:39 AM
Some suggestions for this great extension (love it!), based on 0.2:


Don't set a default title if none is given - or add a switch to disable the title (when used in a n Ext.Window, a title isn't necessary)
Make all text items and header titles configurable (for internationalization)
Lines 65/66 look like duplicates
Add a "clear" button that is only visible if files are queued

thameema
3 Jan 2008, 2:57 PM
I have used this swffileupload and the other one created by MaximGB. I think this swf file upload has a major bug about not sending the session/cookie information in firefox in any platform. Because of that I went with the other one created by MaximGB which lacks the multiple file upload but it works with single file upload.


Can any of you guys tell me is that firefox session bug fixed in swf upload .swf file? and Can I start using this fileupload ?

Thanks,
Thameem

MD
3 Jan 2008, 6:13 PM
Thameema, on the swfupload.org site they explain what the bug is (it's a bug in Flash plugin actually):

Cookie issue
On Windows the Non-IE Flash Player plugin (FireFox, Opera, Safari, etc) sends the IE cookes regardless of the browser used. This breaks authentication and sessions for many server-side scripting technologies.

Developers should manually pass Session ID information and manually restore Sessions on the Server Side if they wish to use Sessions

And just as they suggest -- passing the true session ID alongside your other values and overriding the wrong ID with the right one on the backend works great.

In my case, I just added the session ID to the post_params:


, post_params: {module: 'upload', type: 'artists', autoSort: 1, autoCrop: 1, PHPSESSIDX: '<?=$_COOKIE["PHPSESSID"]?>'}
//<?=session_id()?> also works

...and then on the backend I overrode it as follows, before I do any session user authentication:


if((!empty($_REQUEST["PHPSESSID"]) && !empty($_REQUEST["PHPSESSIDX"])) && $_REQUEST["PHPSESSID"] != $_REQUEST["PHPSESSIDX"]){ $_REQUEST["PHPSESSID"] = $_REQUEST["PHPSESSIDX"]; unset($_REQUEST["PHPSESSIDX"]); $_COOKIE["PHPSESSID"] = $_REQUEST["PHPSESSID"]; }

Hope this helps you.

On a side-note -- I modified Mike's extension to work with the new v2 of swfUpload, and it works great without a whole lot of effort/changes required. I also backported a v2 version for Ext v1.1.1. If anyone's interested, I can clean up and post a summary of the necessary changes.

temporary
4 Jan 2008, 7:27 AM
On a side-note -- I modified Mike's extension to work with the new v2 of swfUpload, and it works great without a whole lot of effort/changes required. I also backported a v2 version for Ext v1.1.1. If anyone's interested, I can clean up and post a summary of the necessary changes.

Hi MD, I'd really be interested in your modifications. Can you send me a diff?

thameema
4 Jan 2008, 9:58 AM
I can understand the bug and your fix. But there are couple of issues if its used with java/acegi.

1. First issue is java sessions send JSESSIONID which is different than the real session id. I tried sending this to server as request parameter but no effect. I may need to send it as header variable.

2. Does anyone successfully used this with java web application? pls shed some light.

Thanks,
Thameem

mitchellsimoens
9 Jan 2008, 6:18 PM
I have it working from your demo but the grid widths aren't right. The Filename width is very short and the size and status are shoved to the left leaving a long space to the right of status. I've included it into a complex layout so maybe this is why. Once I add a file, they space out to look good (just a little space to the right of status). Also, I'm getting an error that console is not defined.

ckr
9 Jan 2008, 8:35 PM
Mike great widget! =D>

What would it take to add a method to set post_params?

I have an instance, where I would like to pass some info that could change for every file or queue of files uploaded. Or is there a way to poke this into the my panel instance each time?

Again, great work!

ckr
10 Jan 2008, 6:40 AM
Uhmmmm.....
Never mind, I am a moron. :((

this.addPostParam does the trick.

rain16881
10 Jan 2008, 9:37 PM
hi.every one..

can you take me ..how to let it work in struts2..

rain16881
13 Jan 2008, 9:29 PM
<?php

$upload_good = false;
if (!isset($_FILES["Filedata"])) {
$upload_good = "Not recieved, probably exceeded POST_MAX_SIZE";
}
else if (!is_uploaded_file($_FILES["Filedata"]["tmp_name"])) {
$upload_good = "Upload is not a file. PHP didn't like it.";
}
else if ($_FILES["Filedata"]["error"] != 0) {
$upload_good = "Upload error no. " + $_FILES["Filedata"]["error"];
} else {
$upload_good = "The upload was good";
}
?>

{ success: true, data: [

{cookies: [
<?
foreach ($_COOKIE as $name => $value) {
echo "{'" . htmlspecialchars($name) . "': '" . htmlspecialchars($value) . "'}, ";
}
?>
]}

, {get: [
<?
foreach ($_GET as $name => $value) {
echo "{'" . htmlspecialchars($name) . "': '" . htmlspecialchars($value) . "'}, ";
}
?>
]}

, {post: [
<?
foreach ($_POST as $name => $value) {
echo "{'" . htmlspecialchars($name) . "': '" . htmlspecialchars($value) . "'}, ";
}
?>
]}

, {files: [
<?
require_once ("JSON.php");
$json = new Services_JSON();

foreach ($_FILES as $name => $value) {
echo "{" . $name . ": " . $json->encode($value) . "}";
}
?>
]}

]}

请问.这个php返回的什么东西啊.一个json数据?还是什么,事关我用struts2返回的不对.upload state还是uploading...
this php returen what?a json data?or something else,i uses struts2 return "true" ,it no work .the upload state is uploading...

damien
14 Jan 2008, 6:20 AM
I have dowloaded the files and integrated this nice swfuploadpanel into my website. It looks like everything is working but the file isn't uploaded. I fi check my tmp dir on the server it's empty. But if i echo the $_FILES['Filedata'] array i can see the name off the file and the tmp dir given by the swf. What i am doing wrong? Is this a server issue? Or do i need to change a seeting in the .js files?

ckr
14 Jan 2008, 6:19 PM
Damien - Do you have proper permissions on all the directories?

Depending on how your web server is setup, it might not have the proper permissions to access or write your file.

KampfCaspar
17 Jan 2008, 12:13 AM
Even if slightly off-topic: Remember that you have to move/copy the uploaded file from the temporary directory. PHP deletes the file at script shutdown.

al_capone
6 Feb 2008, 1:52 AM
on client side I use:



.....

upload_url: '/arvigps/upload?action=upload',
upload_type: 'GPS',
post_params: {
id: '111',
test: 'test'
},
file_types: '*.kml',

.....


on server side I use:



System.out.println(request.getParameter("action"));
System.out.println(request.getParameter("id"));
System.out.println(request.getParameter("test"));


output is:

08/02/06 10:50:46 upload
08/02/06 10:50:46 null
08/02/06 10:50:46 null

question is:

what I m doing wrong?
how get parameter values from client on server side?

thanks

gelleneu
7 Feb 2008, 2:28 AM
When I use the normal http-Upload I have a size and time limit in php.ini. Is there a way to ignore this limit by using Flash (f.e. swuploader) for uploading?

ckr
7 Feb 2008, 6:55 AM
I am not sure. There maybe a way, but I had to alter my php.ini settings to get larger uploads to work.

Foggy
14 Feb 2008, 1:40 AM
When I use the normal http-Upload I have a size and time limit in php.ini. Is there a way to ignore this limit by using Flash (f.e. swuploader) for uploading?
There is definitely no way if you use php on server side, except changing the php.ini or use ini_set if your hoster allowed it..

denkoo
14 Feb 2008, 8:04 PM
hi

I m surprise to see that all people who's make thread are enjoy because I lanch link on ie7 or FF and nothing appens when I click on add button...

I forget something ??? sorry if my question seem like so stupid !!))

thank for your contrib !!

laurent

ikk0
15 Feb 2008, 11:36 AM
Sample isn't working anymore, swfuploader.js is a 404 on the demo Page and in Debug it says:

Could not find Flash element

sjerry
15 Feb 2008, 1:38 PM
Is there anybody with a working example? Example from start topic doen't work anymore..

Edit: After replacing the swf and js files from the original SWFUpload package the problem was solved.

I see i'm not the only one with this problem so maybe anyone else wants to try. Files attached...

stever
15 Feb 2008, 6:22 PM
On a side-note -- I modified Mike's extension to work with the new v2 of swfUpload, and it works great without a whole lot of effort/changes required. I also backported a v2 version for Ext v1.1.1. If anyone's interested, I can clean up and post a summary of the necessary changes.

Please do!

mikegiddens
16 Feb 2008, 10:21 AM
Sorry about that guys. I made some changes to the new swf2.0.2 and now there is a 2.1 so I will try and get things upgraded and back online sometime next week. Sorry for the inconvience and glad some people are using it. :)

-Mike

stever
16 Feb 2008, 11:10 AM
If you would like some help with it, let me know... could work on it over the long weekend...

mikegiddens
20 Feb 2008, 1:23 AM
Well everyone I have not made much progress but I have posted what I have to my svn for download.

https://svn2.hosted-projects.com/mikegiddens/extjs_ux/swfuploader/tags/0.4/

user: extjs
p: readonly

If you are searious about helping on the swfupload project please pm me.

Also if you are interested in hosting your own extjs ux here let me know so I can set you up an account.

cheers,

-MikeGiddens

damsfx
20 Feb 2008, 7:32 AM
Well everyone I have not made much progress but I have posted what I have to my svn for download.

https://svn2.hosted-projects.com/mikegiddens/extjs_ux/swfupload/tags/0.4

user: extjs
p: readonly
I think your link is
https://svn2.hosted-projects.com/mikegiddens/extjs_ux/swfuploader/tags/0.4/ ;)

chris
21 Feb 2008, 5:20 PM
Hi, just want to comment on how cool this component is and I had a little tweak/suggestion:

In version 0.4 of SwfUpload.js the following line (248):


if (typeof(post_params[name]) === "string") {


Be changed to:


if (typeof(post_params[name]) === "string" || typeof(post_params[name]) === "number") {


So we could use numbers as well as strings for post params. This is mainly because some of the POST params I'm using call a function that will return a number. :)

One other thing, and that is if there's any processing of a server side error? I tried setting a server response of { success: false } thinking that might do the trick, but no such luck.

jsakalos
21 Feb 2008, 5:31 PM
Just to let you know... In my FF-2.0.0.12@openSUSE Linux 10.3, with Flash 9.0 r115 no file selection popup appears when I click Add files. No Firebug error.

Webnet
22 Feb 2008, 7:17 AM
I am triyng to test this demo and when I click "Add Files" nothing happens.

mikegiddens
22 Feb 2008, 11:47 AM
sorry guys,

I have not looked into it to see what the problem might be. I am out for the weekend but should have a chance to make a new examples page for next Wednesday.

-Mike

gif98
26 Feb 2008, 9:18 PM
when upload files,the httprequest did not contain cookie ,any solution?

sunmi629
4 Mar 2008, 11:10 PM
how to get upload file type because i get file type name the "application/octet-stream"?? :)

damsfx
5 Mar 2008, 4:25 PM
when upload files,the httprequest did not contain cookie ,any solution?Are you using a different browser than IE ??

This is a known issue in the Flash Player.
Flash Player send IE cookies even if you are using another browser.

thameema
5 Mar 2008, 4:30 PM
Are you using a different browser than IE ??

This is a known issue in the Flash Player.
Flash Player send IE cookies even if you are using another browser.

Do you think this bug with firefox will get fixed? or this upload panel only work with IE ?

Thanks
Tham

mikegiddens
6 Mar 2008, 11:23 AM
I have posted some changes and got the demo working again. I also posted a few FAQ's and iproved the example to show how to hijack the session of the browser to get access to your existing session id's.

There may be some issues and have been very busy on other projects at the moment. You are welcome to help. Please read the first post about pm me if you would like svn write access.

-Mike

shn88
19 Mar 2008, 5:12 AM
Hi Mike,

Thanks for the great component.. Works like a charm :)

I was having an issue trying to get a response back from the server after a successful upload - the response object passed to the fileUploadComplete event was always null.

I jumped into your source and had a look.. Seems that SWFUpload is not passing the response to your uploadComplete handler. It does however pass it to your fileComplete handler. What I did as a workaround was fire off an event called fileMetaData inside your fileComplete handler. It looks something like this (near line 261 in SwfUploadPanel.js):



fileComplete: function(file, result) {
var o = Ext.decode(result);
this.fireEvent('fileMetaData', this, file, o);
if (this.suo.getStats().files_queued > 0) {
this.uploadFiles();
} else {
this.getTopToolbar().items.get(2).setVisible(false);
this.getTopToolbar().items.get(3).setVisible(false);
this.fireEvent('queueUploadComplete', this);
}
}


It works for now, but I'm completely new to ExtJS, so there might be a better way. Also it might be because I'm using SWFUpload 2.1.0 beta 2 (although I have tried the version bundled with your component).

Also, I think it's worth mentioning in your FAQs that Flash sends the Mime type application/octet-stream for all files no matter what their extensions are. This can cause issues for people who check the Mime types, or use frameworks (like Code Igniter) that validate Mime types for security reasons, as the uploads will most likely be rejected.

Thanks again for the time you've put into this.

Cheers,
shaun

jonx
19 Mar 2008, 6:57 AM
Do you think this bug with firefox will get fixed? or this upload panel only work with IE ?

Thanks
Tham
Like he said, this is a bug with the flash player. It has nothing to do with FF or with IE or with extJS or even with the Ext.ux.SwfUploadPanel

If you need the cookie to authenticate the user uploading a file for exemple, you could add a user id as a form parameter for the flash applet to post. That way you could do the "authentication" by hand and link the file uploaded to the correct user...

Foggy
19 Mar 2008, 11:03 PM
Hey mike, just noticed that you delete a record from the store by any keypress if i dont have setup the confirm dialog...
Maybe you can change the code into something like this:

if(e.getKey() == e.DELETE) {
if (config.confirm_delete) {
Ext.MessageBox.confirm('Remove File','Are you sure you wish to remove this file from queue?', function(e) {
if (e == 'yes') {
removeRows(this);
}
});
} else {
removeRows(this);
}
}

Mr Banana Pants
23 Mar 2008, 2:30 PM
i successfully setup the demo on my local host, but i can't seem to actually upload a file, i'm doing it in php, anyone have some sample code where the move() code would go, thanks

garraS
28 Mar 2008, 5:36 AM
How can I upload a file to a remote host?

I know that I have to call the external PHP file (on remote host) but if I put in the code


, upload_url: 'http://dir.com/upload.php'
This return the uploadError -230 and on FF status bar appear "Waiting www.dir.com...".

Please help!

Foggy
29 Mar 2008, 6:13 AM
In my opinion flash blocks any script access to a foreign domain expect you allow this specific domain you want. But dont ask me how, im all other than a flash guru :)

garraS
29 Mar 2008, 10:42 AM
SOLVED
I need to download a file called "crossdomain.xml" and, in that file, I need to allow the externals URL...like this:
[code]
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="www.grupovrs.com" />
<allow-access-from domain="www.grupovrs.com.ar" />
<allow-access-from domain="grupovrs.com" />
<allow-access-from domain="grupovrs.com.ar" />
</cross-domain-policy>
[code]

I put that file inside the public_html folder on the external server that I want to upload the files.

Sorry for my english.

garraS

scroll
2 Apr 2008, 3:26 AM
Hi all.

First of all, congratulations for this job.

I need a tip for the upload path.

Where do i set this ? Where do the files go ?
It keeps saying 'Canceled'.

Regards,


PS - i

prophet
2 Apr 2008, 4:08 PM
I'm having the same problem as scroll...
It works okay on some machines, but shows "canceled" on others... Perhaps it's timing out? Slow connection?


SWF DEBUG: startFile(): File Reference found. File accepted by startUpload event. Starting upload to preownedimageupload.php for File ID: SWFUpload_0_6
SWF DEBUG: Event: uploadProgress: File ID: SWFUpload_0_6. Bytes: 32768. Total: 317657
SWF DEBUG: Event: uploadError : IO Error : File ID: SWFUpload_0_6. IO Error.
SWF DEBUG: Event: uploadComplete : Upload cycle complete.

mikegiddens
2 Apr 2008, 7:47 PM
SwfUpload is a flash based application and would most likely require a setup of crossdomain.xml

I have not looked into this sine I have not the need yet but this is the normal issue to look into for flash and remote sites.

Please post the answer if you find out how to do it.

Thanks,

-Mike

mikegiddens
2 Apr 2008, 7:50 PM
I have not tested all the error cases so it may have a few bugs in the code. I am sure there is much that could be done to make this widget better. Feel free to suggest fixes or improvements.

For me it works and have not run across these errors so I am not sure how to help.

ismail
3 Apr 2008, 1:29 AM
Hi,
I am trying to use SWFUploadPanel, the upload part works well but I don't get the response. Has anyone experienced the same issue?

I am using the following code :

site_upload_panel = new Ext.ux.SwfUploadPanel({
debug: true,
width:400,
height: 150,
upload_url: 'http://localhost/portal_manager/scripts/upload_site_csv.php',
flash_url: 'http://localhost/iomagic/client/javascript/ext/resources/flash/swfupload_f8.swf',
single_file_select: true,
confirm_delete: true,
remove_completed: false,
post_params: {PHPSESSIDX: PHPSESSIDX},
file_types: '*.csv'
});

site_upload_panel.on('fileUploadComplete', function(panel, file, response) {
console.log(arguments);
});console.log dumps panel and file parameters while response parameters is undefined.

Thanks in advance for your help

jonx
3 Apr 2008, 3:15 AM
try to put your php and flash file to the same path. try to put them at the root of your web site. make sure you effectively return something. no other error code than 200 even in case of errors, try it in IE first than in other browsers. read the swfupload forum, etc...

mlim1972
10 Apr 2008, 2:55 PM
Mike,
Thanks for this awesome UX... I've been trying it and things work great except for one thing:
- fileUploadComplete event handler gets 'undefined' as part of the response once the file is uploaded.

After some investigation, here is what I found:
firing the fileUploadComplete event is done in uploadComplete: function(file, result). However looking at the SwfUpload, the uploadComplete does not pass the response. The one that passes the response is fileComplete: function(file)... So, I modified fileComplete as follows:




, fileComplete: function(file, result) {

var o = Ext.decode(result);
this.fireEvent('fileUploadComplete', this, file, o);
if (this.suo.getStats().files_queued > 0) {
this.uploadFiles();
} else {
this.getTopToolbar().items.get(2).setVisible(false);
this.getTopToolbar().items.get(3).setVisible(false);

this.fireEvent('queueUploadComplete', this);

}

}


and I remove the firing in uploadComplete since it will be the same as in file complete.



, uploadComplete: function(file, result) {

if (this.cancelled) {
this.cancelled = false;
} else {
//var o = Ext.decode(result);

this.store.getById(file.id).set('status', 2);
this.store.getById(file.id).commit();
this.progress_bar.reset();
this.progress_bar.updateText('Progress Bar');

if (this.remove_completed) {
this.store.remove(this.store.getById(file.id));
}

//this.fireEvent('fileUploadComplete', this, file, o);
}
}


Let me know if you agree with these changes... I've done them locally and I'm getting the JSON Data in the client side.

dotchris
12 Apr 2008, 1:51 PM
I was wondering how you setup error handling with this. I am using PHP. I currently return the json {success:false} and it just ignores it. What format should be used for giving back errors?

mlim1972
15 Apr 2008, 8:48 AM
it doesn't matter what you send back... The code does not look for the "success" attribute. I had to make a couple of changes to introduce this behavior and add another column to display the message from the server. Same as in UploadDialog. At least, I can have the same server code for either SwfUploadPanel and UploadDialog... :)

Naneau
22 Apr 2008, 4:39 AM
Just a quick post, but it may save somebody quite a few headaches (I wish I had known a few hours ago ;)). I used swfupload_f8.swf becaus it works (better) on firefox under linux. But apparently, if you use the flash 8 version the post_params config setting will not be honoured, i.e. you won't see them on the server.

I don't know if this is a javascript or a flash issue, but it's certainly a bug of some kind.

jonx
22 Apr 2008, 5:12 AM
I think it's a flash issue, see the swfupload.org site, they are starting to document those problems pretty well. Also sometimes they provide a work around...

Emachan
5 May 2008, 6:55 AM
Greetings to all...
This SwfUpload stuff is really cool and useful (not so easy to debug though).

May I ask Mlim1972 (and whoever wants to answer, of course) how to setup a correct server code?


it doesn't matter what you send back... The code does not look for the "success" attribute. I had to make a couple of changes to introduce this behavior and add another column to display the message from the server. Same as in UploadDialog. At least, I can have the same server code for either SwfUploadPanel and UploadDialog... :)


Thank you so much for your attention and time...

Have a nice day
EMA

kimu
7 May 2008, 4:01 AM
I'm trying to use fileUploadComplete event to receive an answer from the server but the response parameter is always undefined.

dlg.on('fileUploadComplete', function(panel, file, response) {
alert(response);
});

That is my client code:

var dlg = new Ext.ux.SwfUploadPanel({
title: 'Seleziona il file immagine'
, width: 500
, height: 300
, border: false
// Uploader Params
, upload_url: "<?= HTTP_FULL_BASE_URL.'/profiles/loadPicture'; ?>"
, post_params: {'data[_Token][key]': getAK(), lbnss: getCookie('LBNSS'), swf: 'on'}
, file_types: '*.jpg;*.gif;*.png'
, file_types_description: 'File immagine'
, file_post_name: 'data[Profile][foto]'
, flash_url: "<?= $this->webroot?>js/ext-extension/Ext.ux.SwfUploadPanel/swfupload_f9.swf"
, single_select: true // Select only one file from the FileDialog
// Custom Params
, single_file_select: true // Set to true if you only want to select one file from the FileDialog.
, confirm_delete: false // This will prompt for removing files from queue.
, remove_completed: true // Remove file from grid after uploaded.
, file_upload_limit: 1
}); // End Dialog

dlg.on('fileUploadComplete', function(panel, file, response) {
alert(response);
});

dlg.on('queueUploadComplete', function() {
//win.close();
});

var win = new Ext.Window({
title: 'File uploader'
, width: 514
, height: 330
, resizable: false
, items: [ dlg ]
}); // End Window

win.show();

And this is my server code:

public function loadPicture(){
/*if($this->checkUser('profiles-loadpicture')){
$this->autoRender = false;
$this->log('PICTURE', LOG_DEBUG);
$this->log($this->data, LOG_DEBUG);
}*/
$response = array('rk' => $this->Session->read('rk'), 'msg' => 'ERROR', 'response' => 'L\'immagine non ha le dimensioni richieste');
echo json_encode($response);
}


I'm I doing something wrong?

Thanks for any help.

mikegiddens
7 May 2008, 5:21 AM
kimu,

I tested the program to make sure it was returning something for response and it did.

In SWPUploadPanel these 2 lines are for returning the response. So please make sure you are sending json code and that the json code is accepted by Ext.decode.



var o = Ext.decode(result);
this.fireEvent('fileUploadComplete', this, file, o);


Also you have a typo for File Image ;)

-Mike

kimu
7 May 2008, 5:43 AM
This is the complete debug stack.

SWF DEBUG: SWFUpload Init Complete
SWF DEBUG: SWF DEBUG: ----- SWF DEBUG OUTPUT ---- SWF DEBUG: Build Number: SWFUPLOAD 2.0.2 FP9 2008-01-07 0001 SWF DEBUG: movieName: SWFUpload_0 SWF DEBUG: Upload URL: http://192.168.244.129/libero-news/profiles/loadPicture SWF DEBUG: File Types String: *.jpg;*.gif;*.png SWF DEBUG: Parsed File Types: jpg,gif,png SWF DEBUG: File Types Description: File immagine (*.jpg;*.gif;*.png) SWF DEBUG: File Size Limit: 104857600 bytes SWF DEBUG: File Upload Limit: 1 SWF DEBUG: File Queue Limit: 1 SWF DEBUG: Post Params: SWF DEBUG: lbnss=e3528aacab36634f5b570db5708461c7 SWF DEBUG: data[_Token][key]=1b5b8f698d984951e8e2f8aa29e0fc4bfe50ab5f SWF DEBUG: swf=on SWF DEBUG: ----- END SWF DEBUG OUTPUT ---- SWF DEBUG:
Flash called back and is ready.
SWF DEBUG: Event: fileDialogStart : Browsing files. Single Select. Allowed file types: *.jpg;*.gif;*.png
SWF DEBUG: Select Handler: Files Selected from Dialog. Processing file list
SWF DEBUG: Event: fileQueued : File ID: SWFUpload_0_0
SWF DEBUG: Event: fileDialogComplete : Finished adding files
SWF DEBUG: StartUpload(): Starting Upload: First file in queue
SWF DEBUG: StartFile: First file in queue
SWF DEBUG: Event: uploadStart : File ID: SWFUpload_0_0
SWF DEBUG: Global Post Item: lbnss=e3528aacab36634f5b570db5708461c7
SWF DEBUG: Global Post Item: data[_Token][key]=1b5b8f698d984951e8e2f8aa29e0fc4bfe50ab5f
SWF DEBUG: Global Post Item: swf=on
SWF DEBUG: startFile(): File Reference found. File accepted by startUpload event. Starting upload to http://192.168.244.129/libero-news/profiles/loadPicture for File ID: SWFUpload_0_0
SWF DEBUG: Event: uploadSuccess: File ID: SWFUpload_0_0 Data: {"rk":"cb72976d0b17a0b0590ce14d3f5361ff06903674","msg":"ERROR","response":"ciao"}
SWF DEBUG: Event: uploadComplete : Upload cycle complete.

SWFUpload.prototype.uploadSuccess function receives data from server correctly, but these data aren't passed to the event handler.

Debugging a little I've found that events are messed up.
I think following events handler should be swapped


//upload_complete_handler : this.uploadComplete.createDelegate(this),
upload_complete_handler : this.fileComplete.createDelegate(this), //change with this

//upload_success_handler : this.fileComplete.createDelegate(this),
upload_success_handler : this.uploadComplete.createDelegate(this),//events have been swapped


Didn't you find this error? With this change now it works properly for me, but I haven't tested it enough to say it's ok.
Let me know if you think that this is not the problem. I'll investigate further.
I havent' found the typo in my code, where is it?
Bye

clrnbeek
13 May 2008, 4:39 AM
Hi,

As a solution to the 'Firefox Session' bug for Asp.net users,
I justed wanted to share the link which contains the workaround which worked best for me.

http://www.swfupload.org/forum/generaldiscussion/98

Greetings.
Martijn

wakextreme
23 May 2008, 9:24 AM
According to the SWFUpload documentation the server response is only returned on uploadSuccess and not on uploadComplete. The SwfUploadPanel code is looking for the response in uploadComplete and its not present.

The documentation also says that another upload should not be started from uploadSuccess and that it should be started from uploadComplete.

So it does seem that these to events are backwards.

DeeZ
26 May 2008, 8:56 AM
Hi,

Before to try this plugin, I wondering if upload resume is possible with SwfUploadPanel ? For example after a connection problem.

In the same idea, is it possible to send only some file parts ? the goal is to prevent on the server side to manage a lot of memory if the file uploaded is huge (>100Mo)

Thanks,
DeeZ

Hani79
5 Jun 2008, 9:48 AM
I'm trying to extend the functionality of this extension so that files being uploaded can be directed to different folders on the server - depending on which folder/node was selected in a tree when that specific file was added to the queue.

My initial thinking is that I can add a "folder" postparam each time a node is clicked - but figured that I should ask if I am thinking about this the right way before I spend time working on it.

Thanks for any tips.

mikegiddens
6 Jun 2008, 8:35 AM
Hani79,

It has been a long time since I looked at this plugin and I know there is a

addPostParam( 'VarType', 'FolderName' ); setup somewhere.

This exists but not sure if I have any listener setup to fire before each file starts its upload. If not I am sure something could be added. I don't have much free time lately so I will not be able to investigate. It is my intentions this summer to sit down and upgrade SwfUploadPanel to use SwfUpload 2.1. Hopefully I will have more time to put a bit more features so that it can be used on a broader scope.

If you find anything out please post it here so everyone can learn.

Cheers,

-Mike

maquina
7 Jun 2008, 8:08 AM
Mike,
Thanks for this awesome UX... I've been trying it and things work great except for one thing:
- fileUploadComplete event handler gets 'undefined' as part of the response once the file is uploaded.

After some investigation, here is what I found:
firing the fileUploadComplete event is done in uploadComplete: function(file, result). However looking at the SwfUpload, the uploadComplete does not pass the response. The one that passes the response is fileComplete: function(file)... So, I modified fileComplete as follows:




, fileComplete: function(file, result) {

var o = Ext.decode(result);
this.fireEvent('fileUploadComplete', this, file, o);
if (this.suo.getStats().files_queued > 0) {
this.uploadFiles();
} else {
this.getTopToolbar().items.get(2).setVisible(false);
this.getTopToolbar().items.get(3).setVisible(false);

this.fireEvent('queueUploadComplete', this);

}

}
and I remove the firing in uploadComplete since it will be the same as in file complete.



, uploadComplete: function(file, result) {

if (this.cancelled) {
this.cancelled = false;
} else {
//var o = Ext.decode(result);

this.store.getById(file.id).set('status', 2);
this.store.getById(file.id).commit();
this.progress_bar.reset();
this.progress_bar.updateText('Progress Bar');

if (this.remove_completed) {
this.store.remove(this.store.getById(file.id));
}

//this.fireEvent('fileUploadComplete', this, file, o);
}
}
Let me know if you agree with these changes... I've done them locally and I'm getting the JSON Data in the client side.

really nice
with this mod the return is working
thanks

Vamman
18 Jun 2008, 5:18 AM
After a long hiatus from Ext JS I came back to build a new site that is fairly interactive. I need to build a well working JS upload panel with multiple files that will sit in an active upload que. I figured SWFUpload would be the best solution and when I came across this sample I realized I must be right. I'm not sure why the PHP logic was dumped out of this example from upload_example.php but I've spliced it back in with a few hacks from the SWFUpload release (google it) from \SWFUpload-Samples v2.1.0.Release\SWFUpload Samples v2.1.0\samples\php

Good luck and thanks for the awesome app mikegiddens =)

pauleee
18 Jun 2008, 4:44 PM
Hm,

the progressbar will dont work correctly in the new firefox 3 on OSX... :-?

Scorpie
18 Jun 2008, 11:11 PM
Nice plugin, great work!

anjelika
20 Jun 2008, 3:47 PM
Good job with the plugin.
Now..is there a way to insert the whole widget into a form?
I mean..removing the border and caption, just like an Input widget..like TextField.
I need to add it to an already created form, any advices?
Thanks

Enrico
25 Jun 2008, 6:17 AM
Hi,

Foogy already mention in post #78 that files would be deleted if any key is pressed.

Bugfix:

trunk:

if (config.confirm_delete) {
if(e.getKey() == e.DELETE) {
Ext.MessageBox.confirm('Remove File','Are you sure you wish to remove this file from queue?', function(e) {
if (e == 'yes') {
removeRows(this);
}
});
}
} else {
removeRows(this);
}

patch:

if(e.getKey() == e.DELETE) {
if (config.confirm_delete) {
Ext.MessageBox.confirm('Remove File','Are you sure you wish to remove this file from queue?', function(e) {
if (e == 'yes') {
removeRows(this);
}
});
} else {
removeRows(this);
}
}

damsfx
8 Jul 2008, 2:13 AM
...It is my intentions this summer to sit down and upgrade SwfUploadPanel to use SwfUpload 2.1....Well SwfUploadPanel 0.4 work fine with SwfUpload 2.1.0.
no need to update except for new features of SwfUpload.

pinney.colton
17 Aug 2008, 8:45 PM
All -

I thought I'd post this here now in case someone else is looking for this answer.

Because the upload is being handled by Flash prior to submission to your php (or other) upload handler, the HTTP_USER_AGENT shows up as: "Shockwave Flash" if attempting to access $_SERVER[ 'HTTP_USER_AGENT' ].

I typically included a check on the user agent in my code for security purposes (and I modify it a bit and then encode it), so finding this was a bit of a pain. It would have been obvious had I thought about it, but oh well...

Great work on this plugin by the way.

- P

shane.fox
21 Aug 2008, 7:01 PM
Thank you for a great plugin. It works very well.
I did however find one small problem. I found that destroying the panel doesn't cleanup swfupload correctly. It leaves an embed object littering the DOM.
To fix this I upgraded to swfupload 2.1 and then added the following code to SwfUploadPanel:


, destroy: function() {
this.suo.destroy();
Ext.ux.SwfUploadPanel.superclass.destroy.call(this);
}

Hani79
8 Sep 2008, 6:28 PM
Is there any way to prevent files from getting queued if they are already queued in the upload list? As of now, I can add the same file multiple times to the queue. Any hints at where I should be looking to add in this functionality would be great and appreciated. (Not sure if I can actually do it through javascript or if it is something that has to be done in the SWF file. The file location on the local computer never gets passed to the JS, does it?)

Kartt_in
16 Sep 2008, 3:35 AM
Hello All,

I am getting a strange error...

I am using latest version of SwfUploadPanel
Panel seems to load correctly, able to add files to it.

When i click on Upload Files it sets the upload status as Uploading... and stops there throwing a java script error.

syntax error
chrome://firebug/content/blank.gif(<!DOCTYPE html PUBLIC "-//W3C//DTD XHTM...R/xhtml1/DTD/xhtml1-transitional.dtd" >\n

In firebug it points to this location of SwfUploadPanel.js

try {168 this.progress_bar.setWidth(this.bbar.getWidth() - 5);
169 Ext.fly(this.progress_bar.el.dom.firstChild.firstChild).applyStyles("height: 16px");
170 } catch (ex1) {
171 }

Pls help me in sorting this out.

Thanks

Kartt

matthias76
16 Sep 2008, 1:46 PM
The actual Demo doesnt work on IE 7. Is there a Way to get it running on IE.
IF i click on add Files nothing happen. No Error and so on?

Sorry for my english, its not the best ;)

thx Matthias

matthias76
18 Sep 2008, 2:22 AM
No Ideas for my Problem ??

willgillen
28 Sep 2008, 1:09 PM
Better read this before adapting SWFUpload into any existing project:

http://ajaxian.com/archives/flash-10-and-the-bad-news-for-javascript-interaction

Saeven
30 Sep 2008, 10:42 PM
Am getting Error #2038: File I/O Error. during upload using FF3 and Chrome.

Any ideas?

Thanks.
A

Thomas_K
22 Oct 2008, 6:05 AM
Better read this before adapting SWFUpload into any existing project:

http://ajaxian.com/archives/flash-10-and-the-bad-news-for-javascript-interaction

Maybe this will help http://ajaxian.com/archives/fancyupload-for-flash-10

temporary
22 Oct 2008, 12:02 PM
Maybe this will help http://ajaxian.com/archives/fancyupload-for-flash-10

I'm nearly through updating the Ext.ux.SwfUploadPanel to SwfUpload 2.2.0beta from SVN.

There are a lot of fixes regarding callbacks, I hope I can finish it tomorrow, I'll post it here.
Everything works right now - the only thing that sucks is that it has to provide it's own button for flash 10 security reasons.

Stay tuned.

lburgess
23 Oct 2008, 7:50 AM
Looking forward to it. Any chance of an early copy some time today? - I'll post back with any problems / solutions which I have. I was just about to embark on an update for this myself, so I am aswell making use of your good work :)

ChristophF
23 Oct 2008, 10:40 AM
I'm nearly through updating the Ext.ux.SwfUploadPanel to SwfUpload 2.2.0beta from SVN.

There are a lot of fixes regarding callbacks, I hope I can finish it tomorrow, I'll post it here.
Everything works right now - the only thing that sucks is that it has to provide it's own button for flash 10 security reasons.

Stay tuned.
Great to hear! Are you planning to use a flash overlay or are you aiming to use a flash movie as the button?

dverkade
23 Oct 2008, 10:52 AM
Hi,

Looking forward for this one too. It's important our application keeps working with current browsers and flash installed. Thank!

temporary
23 Oct 2008, 12:21 PM
I'll post it in 1-2 hours... have to do housework for now :-D

In my solution it uses a transparent flash overlay, everything base stuff from swfupload.js.
Suggestions welcome ;-)

nassaja-rus
23 Oct 2008, 2:20 PM
There will be new version of this plugin?

temporary
23 Oct 2008, 4:01 PM
Here we go.

The example might only work when called from a server through http.

I have included the latest swfupload.js and swfupload.swf - please mind, this is from swf, it is NOT a stable version.

My version still needs some tweaks, but I have it running without problems.

Another thing - I have cleanup up the code a lot. There is support for internationalisation now, all strings come from one array. And in the original version the events were really messed up - I've restructured all of them to match the original events from swfupload.js. There are a few other events like allUploadsComplete that is fired when flash completed the last file. It should all be documented inside the class, if not - let me know ;-)

And the last gotcha - this one features a transparent flash that is positoned over the "Add" button - if someone has a good solution for both variants, transparent flash OR a flash-generated button - again, let me know. I wan't happy with button and text generated by flash, it broke the look and feel completely. Just play around with the button settings inside the extension.

The swfupload.js object is instanciated _after_ render now - this was needed to place the transparent image right. And it adds some stuff to the standard "Add" toolbar button... I know this is weird, but I don't have another solution.

That's all ;-)

temporary
23 Oct 2008, 4:18 PM
Some additional background information:

Flash 10 provided some annoying new security features, for example a browse dialog (like SwfUpload provided) is only possible after a click or an action in flash. That's why you have to use a transparent flash overlay or a flash-button for SwfUpload to work.
Take a look at this thread in the SwfUpload Forum: Link (http://swfupload.org/forum/generaldiscussion/790?page=2)

Another thing that drives you crazy if you don't know it - a swf-file has to be delivered with a "Content-Disposition: inline" header - if you deliver it with "Content-disposition: attachment" the flash just won't be displayed. Another annoying "feature" :s

dverkade
24 Oct 2008, 1:45 AM
Hi!

Thanks for this update, works perfactly in Flash 10.

timmy
24 Oct 2008, 8:35 PM
@temporary-
first off i just want to say a big thanks for your hard work on getting this ux working with flash 10. everything is working wonderfully for me, but the 'transparent' button overlay is showing up as a white box on my FF3 (in linux).

i haven't tested on other platforms yet. any chance we could just take the add button image and snip it out to a jpg and drop that into the swf?

temporary
25 Oct 2008, 4:51 AM
Hi Timmy,

sorry, testes it inly with FF3 and IE7 on WIndows.

I guess the best thing would be to provide both options - transparent overlay AND flash generated button. I tried the button solution, but it sucked - didn't render the font very well, and you loose the hover effect in the toolbar. But I guess that's better than a not working version ;-)

I'll provide a minimal changed version later - if someone has got the time (I haven't right now), I'd be glad to add support for the flash-button-solution.

noma4i
27 Oct 2008, 3:52 AM
You forget one string in SwfUploadPanel.js

need:
this.store.getById(file.id).set('status', 2); //string #608

and need to add case for checking "remove_completed" option. ;)

timmy
27 Oct 2008, 9:53 AM
There is one instance of console.log that wasn't prefaced with the debug clause
console.log('next')

Besides that, everything has been working great in my tests.

SimonSez07
29 Oct 2008, 9:49 PM
there is a problem with javascript/flash interaction in the latest flash player because of security features that have been added to flash. this will break the SWFUploadPanel that is currently available. the latest (beta) release of SWFUpload v2.2 implements a work-around, but works differently.

mike, if you could update your SWFUploadPanel to work with the new SWFUpload v2.2 i think it would make us very happy.

thank you for your plugin and the work you have put in for this.

mikegiddens
30 Oct 2008, 8:37 PM
I will do what I can to update my version to work with temporary Flash 10 version but it will be a week or 2.

The best thing I can say for now is work with what temporary has posted.
http://extjs.com/forum/showthread.php?p=242570#post242570

Cheers

luxmenz
1 Nov 2008, 8:06 PM
hi all,

For people want working "upload.php" file...

I've find this code on this topic : http://swfupload.org/forum/generaldiscussion/214


<?php
// Work-around for setting up a session because Flash Player doesn't send the cookies
if (isset($_POST["PHPSESSID"])) {
session_id($_POST["PHPSESSID"]);
}
session_start();

// Settings
//$save_path = getcwd() . "uploads/";
$target = "uploads/";
$upload_name = "Filedata";
$max_file_size_in_bytes = 2147483647; // 2GB in bytes
$extension_whitelist = array("jpg", "gif", "png", "DOC", "doc", "txt"); // Allowed file extensions
$valid_chars_regex = '.A-Z0-9_ !@#$%^&()+={}\[\]\',~`-'; $target = $target . basename( $_FILES[$upload_name]['name']) ;
$ok=1;
$file_name = "";
$file_extension = "";
$uploadErrors = array(
0=>"There is no error, the file uploaded with success",
1=>"The uploaded file exceeds the upload_max_filesize directive in php.ini",
2=>"The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form",
3=>"The uploaded file was only partially uploaded",
4=>"No file was uploaded",
6=>"Missing a temporary folder"
);

if(@move_uploaded_file($_FILES[$upload_name]['tmp_name'], $target))
{
echo "There was a problem with the upload";
}
else {
echo "Sorry, there was a problem uploading your file.";
}

?>

adrianrosca
18 Nov 2008, 6:53 AM
Cannot download this zip, it seems to be corrupted.

bjt
18 Nov 2008, 7:01 AM
FLASH 10 + Adboe Air 1.5

SWFUpload does not work anymore. The Window to select a local file from the pc will not be opened. nor error, nothing. Has anyone an idea?

mystix
18 Nov 2008, 7:02 AM
FLASH 10 + Adboe Air 1.5

SWFUpload does not work anymore. The Window to select a local file from the pc will not be opened. nor error, nothing. Has anyone an idea?

Read post #132-133.

elfkid
18 Nov 2008, 7:12 AM
it's didn't work in ie7

it' will show console without define

but worked! in fx3

elfkid
18 Nov 2008, 7:20 AM
how to add "remove_completed" option
thanks


You forget one string in SwfUploadPanel.js

need:
this.store.getById(file.id).set('status', 2); //string #608

and need to add case for checking "remove_completed" option. ;)

bjt
18 Nov 2008, 7:40 AM
Read post #132-133.

THANK YOU VERY MOUCH.
It worked at the first look. i have to test more

temporary
18 Nov 2008, 12:35 PM
hi folks - sorry for the late reply, seems like i didn't get any topic watch mails...

i will release a new version in a few minutes that includes swfupload 2.2beta3 and other minor fixes that were posted here.

temporary
18 Nov 2008, 12:49 PM
how to add "remove_completed" option
thanks

Yea, i also don't know what he means... Can you give an explanation, norma4i?

temporary
18 Nov 2008, 1:20 PM
Here is the updated version.

Changes:
- swfupload.swf and swfupload.js from SwfUpload 2.2.0beta3
- removed a lonely console.debug (should fix IE errors - note, don't turn on debug on IE without modifying the debugHandler...)
- removed the button configs - in our SwfUploadPanel there is nothing to configure
- set a hand cursor for the transparent swf button
- read width and height from the underlying button and apply it to the swf button

That's all for now. Suggestions welcome!

P.S.: Looks like it doesn't work locally with beta3 anymore - the flash file has to be delivered through http context (a web server). At least I couldn't get it running locally here...

efiebba
19 Nov 2008, 1:15 AM
Hello

One litte question - Why can't the upload_url be relativ?

This one works:
upload_url: 'http://localhost:8080/iProject/layout/ci2004/ajax/upload.jsp',

But this one not !!!
upload_url: 'layout/ci2004/ajax/upload.jsp',

Any hints?

Bastian

temporary
20 Nov 2008, 1:58 AM
One litte question - Why can't the upload_url be relativ?

Hmm that's one thing that bugged me, too.
Don't know how flash handles this, wether it is relative from the flash location or the html location. I always end up using an absolute path...

Enrico
21 Nov 2008, 2:47 AM
One litte question - Why can't the upload_url be relativ?

http://swfupload.org/forum/generaldiscussion/719

Enrico

dizor
23 Nov 2008, 8:30 AM
In last version 'remove_completed' don't work - is there bug or i'm wrong?

elfkid
24 Nov 2008, 5:37 AM
dear all
i come from china , i am poor in my english

"remove_completed"

i mean
when i select some files and uploaded them

"remove_completed" click it , can clear after upload files from the list

elfkid
24 Nov 2008, 7:46 PM
dear all,
how to limit upload files type?

damsfx
25 Nov 2008, 5:29 PM
how to limit upload files type?


var UploadPanel = new Ext.ux.SwfUploadPanel({
id: 'MyUploadPanel'
, file_types: '*.jpg;*.jpeg;*.gif;*.png;*.pdf'
, file_types_description: 'Images / Pdf'
...
});

janmeese
4 Dec 2008, 4:15 AM
Hello,
in all FireFox 3 Versions the Upload Panel doesn't work.
When clicking on the Add-Files Button nothing happens.
Any ideas how to solve?

nassaja-rus
7 Dec 2008, 10:37 AM
Any ideas why it don't work?

Foggy
9 Dec 2008, 2:42 AM
I got never problems with FF3 and FlashPlayer 10...

pauleee
10 Dec 2008, 4:27 AM
Hello,
in all FireFox 3 Versions the Upload Panel doesn't work.
When clicking on the Add-Files Button nothing happens.
Any ideas how to solve?


i've the same problem :(

rule3
11 Dec 2008, 11:59 PM
Hello,
in all FireFox 3 Versions the Upload Panel doesn't work.
When clicking on the Add-Files Button nothing happens.
Any ideas how to solve?

I believe that this is not just SWFUpload issue/bug..
Becase same problem is with all ExtJS-based UploadForms..
It appears with lateast versions of Firefox 2 and with all FireFox 3 :s..
Problem did not occurded with some later versions of FF2 and with MSIE7 everything works fine.
Problem comes always when UploadForm is inside some container like TabPanel.. but if it is just its own From without container everyting works with FF 2 and 3.

Somewhere in the Google Code was someone made file_manager.. its Upload-dialog worked well with Firefox but when I added my own Upload form that worked in example.. it does not worked if it was added to file_manager..

rule3
12 Dec 2008, 12:13 AM
Hello

One litte question - Why can't the upload_url be relativ?

This one works:
upload_url: 'http://localhost:8080/iProject/layout/ci2004/ajax/upload.jsp',

But this one not !!!
upload_url: 'layout/ci2004/ajax/upload.jsp',

Any hints?

Bastian

I think that is just issue where SWF file is located and what is the address (url in Browser) where SWF movie is loaded..

Possible SWF file adding this to path where it is located.
upload_url: 'layout/ci2004/ajax/upload.jsp',

So if swf file is in folded /swf/file.swf
Then URL is '/swf/layout/ci2004/ajax/upload.jsp'

Have you tried this one:
upload_url: '/iProject/layout/ci2004/ajax/upload.jsp',

That is one way tell apsolute path without need to use domain..

nassaja-rus
12 Dec 2008, 4:10 AM
Problem with FF3 still exist. :(

rule3
12 Dec 2008, 6:08 AM
Hi,

I find out one reason that causes that the "Browse..." button not work.
It has nothing to do with ExtJS.




input{
width:102px; height:20px;
}


CSS code above in my own Web-page caused the problem

I don't know does this is anything to do with SWFupload

But if swf file can not be loaded Browser button not work. So can it be FF can't load SWF file because it fails the URL

rule3
12 Dec 2008, 8:15 AM
Problem with FF3 still exist. :(


Hi,

ExtSWFUpload with debug mode logs this: "Could not find Flash element" ehen I press "Add files.."

I am not sure about this because I use this on my own sollution and its folder strugture is diffent..

EDIT: I fixed path to SWF-file and got this error with IE:

Error: Error #2176: Certain actions, such as those that display a pop-up window, may only be invoked upon user interaction, for example by a mouse click or button press.
at flash.net::FileReferenceList/browse()
at SWFUpload/SelectFiles()
at Function/http://adobe.com/AS3/2006/builtin::apply()
at flash.external::ExternalInterface$/_callIn()
at <anonymous>()

And FireFox FireBug debug log:

Could not call SelectFiles: Error calling method on NPObject! [plugin exception: Error in Actionscript. Use a try/catch block to find error.].

rule3
13 Dec 2008, 4:14 AM
Hi,

I am not get ExtSWFUpload to work.. I think problem is with swfupload.swd file witch is not compatible anymore with latest browsers/flash players..
I am not sure am I correct with the issue but I can ques..

I really need version that works with latest FF/IE/Flash Player..
With some older browser systems this works.. but please update your plugin..

I added ExtSWFUpoload to my File Manager and now I can not delevop it beacuse I updated to FireFox 2.0.18 and Flash Player to 10..
http://www.qwikioffice.com/forum/viewtopic.php?f=6&t=264&p=1255#p1255

rule3
13 Dec 2008, 11:34 PM
Here is the problem..

http://www.swfupload.org/forum/generaldiscussion/1027

nassaja-rus
16 Dec 2008, 12:47 AM
This is flash component problem?

rule3
18 Dec 2008, 5:45 AM
Yes it is bug in Flash-file.. Flash 10 player not support commands "selectFile" or "selectFiles"

temporary
23 Dec 2008, 2:26 PM
No, that's not right.

The component works fine with Flash 10 and Firefox 3, I tested it on Windows, Mac and Linux.

But with Flash 10 you have to be aware that the swf HAS TO BE delived with Content-type: inline, attachment won't work.

Pagebaker
24 Dec 2008, 1:23 AM
And how do we do that, Temporary? :)

nassaja-rus
25 Dec 2008, 12:16 PM
Can anybody tell, how SwfUploadPanel can work under firefox3? What is "Content-type:inline"?

temporary
26 Dec 2008, 2:05 AM
This is a header the web server sends to tell the client what he should do with the data it receives.

For example, if your browser receives a pdf file with mimetype application/pdf and Content-Disposition: inline, it will open the pdf inside the browser (if somethine like acrobat reader is installed). If the pdf is delivered with Content-Disposition: attachment the browser wouldn't try to show the file inside the browser, but open a "save as/open" dialog.

For reasons unknown to me, Flash 10 only shows swf files that are delived with Content-Disposition:inline, but ignores files with Content-Disposition: attachment.

Look inside this threads a few posts earlier, I posted a link where this is described.

Edit: Here is the link: http://www.adobe.com/devnet/flashplayer/articles/fplayer10_security_changes_02.html#head32

rule3
30 Dec 2008, 9:34 PM
This is a header the web server sends to tell the client what he should do with the data it receives.

For example, if your browser receives a pdf file with mimetype application/pdf and Content-Disposition: inline, it will open the pdf inside the browser (if somethine like acrobat reader is installed). If the pdf is delivered with Content-Disposition: attachment the browser wouldn't try to show the file inside the browser, but open a "save as/open" dialog.

For reasons unknown to me, Flash 10 only shows swf files that are delived with Content-Disposition:inline, but ignores files with Content-Disposition: attachment.

Look inside this threads a few posts earlier, I posted a link where this is described.

Edit: Here is the link: http://www.adobe.com/devnet/flashplayer/articles/fplayer10_security_changes_02.html#head32

And how do I modify SWF file header?

Reading it via PHP and remove header and make new header?? That is easy with PDF files and with images.. but is there is some function to read SWF files and replace the header or can this done just modifying Apache settings?


If the pdf is delivered with Content-Disposition: attachment the browser wouldn't try to show the file inside the browser, but open a "save as/open" dialog.

PDF-files not work very well in the browsers if the are inline.. sometimes large files just crash browser.. and that Content-Disposition: attachment other header things will not work in IE if they're made wrongly..

inportb
6 Jan 2009, 11:47 PM
Happy new year, guys!

I was wondering why this stopped working... and spent a while reading up on the issue. Fortunately, SWFUpload 2.2 beta 4 supports Flash 10, with some architecture changes. I have applied a dirty hack to SwfUploadPanel to make it use SWFUpload 2.2 beta 4.

If you're impatient, give this a try: http://inportb.com/downloads/SwfUploadPanelX.zip

It's not perfect, but it works for me. Most of the code is from the original extension; I do not claim more credit than I deserve. Ideally, Michael Giddens would be able to take this code and merge it into a new-and-improved SwfUploadPanel.

temporary
7 Jan 2009, 12:54 AM
@rule3:

if your swf is delivered directly through apache, this shouldn't be a problem. in my case it was delivered through php, with readfile, and i had to sent a header('Content-disposition: inline'); to get it working again. Works fine with all browsers.

if you have installed firebug you can simply look at the network tab, in the flash section, how the swf is delivered. the complete header information is available there.

temporary
7 Jan 2009, 12:56 AM
Happy new year, guys!

I was wondering why this stopped working... and spent a while reading up on the issue. Fortunately, SWFUpload 2.2 beta 4 supports Flash 10, with some architecture changes. I have applied a dirty hack to SwfUploadPanel to make it use SWFUpload 2.2 beta 4.

If you're impatient, give this a try: http://inportb.com/downloads/SwfUploadPanelX.zip

It's not perfect, but it works for me. Most of the code is from the original extension; I do not claim more credit than I deserve. Ideally, Michael Giddens would be able to take this code and merge it into a new-and-improved SwfUploadPanel.

uh, did you see my version? another modified version of the original code is very confusing to the users. i suggest you take a look at my version, and if you got changes that my version is missing, post a new version based on it.

inportb
7 Jan 2009, 1:02 AM
@temporary:

It's funny you said that... because that's exactly what I tried. It didn't work for me, unfortunately.

Uh, I did see your version. My impression was that it was different though, because SWFUpload 2.2 beta 4 appears to work locally for me. I have not crawled all over your code, however. SUPX is just a drop-in replacement with no additional configuration options. I'll have a look and see if it's even necessary to merge the changes. I wouldn't say confusing, though. Choice is good ;p

temporary
7 Jan 2009, 1:10 AM
Hmmm strange.

Everybody who is having problems, can you please try this?

SwfUpload example (http://www.wentz.it/swfupload/ext-2.2/examples/swfupload/example.html)

It works like a charm here with FF3, IE7, Chrome and Opera.

Please mind, there is no script that can receive files installed, so uploading will fail.

inportb
7 Jan 2009, 1:12 AM
Dude, that works for me. Checking out your sourcecode now... lol.

temporary
7 Jan 2009, 1:24 AM
This is the sourcecode from my last zip - I downloaded it from my own posting here because I had no other version on my laptop here ;-)

Hmm did you use FF3 for your tests? With or without Firebug? I just saw that swfupload.js always fires a debug message, regardless of the debug setting. Maybe this is the problem.
In my code in the example I put a console dummy if there is no firebug installed...

inportb
7 Jan 2009, 1:33 AM
Interestingly, it fails when used with SWFUpload 2.2 beta 4, which is what I was testing it with. I shall drop in SWFUpload 2.2 beta 3 (what you used) and see if I can duplicate your success.

temporary
7 Jan 2009, 1:42 AM
hmmm... are you sure?

i just updated my source here to b4, and it works (again) like a charm ;-)

inportb
7 Jan 2009, 1:44 AM
Even if I hotlink the files off your website, it fails. Maybe I shouldn't be writing code at 4:45 in the morning =D
But, it's comforting to see that you have it working.

Will investigate during a more suitable time. hehe.

temporary
7 Jan 2009, 3:30 AM
hehe right ;-)

smokeman
7 Jan 2009, 8:56 AM
guys, this is an example of an extension gone awry!!!
I downloaded the original(no edit on original post about temporary's fix), spent 2 hours trying to get it to work with the swfupload 2.2beta4,
I spent half a day looking through every post on this thread trying to get it to work..., only to see temporary's fix(which worked perfectly frist time I put it on server)...
then, saw inportb's version...,
we need to clean this up....

Can mikegiddens edit his first post, with "temporary has a new version", and link to it?
also, can we put this version on the example page(and possibly update it with the 2.2.0 beta 4 swfupload?)

I'm sure this would save others a ton of time.
We should update the demo with this version too, to show it is still working(otherwise people see the add files button does nothing.)


thanks,
smokeman

inportb
7 Jan 2009, 9:51 AM
I've heard that mikegiddens has been quite busy, but he'll most likely get to it this month.

@temporary: I have your example working and I see what you have done. You're using the overlay approach... neat!
SWFUpload has a destroy method; idk if this is necessary, but I call that on[grid]destroy.

smokeman
7 Jan 2009, 10:14 AM
temporary's version does work in IE, but I had to comment out all of the
if(this.debug) console.log('x'); lines.
IE must not have been interpreting if this.debug was defined, and running that code anyway.

I also noticed that the upload progress bars work fine, just really fast, so if you blink, you'll miss them on smaller files. I do have a problem with the 'uploading...' status still there after finish, but I think I read about that earlier...so I'll look it up. I'm probably not passing something in my upload.php file.
edit:yes, I wasn't returning
{status:success}

I had left the default debug:true in the example config....dohh!

inportb
7 Jan 2009, 11:56 AM
I see now why it worked for temporary but didn't work for me.

The extension requires that a certain em element (the button text) knows its dimensions when the SWFUpload is created, so that an appropriately-sized button can be created. I noticed that my SWFUpload was initialized just fine, but it had zero size. In my setup, the SwfUploadPanel is in an accordion panel that's hidden at the start. When it is pulled up, the em appears to return zero for size. However, if I make the panel displayed by default, the size is correctly returned.

This might be a binding issue. Any ideas?

temporary
8 Jan 2009, 2:50 AM
I see now why it worked for temporary but didn't work for me.

The extension requires that a certain em element (the button text) knows its dimensions when the SWFUpload is created, so that an appropriately-sized button can be created. I noticed that my SWFUpload was initialized just fine, but it had zero size. In my setup, the SwfUploadPanel is in an accordion panel that's hidden at the start. When it is pulled up, the em appears to return zero for size. However, if I make the panel displayed by default, the size is correctly returned.

This might be a binding issue. Any ideas?

Ahh.... gee. Accordion layout really sucks :(
I have posted a bug report for just this problem a while ago, but there was no solution. Having the same problem here, but with comboboxes and other stuff. If only the Accordion layout would support off-screen-rendering...

Ok, the solution would be to provide button-sizes from the outside - makes it tricky when you're using I18N, but I don't know any other way.

Will release a new version with the new swfupload b4 and the above mentioned.

temporary
8 Jan 2009, 2:51 AM
guys, this is an example of an extension gone awry!!!
I downloaded the original(no edit on original post about temporary's fix), spent 2 hours trying to get it to work with the swfupload 2.2beta4,
I spent half a day looking through every post on this thread trying to get it to work..., only to see temporary's fix(which worked perfectly frist time I put it on server)...
then, saw inportb's version...,
we need to clean this up....

Can mikegiddens edit his first post, with "temporary has a new version", and link to it?
also, can we put this version on the example page(and possibly update it with the 2.2.0 beta 4 swfupload?)

I'm sure this would save others a ton of time.
We should update the demo with this version too, to show it is still working(otherwise people see the add files button does nothing.)


thanks,
smokeman

Yes, you're right. Maybe it's time for a new thread and a link in the first post...

@mikegiddens: do you still want to be main maintainer of this extension? Otherwise I would like to take it over.

inportb
8 Jan 2009, 8:45 AM
Yeah... I ditched the accordion layout. It just didn't do it for me lol.
Another solution is to make that panel exposed and programmatically switch to the desired panel after rendering. It's ugly but I think it'd work.

btw, mikegiddens indicated that he's been updating his code a couple of days ago and will be releasing a new version soon. It'd be fun to try when it happens =p

genTaliaru
11 Jan 2009, 7:05 AM
The Swf upload panel contains 3 colums file name,size and status.
if i upload a file it always says Completed in the status colums, even in the php upload file in the first row has code exit("blaah");

Here's my question how i send back a error from php file to upload panel.

akothari
14 Jan 2009, 8:47 AM
Hi,

I migrated to the Ext.ux.SwfUploadPanel 0.3, but am getting the following error in FF3 and IE7.

uncaught exception : Call to SetPostParams failed

On IE7 i also get
console is undefined Error

However, the file uploader works perfectly, i am able to upload files.

Thanks

akothari
14 Jan 2009, 10:52 AM
I could pin-point where exactly the error is coming..

when i call the addPostParam("key","value") method

I hope this is helpful.

hayz
16 Jan 2009, 1:21 AM
I have the same problem with post params.

I think when you set them you need to reinitalise the flash move, although i don't have a fix yet.

Any one got an idea?

Mike

hayz
16 Jan 2009, 3:40 AM
I found a simple work around to this:

Ext.getCmp('previewUpload').on('swfUploadLoaded', function(panel){
panel.addPostParam('BriefID', Glue.Data.PreviewBriefId);
});

This basically sends variables once the move is initialised. This works for me because this event is triggered every time the tab containing the upload panel comes into focus.

mikegiddens
27 Jan 2009, 8:22 PM
I have not had the time to maintain this project and I see that temporary wants to take the project over so if you start a new thread I will post something in the first post to point to the new Flash 10 version.

Thanks temporary for taking this over.

temporary
28 Jan 2009, 3:51 PM
hi mike, thanks for your effort.

was kinda busy the last days, but i'll open a new thread soon (i hope tomorrow), with a new version. will send you a PM when it's there.

smokeman
5 Feb 2009, 8:13 AM
can you also post here, with the link to the new thread?
thanks,
smokeman

smokeman
5 Feb 2009, 8:28 AM
@temporary
I was hoping you could help me with a strange rendering problem when I try to stick the upload panel in a width 300 west border panel.
I added some extra config options, so I could control the width of the columns.
name_width:
size_width:
and status_width:
size, and status work fine, since they are passed directly to their respective column configs in SwfUploadPanel.js:

/**
* @cfg {String} name_width
* Show a confirmation box on deletion of queued files.
*/
name_width: "150",
/**
* @cfg {String} size_width
* Show a confirmation box on deletion of queued files.
*/
size_width: "50",
/**
* @cfg {String} status_width
* Show a confirmation box on deletion of queued files.
*/
status_width: "90",

// standard grid parameters
autoExpandColumn: 'name',
enableColumnResize: false,
enableColumnMove: false,
autoExpandMin: 180,
//autoExpandMin: this.name_width,

this.columns = [{
id:'name',
header: this.strings.header_filename,
dataIndex: 'name'
},{
id:'size',
header: this.strings.header_size,
width: this.size_width,
dataIndex: 'size',
renderer: this.formatBytes
},{
id:'status',
header: this.strings.header_status,
width: this.status_width,
dataIndex: 'status',
renderer: this.formatStatus.createDelegate(this)
}];
this.suo = new SWFUpload({
button_placeholder_id: suoID,
button_width: em.getWidth(),
button_height: em.getHeight(),
button_cursor: SWFUpload.CURSOR.HAND,
button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,

upload_url: this.upload_url,
post_params: this.post_params,
file_post_name: this.file_post_name,
file_size_limit: this.file_size_limit,
file_queue_limit: this.file_queue_limit,
file_types: this.file_types,
file_types_description: this.file_types_description,
file_upload_limit: this.file_upload_limit,
flash_url: this.flash_url,
name_width: this.name_width,
size_width: this.size_width,
status_width: this.status_width,


it's the name width I'm having trouble with. If I add the autoExpandMin: to the standard grid params, and put in a width there, it works fine....
but when I set it to this.name_width, it doesn't work.

I use the upload panel in several locations, so I would like it to be a config setting for each new uploadpanel.

Any ideas why a hardcoded width would work for that, but not a variable?

lombras
3 Jun 2009, 4:09 AM
Hello,

This plugin open the panel with a grid inside, i need a single field like ext fileupload extension, but with file_size_limit.

how can i do a upload like this sample: http://demo.swfupload.org/v220/formsdemo/index.php

Its possible or I need change the code?

Thks!!

mschwartz
30 Jun 2009, 4:48 AM
I hacked it to work with Ext 3.0 RC 1.1.



// Create user extension namespace
Ext.namespace('Ext.ux');

/**
* @class Ext.ux.SwfUploadPanel
* @extends Ext.grid.GridPanel

* Makes a Panel to provide the ability to upload multiple files using the SwfUpload flash script.
*
* @author Stephan Wentz
* @author Michael Giddens (Original author)
* @website http://www.brainbits.net
* @created 2008-02-26
* @version 0.5
*
* known_issues
* - Progress bar used hardcoded width. Not sure how to make 100% in bbar
* - Panel requires width / height to be set. Not sure why it will not fit
* - when panel is nested sometimes the column model is not always shown to fit until a file is added. Render order issue.
*
* @constructor
* @param {Object} config The config object
*/
Ext.ux.SwfUploadPanel = Ext.extend(Ext.grid.GridPanel, {

/**
* @cfg {Object} strings
* All strings used by Ext.ux.SwfUploadPanel
*/
strings: {
text_add: 'Add File(s)',
text_upload: 'Upload File(s)',
text_cancel: 'Cancel Upload',
text_clear: 'Clear Queue',
text_progressbar: 'Progress Bar',
text_remove: 'Remove File',
text_remove_sure: 'Are you sure you wish to remove this file from queue?',
text_error: 'Error',
text_uploading: 'Uploading file: {0} ({1} of {2})',
header_filename: 'Filename',
header_size: 'Size',
header_status: 'Status',
status: {
0: 'Queued',
1: 'Uploading...',
2: 'Completed',
3: 'Error',
4: 'Cancelled'
},
error_queue_exceeded: 'The selected file(s) exceed(s) the maximum number of {0} queued files.',
error_queue_slots_0: 'There is no slot left',
error_queue_slots_1: 'There is only one slot left',
error_queue_slots_2: 'There are only {0} slots left',
error_size_exceeded: 'The selected files size exceeds the allowed limit of {0}.',
error_zero_byte_file: 'Zero byte file selected.',
error_invalid_filetype: 'Invalid filetype selected.',
error_file_not_found: 'File not found 404.',
error_security_error: 'Security Error. Not allowed to post to different url.'
},

/**
* @cfg {Boolean} single_select
* True to allow multiple file selections, false for single file selection.
* Please note that this doesn't affect the number of allowed files in the queue.
* Use the {@link #file_queue_limit} parameter to change the allowed number of files in the queue.
*/
single_select: false,
/**
* @cfg {Boolean} confirm_delete
* Show a confirmation box on deletion of queued files.
*/
confirm_delete: true,
/**
* @cfg {String} file_types
* Allowed file types for the File Selection Dialog. Use semi-colon as a seperator for multiple file-types.
*/
file_types: "*.*", // Default allow all file types
/**
* @cfg {String} file_types
* A text description that is displayed to the user in the File Browser dialog.
*/
file_types_description: "All Files", //
/**
* @cfg {String} file_size_limit
* The file_size_limit setting defines the maximum allowed size of a file to be uploaded.
* This setting accepts a value and unit. Valid units are B, KB, MB and GB. If the unit is omitted default is KB.
* A value of 0 (zero) is interpretted as unlimited.
*/
file_size_limit: "1048576", // Default size limit 100MB
/**
* @cfg {String} file_upload_limit
* Defines the number of files allowed to be uploaded by SWFUpload.
* This setting also sets the upper bound of the {@link #file_queue_limit} setting.
* The value of 0 (zero) is interpretted as unlimited.
*/
file_upload_limit: "0", // Default no upload limit
/**
* @cfg {String} file_queue_limit
* Defines the number of unprocessed files allowed to be simultaneously queued.
* The value of 0 (zero) is interpretted as unlimited.
*/
file_queue_limit: "0", // Default no queue limit
/**
* @cfg {String} file_post_name
* The file_post_name allows you to set the value name used to post the file.
*/
file_post_name: "Filedata", // Default name
/**
* @cfg {String} flash_url
* The full, absolute, or relative URL to the Flash Control swf file.
*/
flash_url: "swfupload.swf", // Default url, relative to the page url
/**
* @cfg {Boolean} debug
* A boolean value that defines whether the debug event handler should be fired.
*/
debug: false,

// standard grid parameters
autoExpandColumn: 'name',
enableColumnResize: false,
enableColumnMove: false,

// private
upload_cancelled: false,

// private
initComponent: function() {
var grid = this;
this.addEvents(
/**
* @event swfUploadLoaded
* Fires after the Flash object has been loaded
* @param {Ext.grid.GridPanel} grid This grid
*/
'swfUploadLoaded',
/**
* @event swfUploadLoaded
* Fires after a file has been qeueud
* @param {Ext.grid.GridPanel} grid This grid
* @param {Object} file The file object that produced the error
*/
'fileQueued',
/**
* @event startUpload
* Fires before the upload starts
* @param {Ext.grid.GridPanel} grid This grid
*/
'startUpload',
/**
* @event fileUploadError
* Fires after an upload has been stopped or cancelled
* @param {Ext.grid.GridPanel} grid This grid
* @param {Object} file The file object that produced the error
* @param {String} code The error code
* @param {String} message Supplemental error message
*/
'fileUploadError',
/**
* @event fileUploadSuccess
* Fires after an upload has been successfully uploaded
* @param {Ext.grid.GridPanel} grid This grid
* @param {Object} file The file object that has been uploaded
* @param {Object} data The response data of the upload request
*/
'fileUploadSuccess',
/**
* @event fileUploadComplete
* Fires after the upload cycle for one file finished
* @param {Ext.grid.GridPanel} grid This grid
* @param {Object} file The file object that has been uploaded
*/
'fileUploadComplete',
/**
* @event fileUploadComplete
* Fires after the upload cycle for all files in the queue finished
* @param {Ext.grid.GridPanel} grid This grid
*/
'allUploadsComplete',
/**
* @event fileUploadComplete
* Fires after one or more files have been removed from the queue
* @param {Ext.grid.GridPanel} grid This grid
*/
'removeFiles',
/**
* @event fileUploadComplete
* Fires after all files have been removed from the queue
* @param {Ext.grid.GridPanel} grid This grid
*/
'removeAllFiles'
);

this.rec = Ext.data.Record.create([
{name: 'name'},
{name: 'size'},
{name: 'id'},
{name: 'type'},
{name: 'creationdate', type: 'date', dateFormat: 'm/d/Y'},
{name: 'status'}
]);

this.store = new Ext.data.Store({
reader: new Ext.data.JsonReader({
id: 'id'
}, this.rec)
});

this.columns = [{
id:'name',
header: this.strings.header_filename,
dataIndex: 'name'
},{
id:'size',
header: this.strings.header_size,
width: 80,
dataIndex: 'size',
renderer: this.formatBytes
},{
id:'status',
header: this.strings.header_status,
width: 80,
dataIndex: 'status',
renderer: this.formatStatus.createDelegate(this)
}];

this.sm = new Ext.grid.RowSelectionModel({
singleSelect: this.single_select
});


this.progress_bar = new Ext.ProgressBar({
text: this.strings.text_progressbar
// width: this.width - 7
});

this.tbar = [{
text: this.strings.text_add,
iconCls: 'SwfUploadPanel_iconAdd',
id: 'swfuploadpanel-add-button',
xhandler: function() {
if (this.single_select) {
this.suo.selectFile();
}
else {
this.suo.selectFiles();
}
},
xscope: this,
listeners: {
render: function() {
grid.myInit();
}
}
}, '->', {
text: this.strings.text_cancel,
id: 'swfuploadpanel-cancel-button',
iconCls: 'SwfUploadPanel_iconCancel',
handler: this.stopUpload,
scope: this,
hidden: true
}, {
text: this.strings.text_upload,
id: 'swfuploadpanel-upload-button',
iconCls: 'SwfUploadPanel_iconUpload',
handler: this.startUpload,
scope: this,
hidden: true
}, {
text: this.strings.text_clear,
id: 'swfuploadpanel-clear-button',
iconCls: 'SwfUploadPanel_iconClear',
handler: this.removeAllFiles,
scope: this,
hidden: false
}];

this.bbar = [
this.progress_bar
];

Ext.ux.SwfUploadPanel.superclass.initComponent.call(this);
this.addListener({
keypress: {
fn: function(e) {
if (this.confirm_delete) {
if(e.getKey() == e.DELETE) {
Ext.MessageBox.confirm(this.strings.text_remove,this.strings.text_remove_sure, function(e) {
if (e == 'yes') {
this.removeFiles();
}
}, this);
}
} else {
this.removeFiles(this);
}
},
scope: this
},

// Prevent the default right click to show up in the grid.
contextmenu: function(e) {
e.stopEvent();
}
});
},
onRender: function() {
Ext.ux.SwfUploadPanel.superclass.onRender.apply(this,arguments);

this.resizeProgressBar();
var tb = this.getTopToolbar();
this.addBtn = Ext.getCmp('swfuploadpanel-add-button');
this.cancelBtn = Ext.getCmp('swfuploadpanel-cancel-button');
this.uploadBtn = Ext.getCmp('swfuploadpanel-upload-button');
this.clearBtn = Ext.getCmp('swfuploadpanel-clear-button');
this.on('resize', this.resizeProgressBar, this);

},
myInit: function() {
var suoID = Ext.id();
var em = this.addBtn.el.child('em');
em.setStyle({
position: 'relative',
display: 'block'
});
em.createChild({
tag: 'div',
id: suoID
});
this.suo = new SWFUpload({
button_placeholder_id: suoID,
button_width: em.getWidth(),
button_height: em.getHeight(),
button_cursor: SWFUpload.CURSOR.HAND,
button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,

upload_url: this.upload_url,
post_params: this.post_params,
file_post_name: this.file_post_name,
file_size_limit: this.file_size_limit,
file_queue_limit: this.file_queue_limit,
file_types: this.file_types,
file_types_description: this.file_types_description,
file_upload_limit: this.file_upload_limit,
flash_url: this.flash_url,

// Event Handler Settings
swfupload_loaded_handler: this.swfUploadLoaded.createDelegate(this),

file_dialog_start_handler: this.fileDialogStart.createDelegate(this),
file_queued_handler: this.fileQueue.createDelegate(this),
file_queue_error_handler: this.fileQueueError.createDelegate(this),
file_dialog_complete_handler: this.fileDialogComplete.createDelegate(this),

upload_start_handler: this.uploadStart.createDelegate(this),
upload_progress_handler: this.uploadProgress.createDelegate(this),
upload_error_handler: this.uploadError.createDelegate(this),
upload_success_handler: this.uploadSuccess.createDelegate(this),
upload_complete_handler: this.uploadComplete.createDelegate(this),

debug: this.debug,
debug_handler: this.debugHandler
});

Ext.get(this.suo.movieName).setStyle({
position: 'absolute',
top: 0,
left: 0
});
},

// private
resizeProgressBar: function() {
if (this.progress_bar.el) {
this.progress_bar.setWidth(this.getBottomToolbar().el.getWidth() - 5);
Ext.fly(this.progress_bar.el.dom.firstChild.firstChild).applyStyles("height: 16px");
}
},

/**
* SWFUpload debug handler
* @param {Object} line
*/
debugHandler: function(line) {
console.log(line);
},

/**
* Formats file status
* @param {Integer} status
* @return {String}
*/
formatStatus: function(status) {
return this.strings.status[status];
},

/**
* Formats raw bytes into kB/mB/GB/TB
* @param {Integer} bytes
* @return {String}
*/
formatBytes: function(size) {
if (!size) {
size = 0;
}
var suffix = ["B", "KB", "MB", "GB"];
var result = size;
size = parseInt(size, 10);
result = size + " " + suffix[0];
var loop = 0;
while (size / 1024 > 1) {
size = size / 1024;
loop++;
}
result = Math.round(size) + " " + suffix[loop];

return result;

if(isNaN(bytes)) {
return ('');
}

var unit, val;

if(bytes < 999) {
unit = 'B';
val = (!bytes && this.progressRequestCount >= 1) ? '~' : bytes;
} else if(bytes < 999999) {
unit = 'kB';
val = Math.round(bytes/1000);
} else if(bytes < 999999999) {
unit = 'MB';
val = Math.round(bytes/100000) / 10;
} else if(bytes < 999999999999) {
unit = 'GB';
val = Math.round(bytes/100000000) / 10;
} else {
unit = 'TB';
val = Math.round(bytes/100000000000) / 10;
}

return (val + ' ' + unit);
},

/**
* SWFUpload swfUploadLoaded event
*/
swfUploadLoaded: function() {
if(this.debug) console.info('SWFUPLOAD LOADED');

this.fireEvent('swfUploadLoaded', this);
},

/**
* SWFUpload fileDialogStart event
*/
fileDialogStart: function() {
if(this.debug) console.info('FILE DIALOG START');

this.fireEvent('fileDialogStart', this);
},

/**
* Add file to store / grid
* SWFUpload fileQueue event
* @param {Object} file
*/
fileQueue: function(file) {
if(this.debug) console.info('FILE QUEUE');

file.status = 0;
r = new this.rec(file);
r.id = file.id;
this.store.add(r);

this.fireEvent('fileQueued', this, file);
},

/**
* Error when file queue error occurs
* SWFUpload fileQueueError event
* @param {Object} file
* @param {Integer} code
* @param {string} message
*/
fileQueueError: function(file, code, message) {
if(this.debug) console.info('FILE QUEUE ERROR');

switch (code) {
case -100:
var slots;
switch(message) {
case '0':
slots = this.strings.error_queue_slots_0;
break;
case '1':
slots = this.strings.error_queue_slots_1;
break;
default:
slots = String.format(this.strings.error_queue_slots_2, message);
}
Ext.MessageBox.alert(this.strings.text_error, String.format(this.strings.error_queue_exceeded + ' ' + slots, this.file_queue_limit));
break;

case -110:
Ext.MessageBox.alert(this.strings.text_error, String.format(this.strings.error_size_exceeded, this.formatBytes(this.file_size_limit * 1024)));
break;

case -120:
Ext.MessageBox.alert(this.strings.text_error, this.strings.error_zero_byte_file);
break;

case -130:
Ext.MessageBox.alert(this.strings.text_error, this.strings.error_invalid_filetype);
break;
}

this.fireEvent('fileQueueError', this, file, code, error);
},

/**
* SWFUpload fileDialogComplete event
* @param {Integer} file_count
*/
fileDialogComplete: function(file_count) {
if(this.debug) console.info('FILE DIALOG COMPLETE');

if (file_count > 0) {
this.uploadBtn.show();
}

this.addBtn.show();
this.clearBtn.show();

this.fireEvent('fileDialogComplete', this, file_count);
},

/**
* SWFUpload uploadStart event
* @param {Object} file
*/
uploadStart: function(file) {
if(this.debug) console.info('UPLOAD START');

this.fireEvent('uploadStart', this, file);

return true;
},

/**
* SWFUpload uploadProgress event
* @param {Object} file
* @param {Integer} bytes_completed
* @param {Integer} bytes_total
*/
uploadProgress: function(file, bytes_completed, bytes_total) {
if(this.debug) console.info('UPLOAD PROGRESS');

this.store.getById(file.id).set('status', 1);
this.store.getById(file.id).commit();
this.progress_bar.updateProgress(bytes_completed/bytes_total, String.format(this.strings.text_uploading, file.name, this.formatBytes(bytes_completed), this.formatBytes(bytes_total)));

this.fireEvent('uploadProgress', this, file, bytes_completed, bytes_total);
},

/**
* SWFUpload uploadError event
* Show notice when error occurs
* @param {Object} file
* @param {Integer} error
* @param {Integer} code
* @return {}
*/
uploadError: function(file, error, code) {
if(this.debug) console.info('UPLOAD ERROR');

switch (error) {
case -200:
Ext.MessageBox.alert(this.strings.text_error, this.strings.error_file_not_found);
break;

case -230:
Ext.MessageBox.alert(this.strings.text_error, this.strings.error_security_error);
break;

case -290:
this.store.getById(file.id).set('status', 4);
this.store.getById(file.id).commit();
break;
}

this.fireEvent('fileUploadError', this, file, error, code);
},

/**
* SWFUpload uploadSuccess event
* @param {Object} file
* @param {Object} response
*/
uploadSuccess: function(file, response) {
if(this.debug) console.info('UPLOAD SUCCESS');

var data = Ext.decode(response);
if (data.success) {
this.store.remove(this.store.getById(file.id));
} else {
this.store.getById(file.id).set('status', 3);
this.store.getById(file.id).commit();
if (data.msg) {
Ext.MessageBox.alert(this.strings.text_error, data.msg);
}
}


this.fireEvent('fileUploadSuccess', this, file, data);
},

/**
* SWFUpload uploadComplete event
* @param {Object} file
*/
uploadComplete: function(file) {
if(this.debug) console.info('UPLOAD COMPLETE');

this.progress_bar.reset();
this.progress_bar.updateText(this.strings.text_progressbar);

if(this.suo.getStats().files_queued && !this.upload_cancelled) {
this.suo.startUpload();
} else {
this.fireEvent('fileUploadComplete', this, file);

this.allUploadsComplete();
}

},

/**
* SWFUpload allUploadsComplete method
*/
allUploadsComplete: function() {
this.cancelBtn.hide();
this.addBtn.show();
this.clearBtn.show();

this.fireEvent('allUploadsComplete', this);
},

/**
* SWFUpload setPostParams method
* @param {String} name
* @param {String} value
*/
addPostParam: function(name, value) {
if (this.suo) {
this.suo.settings.post_params[name] = value;
this.suo.setPostParams(this.suo.settings.post_params);
} else {
this.post_params[name] = value;
}
},

/**
* Start file upload
* SWFUpload startUpload method
*/
startUpload: function() {
if(this.debug) console.info('START UPLOAD');

this.cancelBtn.show();
this.uploadBtn.hide();
this.clearBtn.hide();
// this.addBtn.hide();

this.upload_cancelled = false;

this.fireEvent('startUpload', this);

this.suo.startUpload();
},

/**
* SWFUpload stopUpload method
* @param {Object} file
*/
stopUpload: function(file) {
if(this.debug) console.info('STOP UPLOAD');

this.suo.stopUpload();

this.upload_cancelled = true;

this.getStore().each(function() {
if (this.data.status == 1) {
this.set('status', 0);
this.commit();
}
});

this.cancelBtn.hide();
if (this.suo.getStats().files_queued > 0) {
this.uploadBtn.show();
}
this.addBtn.show();
this.clearBtn.show();

this.progress_bar.reset();
this.progress_bar.updateText(this.strings.text_progressbar);

},

/**
* Delete one or multiple rows
* SWFUpload cancelUpload method
*/
removeFiles: function() {
if(this.debug) console.info('REMOVE FILES');

var selRecords = this.getSelections();
for (var i=0; i < selRecords.length; i++) {
if (selRecords[i].data.status != 1) {
this.suo.cancelUpload(selRecords[i].id);
this.store.remove(selRecords[i]);
}
}

if (this.suo.getStats().files_queued === 0) {
this.uploadBtn.hide();
// this.clearBtn.hide();
}

this.fireEvent('removeFiles', this);
},

/**
* Clear the Queue
* SWFUpload cancelUpload method
*/
removeAllFiles: function() {
if(this.debug) console.info('REMOVE ALL');

// mark all internal files as cancelled
var files_left = this.suo.getStats().files_queued;

while (files_left > 0) {
this.suo.cancelUpload();
files_left = this.suo.getStats().files_queued;
}

this.store.removeAll();

this.cancelBtn.hide();
this.uploadBtn.hide();
// this.clearBtn.hide();

this.fireEvent('removeAllFiles', this);
}

});

rmh1
8 Jul 2009, 1:50 AM
hi all,

bit of a noob at this (file upload and extjs in general :">) - I'm trying to make a webapp in extjs 3.0 and i want the users to be able to select multiple files to upload, and once uploaded/selected i want to process the files and read the content in to a database (im using json/java backend to process and handle database interaction).


Is this the best extension to use for this or am i barking up the wrong tree? is it just a case of modifying some functions to handle the required files?

cheers all!

bk0563
12 Jul 2009, 3:42 AM
Yes, you're right. Maybe it's time for a new thread and a link in the first post...

@mikegiddens: do you still want to be main maintainer of this extension? Otherwise I would like to take it over.

Was there a new thread created on this subject? I would like to try your code but I'm having hard time finding it... :)

Selvatico
16 Jul 2009, 10:46 PM
Thanks alot for your plugin. Tomoroww succsesfuly uset for my site. Works perfect with ExtJs. 3.0.

marcing
27 Jul 2009, 4:24 AM
I can't get it to work with ExtJS 3.0, worked perfectly with 2.2.

mschwartz's fixes seem to help a little - the window opens, but "Add files" button doesn't do anything. Can anyone post combination of swfupload.js, swfupload.swf and swfuploadpanel that works with 3.0 final?

UPDATE:
Problem was caused by animateTarget, without it swfuploadpanel works.

casbar
11 Aug 2009, 8:24 AM
How is it possible to change dynamically the upload direcotry, where the uploaded files will be put in?

I have already a field which contains the location, but the problem is that I think the swf file calls the "upload.php" and so I cant send them any parameter!!

HELP!!! :((

bjt
31 Aug 2009, 1:43 AM
@marcing (http://extjs.com/forum/member.php?u=3034)


i cant get it work with ext3.
can you please post your swfupload.js, swfupload.swf and swfuploadpanel.js files.

marcing
31 Aug 2009, 2:07 AM
Here you go:

wallacer
31 Aug 2009, 4:11 PM
Can anyone give me some advice as to why the "add" button doesn't do anything? I haven't made any changes to the plugin yet. I noticed it didn't work for me on the live demo either? I'm using the latest FF.

wallacer
31 Aug 2009, 4:20 PM
Can anyone give me some advice as to why the "add" button would not be working for me? I haven't made any real changes to the plugin yet, but clicking the "add" button seems to have no effect. It doesn't throw a js error or anything, it just does nothing. Im' using the latest FF. :-?

dsrdaniel
4 Sep 2009, 8:33 AM
I got the same problem with the Add File button that wasnt working.
I´m using the marcing´s version (posted above).

The solution:

The Add file tbar element (look for text_add):


xhandler: function() {
if (this.single_select) {
this.suo.selectFile();
}
else {
this.suo.selectFiles();
}
},
xscope: this,

i dont know why this "x" in front of these attributes, the correct way:


handler: function() {
if (this.single_select) {
this.suo.selectFile();
}
else {
this.suo.selectFiles();
}
},
scope: this,

At least, worked for me very well.

janniss
15 Sep 2009, 2:02 AM
First let me thank you for cool feature. I am developing web application in GWT and I want to use swf upload panel or just swf Add button. Is there anyone who is able to port last version of js to gwt?
Martin

wallacer
17 Sep 2009, 1:37 PM
To answer my own previous question, Flash 10 doesn't support file browsing apparently.

mschwartz
21 Sep 2009, 8:11 AM
http://swfupload.org/forum/generaldiscussion/551

The response from Adobe on the Adobe Forms is that a security change in Flash Player 10 prevents indirect calls display to File Dialogs.

This means that the SWFUpload JavaScript API cannot trigger the File Dialog in Flash.
Which means SWFUpload is permanently broken for Flash Player 10.

We have 4 options:
1. Hope Adobe will have mercy and roll back this change and save SWFUpload.
2. SWFUpload support ends at Flash Player 9 and is not moved to Flash Player 10 (in other words, the project dies in 6 months to a year after the release of Flash Player 10).
3. Change the SWFUpload whole design philosophy dropping the JavaScript API (at least the portion that triggers File Dialogs and starts/stops/cancels uploads) and forcing a Flash Movie UI on our users.
4. Try to implement a kind of mix of Flash UI and HTML UI and complicate things by making the Flash UI configurable enough to match the HTML UI.

Unless Adobe is going to take their FileReference APIs serious and fix the bugs that are plaguing us (mod_security issues, data return issues, IO Error issues, Linux compatibility, etc) then I don't see a very bright future for any Flash based upload component. Is it worth the fight?

Egor
28 Sep 2009, 1:29 PM
http://swfupload.org/forum/generaldiscussion/551

The response from Adobe on the Adobe Forms is that a security change in Flash Player 10 prevents indirect calls display to File Dialogs.

This means that the SWFUpload JavaScript API cannot trigger the File Dialog in Flash.
Which means SWFUpload is permanently broken for Flash Player 10.

That's a very old (2008) post from the SWFUpload forums. They have released a SWFUpload 2.2.0 which lists "Flash Player 10 Compatibility" as a feature.

I haven't tested Ext.ux.SwfUploadPanel yet, but has anyone got it working with SWFUpload 2.2.0 + Flash 10 + ExtJS 3.0?

tomalex0
13 Oct 2009, 2:49 AM
I have used swfupload , downloaded from this forum and manged to worked in 2.2 , however errors are shown in version 3
i have attached the file, jst run in localhost or your server

stalinrules
14 Nov 2009, 5:45 PM
Question on using SWFUpload 2.5.0 Alpha Core (11/4/2009 release) with ExtJs 3.0:

1. I'm using marcing's Ext.ux.SwfUploadPanel.js version for ExtJs 3.0 -- changed the reference to CMS Icon and the xhandler block comment to handler and the upload window loads in the browser with ExtJs 3.0.

2. I downloaded the new swfupload 2.5.0 and added swfupload.swf and swfupload.js into the directory with Ext.ux.SwfUploadPanel.js. However the add button is not firing.

Should this approach work? I am thinking I may have something else wrong but I wanted to know if it's even possible to get this to work with Flash 10 like this before I debug further.

Thanks!

abhijeet.mane
14 Apr 2010, 10:31 PM
Hello,

I am developing a web application with extjs which requires a mulitple select file upload functionality.I have used the above SWF code and it is really useful and exactly matches my requirement,But instead of the flash button i require to make it work on the Extjs button.To make this work i need the FLA for the flash file.

Can you please help me out of this.

Thanks,
Abhijeet Mane.

smokeman
23 Apr 2010, 8:24 AM
I've been using this for a while, in a variety of projects, and just now came across the need to send a postparam. basically, I need to pass the id of a selected row, so the upload.php file knows what item to associate an uploaded file with.
I see the addPostParam: but have no idea how to use it. can anyone help?

smokeman
23 Apr 2010, 10:28 AM
I was able to add a rowselect listener to my grid that set the panel's postparams each time a row is selected, assigning the file it's associated id

Ext.getCmp('legfilesuploadpanel').on('startUpload', function(panel){
legitem=Ext.getCmp('legislationgrid').getSelectionModel().getSelected().data.id;
panel.addPostParam('id', legitem);
});

amtallah
11 Mar 2011, 1:38 AM
dears,

I tried to use swfuplaodpanel version 4, I faced two problems:

First: the Progress bar don't work on any browser.

Second: (Add Files) job don't work on IE and Firefox. Only works on Chrome and Safari.

I have the nearly latest version from all browsers, ie9, firefox 3.6.14, safari 5.0.3, chrome 10.

Any advise from you will be very appreciated.
I need that urgently.

thank you in advance,
amt

amtallah
12 Mar 2011, 2:49 AM
i saw your example of swfuploadpanel, i have two problems here:

first, it doesn't work on IE 9, but works on FF 3.6, chrome 10, safari 5.0.3 , so what can i do for ie 9?

second, i want to change the server path in the .php file , which .php file i change in ? and where ?


thank you in advance.

amtallah
12 Mar 2011, 2:50 AM
i mean the example of tomalex0