PDA

View Full Version : Ext.ux.swfbtn - SwfUpload-2.2.0/ext-3.0/Flash 10 + features



danellison
16 Dec 2009, 8:13 AM
Greetings. Of course, kudos to the Ext team for creating such a rich and cool development environment. For me the learning curve has been steep but well worth it. Please keep it up!

I have searched pretty extensively to find an extension that allows me to use SwfUpload.swf for multiple file uploads. Seems there are a few out there but nothing I found really worked or did what I wanted so I have developed my own extension: Ext.ux.swfbtn.

This class extends Ext.Button so you can use it any place that a button could be used. The extension incorporates a grid presentation with add/remove from queue and clear queue methods. There are many configuration options outlined in the swfbtn.js file. To highlight a few, overall and per file progress bars, underlying JSON store auto reload after adding images, and the ability to attach a full form or an array of form fields that will be prompted for with each image upload. So, if like me, you need to be able to pass in dynamic data that goes with the image, you've got it!

You can see it in action at http://ns1-stl.ceillinois.com/~82fxrs-dan/swfbtn/test.php
or download it from http://ns1-stl.ceillinois.com/~82fxrs-dan/swfbtn/swfbtn.zip or from the attached zip file.

Released under MIT license.

Any critique of my programming style is welcome as I am still learning to think in object oriented style. IF there is a better way to do some of the things I have done here I would like to hear about it.

Otherwise, enjoy, improve, curse and upload away.

Regards,
Dan Ellison, Concepte of Illinois

Bobrovnik
16 Dec 2009, 11:05 AM
great work, thanks

scblue
16 Dec 2009, 5:45 PM
Hi,

Thanks for this. Will take a look.
As it is, I am also looking at SWFUpload to help me with my application.
I am wanting a Folder Browser that lets me select a browser path only, and not the file.
Can this do that?

Thanks!

danellison
17 Dec 2009, 8:19 AM
I don't think that SwfUpload itself will deal with folders. I have tried selecting a folder in the swfupload dialog and it seems to ignore anything that is not a regular file. So, I don't think that you can accomplish what you want with it.

scblue
20 Dec 2009, 6:26 PM
Thanks. Yeah, tried it and it didnt work.
Real nice tho...

kerbo
22 Dec 2009, 7:36 PM
I gave your code a spin and couldn't get it to work. A couple of problems:

1. The upload button doesn't render correctly (see pic)

2. The Add Files To Queue button doesn't work. I was going to debug but I can't find a button handler in the code.

Any ideas?

set_ti
23 Dec 2009, 5:21 AM
Hi, i tried using it as Toolbar button, but i i only get a disabled Button labled "None".
Is it possible to use this swfbtn as extension for htmleditor?
And second question: Does swbtn work with ext 3.1?

danellison
23 Dec 2009, 6:32 AM
I haven't tried using it in the htmleditor so I can't say one way or the other on that topic. It does work fine with Ext-3.1.0.

danellison
23 Dec 2009, 6:40 AM
I gave your code a spin and couldn't get it to work. A couple of problems:

1. The upload button doesn't render correctly (see pic)

2. The Add Files To Queue button doesn't work. I was going to debug but I can't find a button handler in the code.

Any ideas?

The button handler code is around line 553. this.addListener({'click':....

What type of container are you embedding the widget in? It looks like you might be using a renderTo div since the widget window isn't centered on your screen. What browser are you using? I have tested with Opera, Firefox and IE. All good there. More information please?

Dan

The

kerbo
23 Dec 2009, 9:55 AM
I got the button to work (bad setting) however the rendering is still messed up.

I'm using you upload window code as is (swfbtn.js). I open up the queue window using a button on a tool bar (again using the code from your demo).

I noticed in the code, the Flash object is embedded inside of the "Upload" Ext button. The object seems to be expanding the width of the Ext button (pushing the title over). I also noticed in your working demo, the Flash button seems to be sitting on top of the Ext button.

To get the button to work, I have to click to the left of the Ext button title. When doing so, you can see the rectangle of the Flash button.

I'm using FF 3.5.6.

kerbo
24 Dec 2009, 8:12 AM
I finally broke down and starting looking at the swfupload docs. I guess for Flash 10, the upload only works if the upload button is on a form. There is a "overlay" example that shows overlaying this button on top of an HTML button. This approach is used for swfbtn and is working for the demo example. In my case, its not working.

I'm not really sure what to do about it. Could this be a 3.1 issue?

kerbo
25 Dec 2009, 12:49 PM
I finally got it to work. There is a small piece of css code at the bottom of the test.php file that is required to make the button render correctly (it would be nice if this code was somehow embedded in the component).

In any case, the upload works great. The only other issue using the button is I don't know the values of the post parameters until after the button is rendered. I added a setPostParams method to the component to fix that problem.

prophet
8 Jan 2010, 9:29 AM
Great work! Thank you!

moegal
15 Jan 2010, 8:51 AM
will this work in extjs 2.x?

Also, can I use a combo box as a customparams?
[It does not seem to]

Thanks, Marty

jerrel
17 Jan 2010, 4:34 AM
Dear Dan Ellison,

Nice work, i've been looking for a solution like this one.
I checked out your example, and noticd that the status doesn't change after upload. Do you have a fix for this, are mabe a pointer how i can fix it.

Also is the progress indicator realtime, are is it just an animation?
I noticed that the bar gives the same result for both a 10 Kb file and a 1.97 MB file.


Looking foward to you reply.

regards
J

dizor
17 Jan 2010, 5:51 AM
I have problem with this and SWFupload generally. I'm using it in tabs and when tab is activated, i add files - everything working ok. But when i change tab to other and back to tab with swfupload ... queue is gone. The same problem is when i use swfbtn on window - everything working ok, but if i hide window, and then show one more time ... queue is gone.

Any solution?

Same problem at : http://www.extjs.com/forum/showthread.php?t=57861

When i manually change CSS style of the container to display:none - and then to display:none - in SWF DEBUG i see "SWFUpload Init Complete" , everytime when doing it. Maybe this clears queue?

EDIT: It's working ok if i use "hideMode: 'offsets'" with delete from ext css line "position: absolute !important".

robin30
7 Feb 2010, 6:56 AM
hi, i love you little plugin.

i'm using it rightnow for a little photo gallery.

the only problem i have is that the store will not reload.

this is my code:

var b2 = new Ext.ux.swfbtn({
id: 'button2',
text: 'Upload files',
hidden: false,
disabled: false,
store: picturestore,
tooltip:'hoi',
store:picturestore,
iconpath: '../Ext/3.1/examples/shared/icons/fam',
postparams: { session_id: '<?php echo session_id(); ?>'},
buttonimageurl: './SwfUpload/images/FullyTransparent_65x29.png',
uploadurl: 'upload.php?user='+username,
flashurl: './SwfUpload/Flash/swfupload.swf'
});

in swfbtn.js you wrote

// reload store data if we have a store defined
// note: must have global scope

what do you mean by global scope?
and how do i get my picturestore to be global?

thanks

Regards,
Robin30

danellison
7 Feb 2010, 9:48 AM
[QUOTE=robin30;434677]hi, i love you little plugin.

i'm using it rightnow for a little photo gallery.

the only problem i have is that the store will not reload.

this is my code:

var b2 = new Ext.ux.swfbtn({
id: 'button2',
text: 'Upload files',
hidden: false,
disabled: false,
store: picturestore,
tooltip:'hoi',
store:picturestore,
iconpath: '../Ext/3.1/examples/shared/icons/fam',
postparams: { session_id: '<?php echo session_id(); ?>'},
buttonimageurl: './SwfUpload/images/FullyTransparent_65x29.png',
uploadurl: 'upload.php?user='+username,
flashurl: './SwfUpload/Flash/swfupload.swf'
});

in swfbtn.js you wrote

// reload store data if we have a store defined
// note: must have global scope

what do you mean by global scope?
and how do i get my picturestore to be global?

Thanks for your comments. Glad it is working for you.
To access the store declare your variable in global scope:



<script type = "Text/javascript>
var mystore; // global scoped declaration

Ext.onReady(....
// in onReady handler or anywhere else in your program
// lack of 'var' uses globally declared var above
mystore = new Ext.data.JsonStore({
....
});
....
var btn = new swfbtn({
store: 'mystore', // send a string since it is eval'ed in swfbtn handler
....
});
....
);
</script>


Needs to be done a better way on my part. swfupload has an odd scope when invoking its handlers and the store wasn't addressable as I recall. A quick workaround approach since I was on a time table when I developed the widget.

Anyway, that's how it works for now. Make those small orgainzational changes and you should be good to go with store reloads.

Dan

robin30
7 Feb 2010, 2:19 PM
thank you for your reply.

really appreciate it.

i have it working, thank you so much.

i googled for it.

everything with a function is local everything that's not in a function is going to be global.

really nice work you did.

regards,

Robin30

meisong
7 Feb 2010, 10:04 PM
谢谢分享!!!

genie_vn
9 Feb 2010, 1:31 AM
When uploading multiple files, I have to press Begin Upload for each file, is this possible to upload all at once?

Thanks for nice extension

genie_vn
9 Feb 2010, 1:33 AM
When uploading multiple files, I have to press Begin Upload for each file, is this possible to upload all at once?

Thanks for nice extension

haldrix
24 Feb 2010, 5:10 AM
I have problem with this and SWFupload generally. I'm using it in tabs and when tab is activated, i add files - everything working ok. But when i change tab to other and back to tab with swfupload ... queue is gone. The same problem is when i use swfbtn on window - everything working ok, but if i hide window, and then show one more time ... queue is gone.

Any solution?

Same problem at : http://www.extjs.com/forum/showthread.php?t=57861

When i manually change CSS style of the container to display:none - and then to display:none - in SWF DEBUG i see "SWFUpload Init Complete" , everytime when doing it. Maybe this clears queue?

EDIT: It's working ok if i use "hideMode: 'offsets'" with delete from ext css line "position: absolute !important".

Hello, How did you do the "delete from ext css line "position: absolute !important" ?
I do not understand how you did it ?


{.....
style :{position:!Ext.isIE?'absolute':'relative'},
hideMode: 'offsets'
...}


something like that ? :-?

danellison
24 Feb 2010, 6:31 AM
Hello, How did you do the "delete from ext css line "position: absolute !important" ?
I do not understand how you did it ?


{.....
style :{position:!Ext.isIE?'absolute':'relative'},
hideMode: 'offsets'
...}


Well, I didn't write swfupload, just the Ext extension for it. Its internals are as big a mystery to me as to anybody. If you are using my widget unmodified then I am confused as to how you are switching tabs since my queue window is modal.

Otherwise, I guess "don't switch tabs while uploading" is the short answer.
Sorry I couldn't be of more help.

Dan

danellison
24 Feb 2010, 7:17 AM
When uploading multiple files, I have to press Begin Upload for each file, is this possible to upload all at once?

Thanks for nice extension

I haven't seen this behavior before. What version of Ext are you using? I have tested up through 3.1.0 but not with 3.1.1. You certainly shouldn't have to manually start the uploads. Let me know.

Dan

haldrix
24 Feb 2010, 7:39 AM
Well, I didn't write swfupload, just the Ext extension for it. Its internals are as big a mystery to me as to anybody. If you are using my widget unmodified then I am confused as to how you are switching tabs since my queue window is modal.

Otherwise, I guess "don't switch tabs while uploading" is the short answer.
Sorry I couldn't be of more help.

Dan

Thanks Dan, your extension is very usefull and well made. I was asking dizor because he seems to have solved the visibility problem. In my case when i switch tab in my app, the flash stops working...
For the moment the fix is to disable all tabs and use the event of your extension to enable them after uploadfinish.

Thanks again

danellison
25 Feb 2010, 2:09 PM
Dear Dan Ellison,
Also is the progress indicator realtime, are is it just an animation?
I noticed that the bar gives the same result for both a 10 Kb file and a 1.97 MB file.


The progess bar is as close to real time as swfupload can get. As each piece of the file is uploaded there is a callback from swfupload that tells me how much data has been sent. I use that data plus both the individual file size and the overall upload size to determine the percentage of completion for both the overall progress bar and the individual progress bar.

So the answer is: pretty much real time and reality

Dan

genie_vn
28 Feb 2010, 8:34 AM
I haven't seen this behavior before. What version of Ext are you using? I have tested up through 3.1.0 but not with 3.1.1. You certainly shouldn't have to manually start the uploads. Let me know.

Dan

Aha, my mistake, I did include the swfupload.js but not the queue plugin, everything is perfect now.

Cheers ~o)

mkwa72
2 Apr 2010, 1:47 AM
Hello,

nice work. :)

But your example is not working with FireFox (in my case FF 3.5.8). After selecting some files, clicking on "Begin upload" is not working.

Debug message is "SWF DEBUG: StartUpload(): No files found in the queue."

This has something to do with this (http://www.extjs.com/forum/showthread.php?t=57861) or this (http://swfupload.org/forum/generaldiscussion/1672) or this. (http://issues.fluidproject.org/browse/FLUID-3196)

Can you fix it in your distribution?

danellison
2 Apr 2010, 6:00 AM
Hello,

nice work. :)

But your example is not working with FireFox (in my case FF 3.5.8). After selecting some files, clicking on "Begin upload" is not working.

Debug message is "SWF DEBUG: StartUpload(): No files found in the queue."

This has something to do with this (http://www.extjs.com/forum/showthread.php?t=57861) or this (http://swfupload.org/forum/generaldiscussion/1672) or this. (http://issues.fluidproject.org/browse/FLUID-3196)

Can you fix it in your distribution?

According to everything I have read this is an issue with the flash object itself which I did not author. The widget works as long as you don't break the rules regarding manipulation of the DOM. Turn on debug and see if you can work your way through it. I have the sfwupload window coming up modal. That is about what I can do. The rest is up to the user.

Regards,
Dan

Kannabismus
5 Apr 2010, 8:13 AM
First of all, thanks for the essential extension!

I wonder, if it is possible to change cfg after button is rendered?
I want to alter postparams, but can't find it anywhere in DOM.

danellison
5 Apr 2010, 11:46 AM
First of all, thanks for the essential extension!

I wonder, if it is possible to change cfg after button is rendered?
I want to alter postparams, but can't find it anywhere in DOM.

Thank you for your comments on the extension.

To address your question: I don't know of the swfupload object will honor dynamic changes or not. However, I don't think you will find anything useful in the DOM since this is basically a transparent FLASH object hovering over an Ext.Button. The swf object should be addressable to you via the instanciation object you created. I map the actual flash object to an addressable atribute named "swf." Something like the following should change the values if they are indeed dynamic:


var swfbtn = new Ext.ux.swfbtn({
// configuration info here
});

....

Ext.apply(swfbtn.swf, {property1: property1value, ... }); // change a param for the swf object - will it work? Don't know for sure - should I would think.


Hope that is helpful. Enjoy!
Dan

jameswright
20 Apr 2010, 7:54 AM
You could also checkout the SWFUpload documentation, the command:

addPostParam

Might be useful to you. I used another command like it (setUploadURL) to change the upload URL like this:


var upload = new Ext.Button({
text: 'Begin Upload',
icon: iconpath+'/arrow_up.png',
style: 'padding-right: 10px;',
disabled: true,
handler: function() {
swfu.setUploadURL('ajax_upload_image_handler.a4d?id='+imageStockId);
if(imageUploadWidth == '0')
swfu.startUpload();
else
swfu.startResizedUpload(undefined, imageUploadWidth, imageUploadHeight, SWFUpload.RESIZE_ENCODING.JPEG, imageUploadQuality, false);
}

eztam
6 Jul 2010, 12:42 AM
I've got a little problem using this extension.

All the handlers could be defined in the config object, but I can't see the benefit of doing this. Because most of the variables (i.e. the progress bars) are private, so I cannot show/hide/update/... them directly in my redefined handler function.

Is there any possibility to extend the functionality without touching the original code?

morfeusz
29 Nov 2010, 1:43 PM
First of all, thanks for the essential extension!

I wonder, if it is possible to change cfg after button is rendered?
I want to alter postparams, but can't find it anywhere in DOM.

I was have same problem.
My solv:
In swfButton.js file I put this line:

swfu.addPostParam('logo',Ext.getCmp('logoM').getValue());
in
gridwin.on('show', function(){});

And it`s work!