PDA

View Full Version : [Ver. 1.0-beta2] Ext.ux.UploadForm File Upload Widget



jsakalos
14 Jul 2007, 7:44 AM
Hi all,

what I need that I write, so here is another my "kid". It's Ext.form.BasicForm extension that provides easy user interface for (multiple) file uploads.

I will integrate it to the FileTree context menu soon.

You can see it in action on the Live Demo Page (http://aariadne.com/uploadform).

Cheers,

UPDATE: Version for Ext 2.x is available here. (http://extjs.com/forum/showthread.php?t=29090)

jon.whitcraft
14 Jul 2007, 6:15 PM
Dare I say you beat me to what i was going to do in a few weeks... great job!!

an Idea for a future version:
- Upload Progress Bar.

jsakalos
15 Jul 2007, 12:51 AM
Dare I say you beat me to what i was going to do in a few weeks... great job!!

an Idea for a future version:
- Upload Progress Bar.

Hi Jon,

there is long lasting problem with upload progress information explained very well in this post (http://extjs.com/forum/showthread.php?p=46412). Therefore I've implemented the dummy indicator for now.

Cheers,

medusadelft
15 Jul 2007, 4:49 AM
Jozef,

I just noticed that I can hit the 'clear' button when the 'upload' is in progress. After the upload finished, no information appears. Maybe it's possible to disable the 'clear' button while upload is in progress.

According an upload progress bar, have you heard of 'swfupload' (http://linebyline.blogspot.com/2007/04/swfupload-r5-release.html) ? It uses flash and javascript to show a progress bar on upload.

Maurice.

jon.whitcraft
15 Jul 2007, 6:26 AM
Here is the most recent version of the SWFupload file.

http://swfupload.praxion.co.za/

I'm going to download it and start playing with it.

jsakalos
15 Jul 2007, 8:35 AM
Here is the most recent version of the SWFupload file.

http://swfupload.praxion.co.za/

I'm going to download it and start playing with it.

Maybe I'm too much a purist but I don't like too much the idea of having flash in an Ext app.

jsakalos
15 Jul 2007, 11:10 AM
So guys,

look at it now. I've implemented progress bar, however it's quite primitive now as I do not process all info I get from server.

I've increased file size limit to 1meg to see some progress. If you upload a lot delete it then please. File go to the root of tree at FileTree Demo (http://aariadne.com/filetree).

Let me know what you think.

Cheers,

parweb
16 Jul 2007, 6:34 AM
wonderfull, but how get this script ?

jsakalos
16 Jul 2007, 6:57 AM
wonderfull, but how get this script ?

Not yet, still beta. Changes frequently.

aconran
16 Jul 2007, 7:07 AM
Very cool, perhaps it would be beneficial to have a config option which uploaded the files immediately after being added to the queue?

This could potentially improve the user experience and allow for faster uploading.

Aaron

manugoel2003
16 Jul 2007, 11:52 AM
amazing work saki

Foggy
16 Jul 2007, 3:23 PM
Hi Jozef

Really great, congrats for this impressive work.
Maybe for next release, im with you flash has in EXT nothing to do...
But i have to say, the way of the multiple select in the OpenFileDialog, is really great.
Would this be possible in JS or is it a Flash Feature?

http://www.php-resource.ch/upload.gif

Greets Claudio

cluettr
16 Jul 2007, 4:20 PM
Great stuff... I'm sure I'm missing something obvious but how do we download these extensions?

jsakalos
16 Jul 2007, 4:50 PM
Hi Jozef

Really great, congrats for this impressive work.
Maybe for next release, im with you flash has in EXT nothing to do...
But i have to say, the way of the multiple select in the OpenFileDialog, is really great.
Would this be possible in JS or is it a Flash Feature?

Greets Claudio

Unfortunately, this is feature of flash. I'm also thinking about flash version but I don't know yet if it's a good idea... :-?

jsakalos
16 Jul 2007, 4:54 PM
Great stuff... I'm sure I'm missing something obvious but how do we download these extensions?

Gimme a couple of days to stabilize it up to the point where no features are added. It would be terrible mess if people would start to use this code now, as I'm actively working on it and the code may change every couple of hours.

If you're really impatient look at the html source of demo page to find out which files do you need. But you have been warned - no support yet. ;)

cluettr
16 Jul 2007, 5:12 PM
Thanks for the resposne... I'll be patient : ) Good work... An extension like this will be great!

JorisA
18 Jul 2007, 5:08 AM
Wow the upload progress stuff is amazing! How did you solve it?

jsakalos
18 Jul 2007, 5:23 AM
Wow the upload progress stuff is amazing! How did you solve it?

It's done with PHP pecl extension uploadprogress. Client starts periodical requests to get progress info from server in background.

BTW, progress target is configurable. Can be above or under the progress bar, qtip, or any element.

sjivan
18 Jul 2007, 12:46 PM
Saki,
Can you clarify the license of the extension widgets you're writing? The page for the widgets (eg: http://aariadne.com/filetree/) has no mention of the license which is important for many companies. If you already mentioned it elsewhere, please point me to the url. I havent been following these threads very closely.

Thanks,
Sanjiv

franklt69
18 Jul 2007, 5:53 PM
amazing work saki, I was playing we demo, it is very cool, now you are using 1.1 RC 1, do you have plan to migrate it to Ext2 ?

regards
Frank

jsakalos
18 Jul 2007, 9:53 PM
amazing work saki, I was playing we demo, it is very cool, now you are using 1.1 RC 1, do you have plan to migrate it to Ext2 ?

regards
Frank

Yes, when the time comes... ;)

I'm also investigating swfupload.

jsakalos
20 Jul 2007, 2:30 AM
Hi all,

I've started Ext.ux.SWFUpload. Very early (not-working-yet) preview is on the demo page (http://aariadne.com/uploadform). I'll put info on it also on http://extjs.com/learn/Ext_Extensions.

Cheers,

potdarko
20 Jul 2007, 1:27 PM
once again, congratulations and thanks for all your (shared) work =D>

is anyone handling 'batch' upload of files?

jsakalos
22 Jul 2007, 3:34 PM
Hi all,

I have stopped (postponed) Ext.ux.SWFUpload development for reasons explained here (http://extjs.com/learn/Extension:SWFUpload).

jsakalos
23 Jul 2007, 3:33 PM
Hi all,

I've got an idea: Flash uploader is unstable but it can popup file selector with file types filter, multiple file selection and can read file sizes.

If I had flash that would only:


take file types filter
popup file selection dialog (a browse method)
deliver full paths and sizes of user selected files
I could then upload the delivered files with standard <input type="file">. This way I could achieve both comfort of a flash uploader and the stability of the standard method.

Progress could still be done by background ajax server calls.

[EDIT] JeffHowden pointed out that file inputs are read-only so this cannot be done. See next post.

Cheers,

JeffHowden
23 Jul 2007, 6:58 PM
If I had flash that would only: [...] I could then upload the delivered files with standard <input type="file">.

Unfortunately, file inputs are read-only so this isn't going to work.

jsakalos
24 Jul 2007, 12:07 AM
Unfortunately, file inputs are read-only so this isn't going to work.

Hmmm, :(, I've never tried....

Anyway thanks for info.

Foggy
24 Jul 2007, 11:05 PM
Unfortunately, file inputs are read-only so this isn't going to work.
Unfortunately? :)
It would be a giant safety leak in my opinion.

Edit:
Jozef, does this example also crashes your Linux FireFox?
http://www.blog.medianetic.de/flash/up_ver4/upload_version4.html

JeffHowden
25 Jul 2007, 11:49 AM
Unfortunately? :)
It would be a giant safety leak in my opinion.

Yes, unfortunately for Jozef. ;)

jsakalos
25 Jul 2007, 12:04 PM
Jozef, does this example also crashes your Linux FireFox?
http://www.blog.medianetic.de/flash/up_ver4/upload_version4.html

Yes, crashes. I think it's not problem of uploader itself but problem of [email protected]@Linux. But maybe there are some workarounds somebody knows about.

ryes540
25 Jul 2007, 6:28 PM
Have you tried the linux flash 9 update beta?
http://labs.adobe.com/technologies/flashplayer9/

Also you could just do flash for everything except linux and then degrade to ajax. that would be an awesome module.

Ryan

vahala
25 Jul 2007, 10:09 PM
where is the source code?

JeffHowden
25 Jul 2007, 10:52 PM
Also you could just do flash for everything except linux and then degrade to ajax. that would be an awesome module.

I've got to agree. An ideal component would detect the lack of flash completely or the lack of the appropriate version of flash and default back to the standard Ext file upload via iframe.

Coincidentally, I don't know how quickly I'll get it done, but I'm working on porting UFO (unobtrusive flash object) to an Ext user extension (Ext.ux.UFO).

jsakalos
26 Jul 2007, 12:36 AM
Have you tried the linux flash 9 update beta?
http://labs.adobe.com/technologies/flashplayer9/

Also you could just do flash for everything except linux and then degrade to ajax. that would be an awesome module.

Ryan

Hi Ryan,

there is already stable version of flash 9 for linux and that is what I use, about:plugins says Shockwave Flash 9.0 r48, and it crashes anyway (segfault).

I'll think about integrating flash/non-flash functionality to one component. For the first glance it seems too much work as they use totally different events/callbacks, they differ in progress calculation and even the UI is slightly different. I'll see...:-?

hunkybill
26 Jul 2007, 5:28 AM
Hi,

Was wondering if you were/are going to making any changes to the non-flash file uploader code? Seems pretty good, but I am curious.

Also, quick question on the code. The input element with type = file, generates a browse button, which is hidden by the css. The "add" button triggers this browse. Is that due to event bubbling? I cannot see how the Add button triggers the browese event.

Thanks!

Dave

jsakalos
26 Jul 2007, 6:14 AM
Hi,

Was wondering if you were/are going to making any changes to the non-flash file uploader code? Seems pretty good, but I am curious.


The code needs a revision, cleanup and removal of hard-coded texts to class variables for purpose of localization. Also, I'm going to implement a method to get progress information.



Also, quick question on the code. The input element with type = file, generates a browse button, which is hidden by the css. The "add" button triggers this browse. Is that due to event bubbling? I cannot see how the Add button triggers the browese event.

Thanks!

DaveAdd button is fake. The actual <input type="file"> is above it with opacity:0.

26 Jul 2007, 7:05 AM
Jozeph,

i don't think you should stop developing the one w/ swfupload just because some users can't use it. the amount of linux ff users is pretty small. You could have a clause that checked for swf, if it's not there, then you use the other method.



function checkFlashVersion() {

var x;
var pluginversion;

if(navigator.plugins && navigator.mimeTypes.length){
x = navigator.plugins["Shockwave Flash"];
if(x && x.description) x = x.description;
} else if (Ext.isIE){
try {
x = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
x = x.GetVariable("$version");
} catch(e){}
}

pluginVersion = (typeof(x) == 'string') ? parseInt(x.match(/\d+/)[0]) : 0;

return pluginVersion;
}

jsakalos
26 Jul 2007, 7:39 AM
Jozeph,

i don't think you should stop developing the one w/ swfupload just because some users can't use it. the amount of linux ff users is pretty small. You could have a clause that checked for swf, if it's not there, then you use the other method.



Well, number of Linux users grows at least in my environment and I'm just not going to develop for Win-only or Mac-only. Either it works for [email protected] or I just "don't sign under it".

I'm writing in another post about degrading when there is no flash of in incompatible environment it's quite huge task and I don't develop these extensions for living but because I need them.

vivid-planet
27 Jul 2007, 2:26 AM
the demo doesn't crash on my [email protected]!

I'm running Gentoo amd64 with firefox 2.0.0.4 and netscape-flash 9.0.48.0-r1 (nspluginwrapper to get flash running on amd64)

probably the bug that causes the crash has been fixed in my flash-version.


Keep up the very good work on the file-upload fields!!

jsakalos
27 Jul 2007, 2:40 AM
the demo doesn't crash on my [email protected]!

I'm running Gentoo amd64 with firefox 2.0.0.4 and netscape-flash 9.0.48.0-r1 (nspluginwrapper to get flash running on amd64)

probably the bug that causes the crash has been fixed in my flash-version.


Keep up the very good work on the file-upload fields!!

This is hopefully sign that somebody is working on stability. That would be good news.

BTW, have you tried to upload many files? My [email protected] (no nspluginwrapper) crashes after 3rd - 4th successful upload.

jsakalos
27 Jul 2007, 2:44 AM
The code needs a revision, cleanup and removal of hard-coded texts to class variables for purpose of localization. Also, I'm going to implement a method to get progress information.

I've done this. If no showstoppers appear this will be RC1 and then final soon. My todo list of UploadForm is all done by now.

Zyclops
27 Jul 2007, 9:06 PM
Looks great! Are we supposed to copy the js etc from the demo page or is your extension zipped up somewhere?

jsakalos
28 Jul 2007, 1:26 AM
Looks great! Are we supposed to copy the js etc from the demo page or is your extension zipped up somewhere?

It will be in the form of package in final version.

AlexJG
29 Jul 2007, 9:10 AM
It's done with PHP pecl extension uploadprogress. Client starts periodical requests to get progress info from server in background.

BTW, progress target is configurable. Can be above or under the progress bar, qtip, or any element.

jsakalos

Are you running PHP 5.2 on your server? I was looking at the PECL extension and it claims to require 5.2.

I would love to use this when its completed but am running RHEL 4 systems so 5.2 won't be on there for years !!!

Thanks

Alex

jsakalos
29 Jul 2007, 2:27 PM
jsakalos

Are you running PHP 5.2 on your server? I was looking at the PECL extension and it claims to require 5.2.

I would love to use this when its completed but am running RHEL 4 systems so 5.2 won't be on there for years !!!

Thanks

Alex

Yes, I'm running PHP 5.2. Any chance to upgrade?

AlexJG
29 Jul 2007, 2:29 PM
Yes, I'm running PHP 5.2. Any chance to upgrade?

Not easily as currently Red Hat are still at 5.1'ish

Shame :-(

Regards

Alex

jsakalos
29 Jul 2007, 2:31 PM
Not easily as currently Red Hat are still at 5.1'ish

Shame :-(

Regards

Alex

Once I succeeded to run both PHP4 and PHP5 on one server. Maybe that could be the way: do not touch the old installation but add new one just for some urls.

AlexJG
29 Jul 2007, 2:35 PM
Once I succeeded to run both PHP4 and PHP5 on one server. Maybe that could be the way: do not touch the old installation but add new one just for some urls.

I will have a look at the source for the module and see why it needs 5.2, it does seem a bit odd so I will se if can get it working with earlier 5.x releases.

Regards

Alex

20after4
31 Jul 2007, 5:24 AM
I have previously developed a flash-based uploader that was working reliably in Firefox/Linux. My code is open source and I'm willing to help adapt it to work with your ext.ux.uploadform extension....

My code is at http://code.google.com/p/developerfriendly/

jsakalos
31 Jul 2007, 9:00 AM
I have previously developed a flash-based uploader that was working reliably in Firefox/Linux. My code is open source and I'm willing to help adapt it to work with your ext.ux.uploadform extension....

My code is at http://code.google.com/p/developerfriendly/

Do you have a link where I could test multiple uploads?

20after4
1 Aug 2007, 4:46 AM
I don't have the code set up anywhere right now but I will implement a demo page as soon as I can. I will post a link to this thread when I have it working.

20after4
1 Aug 2007, 4:50 AM
Do you have a link where I could test multiple uploads?

Actually, check out http://www.dluxwebcandy.com/photocube

See if uploading causes firefox to crash - that code is similar to the uploader that I published on developerfriendly, if that one works for you then there is hope. If it doesn't, there might still be some hope because my newer uploader is based on ActionScript 3 and uses the Flex SDK compiler (it compiles on linux!)

jsakalos
1 Aug 2007, 5:04 AM
Actually, check out http://www.dluxwebcandy.com/photocube

See if uploading causes firefox to crash - that code is similar to the uploader that I published on developerfriendly, if that one works for you then there is hope. If it doesn't, there might still be some hope because my newer uploader is based on ActionScript 3 and uses the Flex SDK compiler (it compiles on linux!)

Yeah,

this photocube works but so does "normal flash". The crashes start with file uploading. Therefore, I'd like to see a non-crashing flash uploader, then I'd believe that there is a hope.

Thanks for interest.

20after4
1 Aug 2007, 5:14 AM
Yeah,

this photocube works but so does "normal flash". The crashes start with file uploading. Therefore, I'd like to see a non-crashing flash uploader, then I'd believe that there is a hope.

Thanks for interest.

Well, that photocube page does use a flash uploader, sorry for not explaining myself better. Anyway, that one crashed my firefox so I guess it's not a good example ;)

I just threw together a test page at http://www.developerfriendly.com/test/index.php based on my AS3 uplaoder... Try it if you like ;)

jsakalos
1 Aug 2007, 5:22 AM
Well, that photocube page does use a flash uploader, sorry for not explaining myself better. Anyway, that one crashed my firefox so I guess it's not a good example ;)

I just threw together a test page at http://www.developerfriendly.com/test/index.php based on my AS3 uplaoder... Try it if you like ;)

:( Crashed 2 of 3 times on three small jpgs.

openSUSE 10.2/Flash 9/FF 2.0.0.6

20after4
1 Aug 2007, 5:29 AM
:( Crashed 2 of 3 times on three small jpgs.

openSUSE 10.2/Flash 9/FF 2.0.0.6

Wow... Ok I don't quite understand what's going on but I will try to get to the bottom of it. It's got to be possible to get reliable file upload, I had it working before and I will do it again ;)

Alexsandro_xpt
2 Aug 2007, 10:47 AM
And where I can download just that samples http://aariadne.com/uploadform/ to put on my web page?


Thz a lot.

jsakalos
2 Aug 2007, 11:43 AM
And where I can download just that samples http://aariadne.com/uploadform/ to put on my web page?


Thz a lot.

Look at the page's source code to see which files you need and download them from there. The zipped package will be available with final version.

Alexsandro_xpt
2 Aug 2007, 12:12 PM
Are you have an estimate date? :D

Thank you a lote, it's a great widget, I thing the better on web.

jsakalos
2 Aug 2007, 2:02 PM
Are you have an estimate date? :D

Thank you a lote, it's a great widget, I thing the better on web.

I don't want to promise a date as this is not what I do for living. I'd also want to wait for some bug reports (if any) and to pack it together with documentation. There is no Ext doc parser available yet.

I don't expect that API would change too much between this beta and the stable version.

Alexsandro_xpt
4 Aug 2007, 5:23 AM
Ok I understand ;)

Thz

hunkybill
4 Aug 2007, 6:26 AM
Hi,

I use FF Linux for these tests, so my issues may not affect a lot of people.

I have extended the ux.FileUpload widget and played quite extensively with it. I use a Ruby backend instead of PHP so I have no interface with the Progress Updated, I simply removed it from the constructor.

a) hitting the Add button brings up the file browser. Double-clicks on a filename will 'occasionally' populate the table with the file icon, but NOT the filename. The upload proceeds anyway, so this is more of a user experience problem than a widget problem per se. I have not dug deep into inspecting why this may occur, could be a FF bug.

b) the silk icon library is correct in my path, when I press a button, the CSS transitions to a 'clicked' look, which is the icon shaded out with a bunch of vertical lines. If I click anywhere else in the FF viewport, the button is reset to a nice icon. Not sure what this is indicative of. Might be an issue with a css path to some background graphic.

All in all, a great widget. I am looking to integrate it nicely into a ContentPanel displaying thumbnails so image management is all in one panel. At the moment it is pretty crude how I have it working. The back-end ruby plugin upload_column is pretty handy too.

Thanks!!

jsakalos
5 Aug 2007, 1:52 AM
First of all, thank you very much for testing and sharing your experience.


Hi,

I use FF Linux for these tests, so my issues may not affect a lot of people.

I also use [email protected] so it affects me and my users. ;)


a) hitting the Add button brings up the file browser. Double-clicks on a filename will 'occasionally' populate the table with the file icon, but NOT the filename. The upload proceeds anyway, so this is more of a user experience problem than a widget problem per se. I have not dug deep into inspecting why this may occur, could be a FF bug.
I'd say this is FF bug as I'm doing nothing special with file names. I listen to <input type="file"> onchange event and I take passed value with file name for display.


b) the silk icon library is correct in my path, when I press a button, the CSS transitions to a 'clicked' look, which is the icon shaded out with a bunch of vertical lines. If I click anywhere else in the FF viewport, the button is reset to a nice icon. Not sure what this is indicative of. Might be an issue with a css path to some background graphic.
I sometimes see similar lines when browsing (scrolling) the Ext doc. Clicking outside of viewport causes that they disappear. Frankly, I haven't searched for the reason.


All in all, a great widget. I am looking to integrate it nicely into a ContentPanel displaying thumbnails so image management is all in one panel. At the moment it is pretty crude how I have it working. The back-end ruby plugin upload_column is pretty handy too.

Thanks!!I'm curious. Post link then if you can.

kato
5 Aug 2007, 7:29 AM
Hello Jozef,

Excellent work on the new UX. How did u make the "Add" toolbar button pop out the file browser window directly without displaying the file input field and button?

Thanks!

hunkybill
5 Aug 2007, 8:53 AM
Hello Jozef,

Excellent work on the new UX. How did u make the "Add" toolbar button pop out the file browser window directly without displaying the file input field and button?

Thanks!
Hey Kato.. I asked that question in this thread, and the answer is ... The browse button is on top of the add button, but it is see through, so you are pressing it but you don't see it.

kato
5 Aug 2007, 9:13 AM
Thanks Hunkybill. I found the excellent "trick".

Grimsk
6 Aug 2007, 11:49 AM
anyone have a good example of upload.php file?


-----

ive got something "weird" with the widget...
when i click on the button to start the upload .. the page is asking me to download a file who content the json from my upload.php


this.uploadForm = new Ext.ux.UploadForm(uploadFormCt, {
//url: this.uploadUrl || this.dataUrl
url: "upload.php"
, autoCreate: true
, baseParams: {cmd: 'upload'}
, maxFileSize: this.maxFileSize
, iconPath: this.iconPath
, pgCfg: this.pgCfg
, floating: false
});

*im using FF & Safari on windows

jsakalos
6 Aug 2007, 3:30 PM
anyone have a good example of upload.php file?


-----

ive got something "weird" with the widget...
when i click on the button to start the upload .. the page is asking me to download a file who content the json from my upload.php


this.uploadForm = new Ext.ux.UploadForm(uploadFormCt, {
//url: this.uploadUrl || this.dataUrl
url: "upload.php"
, autoCreate: true
, baseParams: {cmd: 'upload'}
, maxFileSize: this.maxFileSize
, iconPath: this.iconPath
, pgCfg: this.pgCfg
, floating: false
});*im using FF & Safari on windows


Server has to return Content-Type: text/html header.

yaohongmei
6 Aug 2007, 10:13 PM
anyone have a good example of upload.php file and progress.php?

si-rus
7 Aug 2007, 12:06 PM
Hi Jozef,

Cool! Your imagination at a high level ;).

8 Aug 2007, 5:47 AM
This looks promissing... I'm really looking forward for your 'release' =D>

jsakalos
8 Aug 2007, 6:18 AM
This looks promissing... I'm really looking forward for your 'release' =D>


There are neither bug reports nor feature requests for some time so the release won't probably differ from the current beta.

mikegiddens
8 Aug 2007, 8:53 AM
Great work on the uploader.

Did I miss how to get the code for progress.php or do I need to wait until you make an official release?

I also seem to be having a problem when when I submit the post data does not seem to be sent. I am using firebug and echoing out my $_file and $_post args with both being empty. Any one know what this might be happening?

Cheers

si-rus
8 Aug 2007, 9:56 PM
So many parallel request to progress.php? In my opinion, next request is necessary to start upon response of the previous.

jsakalos
8 Aug 2007, 11:58 PM
So many parallel request to progress.php? In my opinion, next request is necessary to start upon response of the previous.

You know,

I've decided not to post server side scripts here. Anyway, progress.php is KISS (http://en.wikipedia.org/wiki/KISS_principle) file based on uploadprogress (http://nata2.org/2007/04/16/pecl-uploadprogress-example/) PHP extension. It just sends back json encoded output of uploadprogress_get_info function.

Hope this helps,

si-rus
9 Aug 2007, 5:25 AM
I do not understand what for to dispatch so much many parallel request for check of a status upload?

I think enough one request, to wait for the answer if yet the end to start following, but sequentially instead of in a parallel way.

si-rus
9 Aug 2007, 5:50 AM
Here the piece of a code from my implementation uploader (not on the basis of Ext), probably will help to understand it that I have in view of



...

if (!timeout) timeout = 1000;

var _this = this;

this.responseStatus = function (text){
var obj = eval("({" + text.responseText + "})");
if (obj.status != FINISHED) setTimeout(_this.checkStatus, timeout);
else {
alert('is Done!');
}
}


this.checkStatus = function (){
getData(urlChecker, _this.responseStatus, uploaderId); //getData - AJAX request - response JSON
}

setTimeout(_this.checkStatus, timeout);
...



P.S.: Excuse for my English :">

Peter.Ivanov
9 Aug 2007, 6:30 AM
Hello can someone give a quick tip how to implement the uploader

si-rus
9 Aug 2007, 10:09 AM
So many parallel request to progress.php? In my opinion, next request is necessary to start upon response of the previous.

Jozef, you need test uploader on low-speed internet channel and look in the firebug console ...

jsakalos
9 Aug 2007, 11:37 AM
I do not understand what for to dispatch so much many parallel request for check of a status upload?

I think enough one request, to wait for the answer if yet the end to start following, but sequentially instead of in a parallel way.

Good idea,

now they blindly run every "interval" (defaults to 1s) but this sequential way looks better. I'll test it and then I'll let you know.

jsakalos
9 Aug 2007, 11:38 AM
Hello can someone give a quick tip how to implement the uploader

Demo page example doesn't do?

maguss
11 Aug 2007, 10:22 AM
Good Work!/:)

AlexJG
11 Aug 2007, 10:52 AM
jsakalos

Great extension :):)

I have been messing around with it today and wondered if there was a way to limit the file types that can be uploaded?

Cheers

Alex

P.S I am actaully using the tree but since its related to the ploads thought I would post the question here

jsakalos
11 Aug 2007, 1:32 PM
jsakalos

Great extension :):)

I have been messing around with it today and wondered if there was a way to limit the file types that can be uploaded?

Cheers

Alex

P.S I am actaully using the tree but since its related to the ploads thought I would post the question here

Not in standard uploader. It uses just <input type="file"> and AFAIK there is no possibility to limit file type. It's possible with SWFUpload but it's unstable and therefore I dropped it.

What could be done is to check file extension AFTER user selects a forbidden file type. Quite awkward but you can try if you cannot live w/o it. ;)

AlexJG
11 Aug 2007, 1:40 PM
Not in standard uploader. It uses just <input type="file"> and AFAIK there is no possibility to limit file type. It's possible with SWFUpload but it's unstable and therefore I dropped it.

What could be done is to check file extension AFTER user selects a forbidden file type. Quite awkward but you can try if you cannot live w/o it. ;)

jsakalos

Thanks for that,

Its not a major issue as I am currently checking it server side but that seems a bit backward to me. I will have a look at your code and see if I can restrict it in there.

Alex

jsakalos
11 Aug 2007, 1:45 PM
Override onFileAdded method. Input type=file value is read-only so you will need to delete inp passed as argument and create new blank one with createUploadInput method.

mikegiddens
11 Aug 2007, 2:06 PM
Problems getting it to work. Am I missing something simple?

Step 1: Downloaded the Ext.ux.UploadForm.js file.
Step 2: setup the test case for the upload form
Step 3: Made a test_upload_form.php to do something with the files uploaded.

Everything seems to want to work except no post or file data looks to be sent.


var f2 = new Ext.ux.UploadForm('float-form-ct', {
autoCreate: true
, iconPath: '../../resources/images/uploadform'
, floating: true
, url: 'scripts/test_upload_file.php'
, method: 'post'
, baseParams: {
cmd:'upload'
, path: 'root'
}
});

I get nothing in my array when I print_r my $_FILES and $_POST vars.

Is there something I stupid I am missing? This is all I do for a normal multipart/form-data.

If I can get this running jsakalos I will be happy to donate some money toward the use of the widgit.

Note: I have tested it with "get" and the baseParams come through but all the other stuff is empty.

jsakalos
11 Aug 2007, 2:38 PM
Problems getting it to work. Am I missing something simple?

Step 1: Downloaded the Ext.ux.UploadForm.js file.
Step 2: setup the test case for the upload form
Step 3: Made a test_upload_form.php to do something with the files uploaded.

Everything seems to want to work except no post or file data looks to be sent.


var f2 = new Ext.ux.UploadForm('float-form-ct', {
autoCreate: true
, iconPath: '../../resources/images/uploadform'
, floating: true
, url: 'scripts/test_upload_file.php'
, method: 'post'
, baseParams: {
cmd:'upload'
, path: 'root'
}
});I get nothing in my array when I print_r my $_FILES and $_POST vars.

Is there something I stupid I am missing? This is all I do for a normal multipart/form-data.

If I can get this running jsakalos I will be happy to donate some money toward the use of the widgit.

Note: I have tested it with "get" and the baseParams come through but all the other stuff is empty.

This is absolutely correct. Seems like server-side problem. I'll pm you on that.

mikegiddens
12 Aug 2007, 1:09 PM
Thanks for the help.

NOTE FOR OTHER USERS:

Firebug will not help in testing your upload script on your server side. The upload form uses a iframe which does not send back a response equal to what is actually being sent and recieved.

I recommend making a static test form that calls the same script so that you can see what is actualy happening on the server side. Once you are happy with your results switch to the file_upload script and everything should be good.

=========================

Extension Recommendation:

If you wanted to make this a little bit more advanced I would try and create forms for each file and send the requests seperatly so that you can have more control over the upload process. Right now all the files go in one iframe form session and I can just stop one I have to stop the whole process and not sure what has been compelted and what has not. If I ever get some time I might look into changing it up to work this way.

I am still happy with it and grateful for your programming skills.

Possible bug?
I am getting an extra file that has blank everything in php when I loop through my $_FILES. I have not stepped through your extension but if I find anything out I will let you know.

====================
One question:
Is this the pecl package I need to install on PHP 5.2 to get the progress.php to work?
http://pecl.php.net/package/uploadprogress

jsakalos
12 Aug 2007, 4:25 PM
Extension Recommendation:

If you wanted to make this a little bit more advanced I would try and create forms for each file and send the requests seperatly so that you can have more control over the upload process. Right now all the files go in one iframe form session and I can just stop one I have to stop the whole process and not sure what has been compelted and what has not. If I ever get some time I might look into changing it up to work this way.

Yes, this could be done, nevertheless I'm now quite busy so I'll go into this only if there is a big need for it. If you want you're welcome to either extend the UploadForm or change it.



I am still happy with it and grateful for your programming skills.
thx


Possible bug?
I am getting an extra file that has blank everything in php when I loop through my $_FILES. I have not stepped through your extension but if I find anything out I will let you know.
This is feature not a bug. It's written in interface documentation for FileTreePanel. Very last line on http://aariadne.com/filetree


====================
One question:
Is this the pecl package I need to install on PHP 5.2 to get the progress.php to work?
http://pecl.php.net/package/uploadprogressYes, it is that.

Cheers,

jsakalos
12 Aug 2007, 4:33 PM
Mike, just to explain better that empty file:

Initially, there is one empty <input type="file"> element with opacity:0 positioned over add button. When you click Add you click this input in fact.

Then you select a file from the dialog which goes to this first input. Second blank input is created after file selection, and so forth.

This way you have always one extra input. Sure it could be deleted before upload and re-created upon upload success or failure but just ignoring NO_FILE error on the server side looked much easier to me.

Cheers,

mikegiddens
13 Aug 2007, 6:41 AM
Understood. Just making sure you know it was there. Your design makes since.

Any comment on the PECL package install serverside to get the progress.php working?

jsakalos
13 Aug 2007, 7:58 AM
Understood. Just making sure you know it was there. Your design makes since.

Any comment on the PECL package install serverside to get the progress.php working?

I had no problems to install uploadprogress per manual. Beware, it doesn't work with suhosin (hardened PHP) extension.

6epcepk
14 Aug 2007, 11:11 AM
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Reorder TreePanel</title>
<link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../lib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../lib/ext/ext-all.js"></script>
<script type="text/javascript" src="reorder.js"></script>
</head>
<body>

<script type="text/javascript" src="/lib/ext/extensions/UploadForm/Ext.ux.UploadForm.js"></script>
<div id="form-ct"><div id="form-ct-in"></div></div>

<script type="text/javascript" src="uploadform.js"></script>
<link rel="stylesheet" type="text/css" href="uploadform.css" />
<link rel="stylesheet" type="text/css" href="filetree.css" />
<link id="theme" rel="stylesheet" type="text/css" href="/lib/ext/resources/css/xtheme-default.css">
<style type="text/css">
#form-ct, #swfu-out {
position: relative;
left: 14px;
width: 180px;
padding: 10px;
border: 1px solid silver;
background-color: #D3E6EA;
margin-bottom: 24px;
}
#swfu-out {
font-size: 8pt;

}
#adsense-top {
margin: 10px;
}
#info-column {
position: absolute;
top: 108px;
right: 8px;
width: 240px;
border: 1px dotted silver;
background-color: #efefef;
margin: 4px;
padding: 8px;
font-size: 8pt;
}
#info-column ul {
list-style-type: disc;
list-style-position: inside;
}
#pg-target {
position: absolute;
left: 400px;
top: 108px;
width: 154px;
}
#float-form-ct {
}
</style>

</body>
</html>


But:
http://img106.imageshack.us/img106/6880/srcrv8.gif

And is this extension work with extjs 2?
Thanks.

jsakalos
14 Aug 2007, 12:56 PM
Re look: I just guess that the problem is how uploadform looks. If so, include uploadform.css.

Re ext2: I don't know, I haven't tried. It was written for 1.1.

6epcepk
14 Aug 2007, 7:53 PM
i Have already include css-file:

<link rel="stylesheet" type="text/css" href="uploadform.css" />
And the path is correct. I have changed path to images-file, but images doesn't showing.

jsakalos
15 Aug 2007, 12:21 AM
i Have already include css-file:

<link rel="stylesheet" type="text/css" href="uploadform.css" /> And the path is correct. I have changed path to images-file, but images doesn't showing.

Check iconPath and also, if you don't use famfamfam silk icons, icon names such as addIcon, uploadIcon, etc.

6epcepk
15 Aug 2007, 8:40 PM
I think this extension doesn't work with extjs 2.0 =(
I,m trying to change 'text' attribute in:

this.browseBtn = new Ext.Button(bbtnCt, {
text:this.addText + '...'
, cls: 'x-btn-text-icon'
, icon: this.addIcon
, minWidth:this.buttonWidth
});
But it isn't dislay. (See screanshot at last.)

jsakalos
16 Aug 2007, 3:54 AM
Yes,
I've seen screenshot and now I looked again. So:
Different fonts/misalignments = missing/overriden uploadform.css
No icons = icon files not found = wrong iconPath || wrong filenames || bothCheers,

PS: There is no need to change code of the extension to get icons working. Just pass correct config options. If you change the code you're on your own as I don't know what the change was.

6epcepk
16 Aug 2007, 7:36 AM
alert(this.addIcon);
was return correct path to icons where located 'add.png'.
All scripts and css-files is originaly and was downloaded from your site.
So, extension doesn't work correctly with ExtJs 2. You're in 'Premium Group' and also can check this 8)
sry for my good English)

jsakalos
16 Aug 2007, 4:01 PM
alert(this.addIcon);was return correct path to icons where located 'add.png'.
All scripts and css-files is originaly and was downloaded from your site.
So, extension doesn't work correctly with ExtJs 2. You're in 'Premium Group' and also can check this 8)
sry for my good English)

Are we talking all the time about UploadForm in Ext 2.0? If yes, I can't guarantee anything as I haven't even tried it with 2.0.

If we're talking about 1.1 then look with FB at the RENDERED html to see if it can find icons. I've never had any problems with icons but wrong paths.

Re: 2.0. I'm not too big fan of development versions for production. Therefore I'll wait for Ext 2.0 beta[2-3] or Ext 2.0 RC[1-2] before I start to do anything leading to production with Ext 2.0. Meantime, I'm terribly busy these days, you can try if you want and you can post your experiences.

This is quite simple extension (compared to Accordion/InfoPanel).

Cheers,

bluesea
20 Aug 2007, 1:40 AM
This Ext js is very cool ,but I can't find where can download it .I hope some friends can help me ,This is my email [email protected],you can post Ext js to me . :)

jsakalos
20 Aug 2007, 8:34 AM
This Ext js is very cool ,but I can't find where can download it .I hope some friends can help me ,This is my email [email protected],you can post Ext js to me . :)

You can download Ext JS from http://extjs.com/download

Nikoms
21 Aug 2007, 12:54 AM
Is there anyway to get a list of name of the uploaded files?
I will use it in a form to upload some pic in a news.
When I upload my files, the server send me an id (Come from a DB). I want to reuse it (set it in a hidden field). So when I post my "news form", I know which picture show with the new...

Is it possible to do that?

jsakalos
21 Aug 2007, 2:51 AM
Is there anyway to get a list of name of the uploaded files?
I will use it in a form to upload some pic in a news.
When I upload my files, the server send me an id (Come from a DB). I want to reuse it (set it in a hidden field). So when I post my "news form", I know which picture show with the new...

Is it possible to do that?

Input elements are held in MixedCollection inputs. As you add file it's added to this collection; removed on delete. Inputs with successfully uploaded files are removed from this collection during processing response from server.

So before upload you can get 'em from inputs collection. If you need it after upload you may need to override onSuccess, onFailure or processResponse methods.

Cheers,

Nikoms
21 Aug 2007, 7:38 AM
Is there an easy way to override "processResponse" without erase your code?

Sorry, i'm a newbie... Is it possible to create a new namespace (for example), and just rewrite the "processResponse"... and then call something like parent::processResponse() ?

I found this : http://extjs.com/learn/Manual:Intro:Inheritance, but it's only for creating new function...

ejetorix
21 Aug 2007, 10:10 AM
Is there a way to know the size of the files before it starts the upload?

Thanks for your great work with Ext, simply amazing. =D>

jsakalos
21 Aug 2007, 11:05 AM
Is there a way to know the size of the files before it starts the upload?

Thanks for your great work with Ext, simply amazing. =D>

AFAIK no, for standard <input type="file">

jsakalos
21 Aug 2007, 11:07 AM
Is there an easy way to override "processResponse" without erase your code?

Sorry, i'm a newbie... Is it possible to create a new namespace (for example), and just rewrite the "processResponse"... and then call something like parent::processResponse() ?

I found this : http://extjs.com/learn/Manual:Intro:Inheritance, but it's only for creating new function...


If you override, you cannot call original method (see Ext.override). If you extend you can (see Ext.extend).

JeffBurr
23 Aug 2007, 3:48 PM
Jsakalos -

I am eager to try out this Ext Extension, but your web site has been unavailable for at least the last 24 hours.

Is it coming back?

jsakalos
23 Aug 2007, 4:38 PM
Jsakalos -

I am eager to try out this Ext Extension, but your web site has been unavailable for at least the last 24 hours.

Is it coming back?

That's very strange as right now I've clicked and it works and also my web statistic shows normal accesses during last two weeks.

Link: http://aariadne.com/uploadform/

Cheers,

JeffBurr
23 Aug 2007, 5:20 PM
Still no response for me in Atlanta, GA USA.

I have been to your example before but there have been some times when it was not responsive.

I guess I'll just keep trying...

punithamanohar
23 Aug 2007, 7:54 PM
Good stuff... Can someone tell me from where to download this UploadForm extension ?

jsakalos
24 Aug 2007, 12:49 AM
Still no response for me in Atlanta, GA USA.

I have been to your example before but there have been some times when it was not responsive.

I guess I'll just keep trying...

Could be some DNS problem. You can try to set IP in hosts file. IP is 193.28.8.233. Don't type this address in URL bar; it doesn't work as server is NameVirtualHost.

jsakalos
24 Aug 2007, 12:52 AM
Good stuff... Can someone tell me from where to download this UploadForm extension ?

http://extjs.com/forum/showthread.php?p=56205#post56205

galdaka
24 Aug 2007, 6:55 AM
Sorry for my bad English.

Great widget!!

I think that this widget should contains more features like:

1) View the the uploaded files. Each file could be contains additional info from attachment.

2) Dialog version of your widget. Only load widget if you want. Each instance of upload widget is related with a document (Various files). I think that most people need assign attachments to a form / document.

Frontrunner
24 Aug 2007, 7:01 AM
Oh yes galdaka,

you are right.
That would be great.
I'm also looking for a widget like you described.

jsakalos
24 Aug 2007, 8:07 AM
There is UploadDialog (http://extjs.com/forum/showthread.php?t=11111) around. Look if that is what you need. I needed this simple and small widget to be embedded in FileTreePanel and I'm not planning to add more features. Maybe in future.

franklt69
24 Aug 2007, 3:45 PM
Hi, Saki are you testing this widget in ext2, a quick migration?, is very hard migrate it to use from Ext2?

regards
Frank

jsakalos
24 Aug 2007, 4:22 PM
Hi, Saki are you testing this widget in ext2, a quick migration?, is very hard migrate it to use from Ext2?

regards
Frank

No idea; haven't tried.

poeppe
28 Aug 2007, 4:26 AM
Hi Saki, thank you for the great upload widget.

after a few hours playing around with it and getting anoyed of the uploadprogress extension i got a few unsolved problems.

If i got three files on the upload queue where one file is twice, i dont receive any files in my upload.php in $_FILES. So I don't know what to return {"success":false} doesn't work. What happens in the UploadForm is, that no process will be displayed and after a few seconds all the files are removed.... The same problem i got if the size of the files i want to upload exceeds the post_max_size in the php.ini


For people who have problems with the uploadprogress extension in combination with windows these links should help you:
http://www.php-developers.net/2007/04/20/setting-up-windows-linux-environment-for-file-upload-progress-meter/

I also didn't get the PECL dll version to run, so i use this one from:
http://www.emforge.org/wiki/AjaxBasedFileUploadForPHP

With this both links everything works perfect for me.


@galdaka: Why don't you use a BasicDialog and put the UploadForm just into it for a dialog version. Or is that not what you want ?


I hope i can help someone with my cognitions

bya

jsakalos
28 Aug 2007, 9:14 AM
Hi Saki, thank you for the great upload widget.

after a few hours playing around with it and getting anoyed of the uploadprogress extension i got a few unsolved problems.

If i got three files on the upload queue where one file is twice, i dont receive any files in my upload.php in $_FILES. So I don't know what to return {"success":false} doesn't work. What happens in the UploadForm is, that no process will be displayed and after a few seconds all the files are removed.... The same problem i got if the size of the files i want to upload exceeds the post_max_size in the php.ini



Re same files: I haven't observed this problem, I'm running exclusively Linux servers though. Does failure callback get executed when you return {"success":false}?

Re file size: Unfortunately, it works as you describe. File is first uploaded and then the file size error is reported.

Cheers,

poeppe
29 Aug 2007, 12:04 AM
Re same files: I haven't observed this problem, I'm running exclusively Linux servers though. Does failure callback get executed when you return {"success":false}?


OK, i tested it once again and there is no problem with double files. Probably it didn't work yesterday because of the mentioned filesize. I tested it with large files between 5 mb and 20 mb ...8-| 10mb + 5mb + 5mb = 20mb and i think in that moment i had the max_post @ 16mb :">

rainy regards from munich/germany

cag3
29 Aug 2007, 3:58 AM
i think for userfriendly reasons it would be nice to have a zip file of the extension?
i dont understand why i need to rip all the files manually from the source.....

B0rn2kill
3 Sep 2007, 2:25 PM
Hi,

This is so cool...

But where i can find the source to implement in my website?>

jsakalos
3 Sep 2007, 3:27 PM
Right click on demo page, View Source, find out which files you need, download from demo page.

Good luck! :)

pcrombach
3 Sep 2007, 10:17 PM
Hi, nice work! Tell me what do I need on the serverside.

jsakalos
4 Sep 2007, 1:40 AM
It depends on your server side language. If you use PHP then: http://www.php.net/manual/en/features.file-upload.php

southside
15 Sep 2007, 4:43 AM
Can anyone advise where I can download the file update widget?

jsakalos
15 Sep 2007, 4:58 AM
http://extjs.com/forum/showthread.php?p=60093

Foggy
19 Sep 2007, 6:06 AM
Has anyone try to use this great extension with 2.0?
Im not able to do it :(

jsakalos
19 Sep 2007, 9:51 AM
It was written in and for 1.1.1; it needs refactoring for Ext 2.0. I will move all my apps and extensions to Ext 2.0 when RC1 will be out.

Amberite
25 Sep 2007, 7:24 AM
This is great! However I see you are using PHP as the backend. Is it possible to use this with ASP.NET? Has anyone tried this?

jsakalos
25 Sep 2007, 8:34 AM
This is great! However I see you are using PHP as the backend. Is it possible to use this with ASP.NET? Has anyone tried this?

It's server language independent - server only has to be able to handle file upload requests. I haven't tried practically, though. (Barely know what is Window$ ;) )

juandj
25 Sep 2007, 7:55 PM
Hello... Awesome job man...

I have been reading each post, and I haven't been able to figure out what function gets called after the upload is complete. I see an event "onFileAdded" but I would like to know if there is something I can pass via the config that will set that up for me..

I'm passing "callback" but it doesn't seem to get called...

My server side returns:


{"success":true}

and im using:



var upform = new Ext.ux.UploadForm('uploader_container', {
autoCreate: true
, url: '/up.php'
, method: 'post'
, maxFileSize: 1048570
, iconPath: '/images/silk/'
,callback: function () {
alert('test 2');

}
, baseParams: {
mode:'upload_listing_image'

, callback: function () {
alert('test 1');

}
}
});

jsakalos
26 Sep 2007, 9:25 AM
onSuccess and onFailure are called internally each of them calls processResponse in turn. You can override them or, maybe even better I can add uploadsuccess and uploadfailed events that would be fired from these functions.

Do you want me to do so?

juandj
27 Sep 2007, 8:54 AM
Hello,

I believe it'd be great to be able to know when the file is uploaded. I was trying to figure out how were you doing it with the filetree, because it refreshes when the upload is done.. but I couldn't find exactly what triggered it.

Shortly after I started trying some of the internal events I found in the code and found that


upform.on('stopupload', function () {
alert('Im done');
});


does the trick.. but it also gets triggered when the user stops the upload, or when it fails im guessing.

However, adding the events you suggest would be a lot more elegant as you could make it so that it passes more information to the event handler.

Thanks again, this widget rocks!

juandj
29 Sep 2007, 12:10 AM
Hi,

It'd also be cool if you could specify a maximum of files that can be added. E.g. when you only are allowing people to upload 5 files, or usually when you only want one file...

Just an idea..

thanks again!!

jsakalos
29 Sep 2007, 2:21 AM
Hi,

It'd also be cool if you could specify a maximum of files that can be added. E.g. when you only are allowing people to upload 5 files, or usually when you only want one file...

Just an idea..

thanks again!!

I haven't added this as if user has limit (let's say 5) then he can repeatedly upload files in 5-count chunks. If you really want to limit upload count then it's better to limit it at server side. Or you can override createUploadInput method - but you cannot prevent repeated uploads by this.

dolittle
1 Oct 2007, 3:50 PM
I love the way you wrapped the file with a button and changed it`s opacity to 0.

What I don`t understand is how you managed to prevent the user from clicking on the input field outside the button.
When I`m looking at the field with FireBug I can see it extends on the left of the widget but when I try to click it I can`t.

How do you do that? :-?

jsakalos
1 Oct 2007, 4:05 PM
I love the way you wrapped the file with a button and changed it`s opacity to 0.

What I don`t understand is how you managed to prevent the user from clicking on the input field outside the button.
When I`m looking at the field with FireBug I can see it extends on the left of the widget but when I try to click it I can`t.

How do you do that? :-?

There is one more invisible element (a mask) that covers this area.

dolittle
1 Oct 2007, 4:48 PM
There is one more invisible element (a mask) that covers this area.

Which one?

I see that you are using mask/unmask on elements but how do you mask a part of an element? Do you just put an element on this area? I don`t see one with FireBug and can`t find it in your code.

Is it possible to change the cursor on the add button to be a pointer?
I couldn`t do it with css.

bowa
1 Oct 2007, 11:58 PM
http://labs.adobe.com/technologies/flashplayer9/

new players for windows, mac and linux have been released.

lets hope this fixed the problems that we encountered!

jsakalos
2 Oct 2007, 2:05 AM
Which one?

I see that you are using mask/unmask on elements but how do you mask a part of an element? Do you just put an element on this area? I don`t see one with FireBug and can`t find it in your code.

Is it possible to change the cursor on the add button to be a pointer?
I couldn`t do it with css.

It's not Ext mask, it's small div that covers that left side. Cursor: maybe yes, it needs to pass mouseover/mouseout events from invisible input to the button. I was too lazy to do it ;)

jsakalos
2 Oct 2007, 2:07 AM
http://labs.adobe.com/technologies/flashplayer9/

new players for windows, mac and linux have been released.

lets hope this fixed the problems that we encountered!

Hopefully yes but I haven't time now to test it.

juandj
2 Oct 2007, 3:18 PM
I haven't added this as if user has limit (let's say 5) then he can repeatedly upload files in 5-count chunks. If you really want to limit upload count then it's better to limit it at server side. Or you can override createUploadInput method - but you cannot prevent repeated uploads by this.

Hi,

I understand what you're saying.. server validation is always a must. However, it is not enough to create a friendly interface. E.g. if there is a limit of 5 in the server, the user does not expect to be able to pick 6. :)

Anyway, great job!

haattila
2 Oct 2007, 11:04 PM
Hello Jozsef!

Your component is amazing! Could You send me a source for it? I want to use it in my next project.

Thx!

Attila

jsakalos
3 Oct 2007, 12:16 AM
http://extjs.com/forum/showthread.php?p=60093

sbm_fog
8 Oct 2007, 9:53 AM
Hello,

I'm playing with your extension and the question about flexibility popped up in my mind. I would like to know, whether there is a version planned, which gives a developer more control (e.g. different languages etc).

The next thing is: My application is designed to use Ext, if JS is enabled and it degrades gracefully, if it's not. So I would like to point to an upload form element and have something like a replace behaviour. Is such a feature planned or do I always have to remove the original upload input element?

Bye and thanks for this extension, F.o.G.

adnoh
11 Oct 2007, 11:00 PM
Hy,

I've encountered a big Problem with the Ext-SWFUpload widget which took me the whole yesterday, maybe there should be a big warning on the custom-ext page.
Don't try to use it with HTTPS!!! It will fail!
I've searched and searched, and that was the last thought I've got, and now it works.
My Application (a mailclient) runs on a https connection. If you wan't to inmplement the SWF-Upload you should create the widget like:


Ext.ux.SWFUpload.create('swfdiv', {
flashpath: 'http://your/path/to/SWFUpload.swf',
......

This way you can run your app over https, and the needed SWFUpload.swf is load over http.

This is a flash "feature" - it thinks about a cross site when called over https.

Damn it !!

Hope I could help somebody with sharing this hint.

jsakalos
12 Oct 2007, 4:32 PM
Hello,

I'm playing with your extension and the question about flexibility popped up in my mind. I would like to know, whether there is a version planned, which gives a developer more control (e.g. different languages etc).


All strings are public variables so they are easily translatable. Do you want Slovak/Czech translations?



The next thing is: My application is designed to use Ext, if JS is enabled and it degrades gracefully, if it's not. So I would like to point to an upload form element and have something like a replace behaviour. Is such a feature planned or do I always have to remove the original upload input element?

Bye and thanks for this extension, F.o.G.

If you use Ext it doesn't make sense to hunt for degrade-gracefully-if-js-disabled. If JS is disabled then it doesn't work. It's like how the computer would work if I disabled the CPU. Well, it wouldn't ;)

Foggy
16 Oct 2007, 12:53 AM
Hey Saki
I ask really bashful, when we can estimate your extension in Ext 2.0? :">
I wont to stress you but cant expect it :)

Thanks in advance
Greets Foggy

wesley
16 Oct 2007, 1:15 AM
jsakalos, wow, beautiful flash uploader!!

I accidently found this thread via google "flash multi upload attachment"

ever thought of merge this application demo uploader into vbulletin forum as attachment???

I've been looking flash multi upload for forum attachment for very long time as my forum contains 10,000+ pictures but it's taking very long time to upload 50 or more pictures at 1 time haha! So i'm looking for a way to reduce time upload multi image as attachment. But sadly i couldnt find one!

Wondering if you could merge it into forum as attachment, or it's not possible?

thanks :)

Wesley

jsakalos
16 Oct 2007, 9:43 AM
Unfortunately, the flash uploader crashes firefox (at least on linux) so I stopped development until we have stable flash.


jsakalos, wow, beautiful flash uploader!!

I accidently found this thread via google "flash multi upload attachment"

ever thought of merge this application demo uploader into vbulletin forum as attachment???

I've been looking flash multi upload for forum attachment for very long time as my forum contains 10,000+ pictures but it's taking very long time to upload 50 or more pictures at 1 time haha! So i'm looking for a way to reduce time upload multi image as attachment. But sadly i couldnt find one!

Wondering if you could merge it into forum as attachment, or it's not possible?

thanks :)

Wesley

jsakalos
16 Oct 2007, 9:45 AM
I'll need UploadForm and FileTree in Ext 2.0 in a couple of weeks myself. That would be the expected timeframe.


Hey Saki
I ask really bashful, when we can estimate your extension in Ext 2.0? :">
I wont to stress you but cant expect it :)

Thanks in advance
Greets Foggy

J
18 Oct 2007, 4:40 AM
Could you provide a download for the current state? Even if it isn't anywhere near production use, its still an interesting widget. With a download it would be much easier to help the development. I've found a way to enable hover/focus styles for the Ext-button above the file-browser button, but there are yet a lot of other issues.

jsakalos
18 Oct 2007, 9:42 AM
http://extjs.com/forum/showthread.php?p=60093

J
19 Oct 2007, 3:22 AM
Ok, no download then. Too bad.

stever
27 Oct 2007, 3:38 PM
On 10-16-2007:


I'll need UploadForm and FileTree in Ext 2.0 in a couple of weeks myself. That would be the expected timeframe.

That's great, that would put it at the end of October, which is coming up soon!

jsakalos
27 Oct 2007, 3:55 PM
On 10-16-2007:



That's great, that would put it at the end of October, which is coming up soon!

I don't promise ;) The part of my project that uses upload form still runs on 1.1.1 but the plan is to move it to Ext 2.0. I'm now working on another module so I must somewhere steal some time for that....(:|

Overlord
6 Nov 2007, 7:13 PM
How is the 2.0 version of the upload widget coming? It would be amazing if I could use both of your extensions in my app. =] I love your work, by the way. Keep doing an amazing job!

Foggy
7 Nov 2007, 1:06 AM
I don't promise The part of my project that uses upload form still runs on 1.1.1 but the plan is to move it to Ext 2.0. I'm now working on another module so I must somewhere steal some time for that....
I think Saki would post it here if this extension is ready for 2.0 ;)

jsakalos
7 Nov 2007, 6:45 AM
I think Saki would post it here if this extension is ready for 2.0 ;)


Sure thing! I'm too busy now with helping to get Ext 2.0 final out.

SilveR316
9 Nov 2007, 1:05 PM
So when is the 2.0 version coming out?

Sorry, just bugging ya. :D

I'd love to use this in my app, but its using 2.0 at the moment. Maybe I'll take a look at this tonight and see if I can somehow convert it to 2.0.

SilveR316
9 Nov 2007, 9:51 PM
Good news. :D


I ported the widget to Ext 2.0 tonight. There are still some kinks I need to work out, and a whole lot of testing, but I might be able to release it this weekend.

If jsakalos doesn't mind that is...

jsakalos
10 Nov 2007, 3:01 AM
No problem, you saved my time... :)

Any link? Or not yet?

rix
10 Nov 2007, 3:35 AM
Good news. :D


I ported the widget to Ext 2.0 tonight. There are still some kinks I need to work out, and a whole lot of testing, but I might be able to release it this weekend.

If jsakalos doesn't mind that is...
Really good news!
..and let me send my greetings for Saki from the neighbourhood!

SilveR316
10 Nov 2007, 10:05 AM
No link yet, but I'll have a link today. Still need to comment it all + fix up a few things, and verify that everything works correctly.

jsakalos
10 Nov 2007, 5:41 PM
Sounds very good!

Please, make it 100% API compatible (if possible) so it just can be replaced in existing code while porting an application containing the UploadForm.

Thanks,
Saki

SilveR316
10 Nov 2007, 8:01 PM
It should be compatible with the existing API, I don't think anything will change there.

I'm having a bit of a problem with how it is supposed to mark files as having an error if there is a server side error.

Could post what the expected json string with errors is perhaps?

jsakalos
11 Nov 2007, 2:41 AM
It should be compatible with the existing API, I don't think anything will change there.

I'm having a bit of a problem with how it is supposed to mark files as having an error if there is a server side error.

Could post what the expected json string with errors is perhaps?

Super!

The complete client/server interface specification is published here: http://aariadne.com/filetree/ together with an example of an error string from server.

SilveR316
11 Nov 2007, 2:08 PM
Ok, Im having problems returning a value to the form once the upload finished.

In processResponse() it expects a json string of the results from the server. However, no matter what I do, the result in action.reponse.responseText is empty.

The php script can output just a regular string, json string, xml, whatever, but everything in the action.reponse.* is always empty or undefined.

Any ideas?

SilveR316
11 Nov 2007, 3:03 PM
I verified that the php script that the upload is going to returns the correct data using Firebugs 'net' panel.

But my 'action.response' object is still empty.

What gives?

Foggy
12 Nov 2007, 4:51 AM
did you have a preview of that fault?
So it is a little difficult to help in my opinion...

I verified that the php script that the upload is going to returns the correct data using Firebugs 'net' panel.
Under the tab "Console" you could see the request params and the server response of any requests...
Just expand that ;)

SilveR316
12 Nov 2007, 6:41 AM
I know that, the trouble is that the form submit gets posted to an iframe because of the file upload. Normally, it would be an ajax call, but not in this case because of the files.

It posts the response to a hidden iframe, and gets the results back from it. It's not listed in the console tab, only in the 'net' tab.

I'll post an example of it shortly.

SilveR316
12 Nov 2007, 6:45 AM
Example: http://bwegrzyn.com/extjs/ux/uploadform2/

Now that I'm checking it at work, I get a file download popup when it finished uploading. Probably related to the content-type header it's sending.

wm003
12 Nov 2007, 6:56 AM
Works great for me! Good work

Foggy
12 Nov 2007, 7:07 AM
Works also perfect for me in FF 2
Popups a file download in IE7
Great Work

SilveR316
12 Nov 2007, 1:35 PM
I fixed the IE issue. It seems it didn't like the text/html headers I was sending, so I just removed that line from the script.

Still not sure about not receiving any response from the upload script.

stever
12 Nov 2007, 3:27 PM
Use firebug 1.1b8 and you will see that you get a response of {"success":true}

SilveR316
12 Nov 2007, 4:15 PM
From progress.php right?

Unfortunately for me, thats not to which file the script is uploading. Look at the 'net' panel. You'll see that the script is posting the upload to upload.php, which accepts the download and stores it on the server. Then upload.php returns a json string with errors in it.

progress.php is the file that returns the progress information and is seperate from the upload.php file.

I need the response of upload.php in my form. I get the 'action' object back in my callback function, but everything in the 'action.response.*' part of it is either empty or null.

stever
12 Nov 2007, 4:23 PM
progress.php:
{"success":true}

upload.php:
{"success":false,"errors":[]}

Firebug 1.1 keeps the Net entries for iframes that are created then removed.

SilveR316
12 Nov 2007, 4:45 PM
Yeah... I just fixed it. No idea why no-cache headers would make it receive an empty response.

Anyways, its receiving the proper response now. All I have to do is tweak the qtip to contain the server response. I don't think the 1.1 way of doing it works.

Overlord
12 Nov 2007, 6:54 PM
I'm having problems with the widget. I'm always getting false as a response and I'm not quite sure why. Here is my code:


Ext.onReady(function(){
var upform = new Ext.ux.UploadForm2('form-ct-in', {
autoCreate: true,
url: 'save.php',
method: 'post',
maxFileSize: 1048570,
baseParams: {
cmd:'upload'
}
});


<?php
/*foreach($_FILES as $value) {
if( move_uploaded_file($value['tmp_name'], "uploads/" . $value['name']) )
echo "{success:true, Msg:'File uploaded successfully'}";
else
echo "{success:false, Msg:'Error uploading file.'}";
//print_r($value['tmp_name']);
}*/
if (move_uploaded_file($_FILES['ext-gen34']['tmp_name'], "uploads/" . $_FILES['ext-gen34']['name']))
echo "{success:true,'msg':'File uploaded successfully'}";
else
echo "{success:false, 'msg':'Error uploading file.'}";
//print_r($_FILES);
?>

If anyone could take a look at it, I would really appreciate it. Thanks for the great extension!

SilveR316
12 Nov 2007, 6:59 PM
Are you sure that the form field is named ext-gen34? The id is auto generated so it might change.

SilveR316
12 Nov 2007, 7:00 PM
Update: the 2.0 version is working fine right now... with server side errors and all.. but....

Who knows how qtips work in 2.0? I can't seem to get them to work and show the server side error...:-?

Overlord
12 Nov 2007, 7:45 PM
Well I don't really know how to refer to it by name since I couldn't get a name config option working. Is there another way to do it?

SilveR316
12 Nov 2007, 7:56 PM
The script you are posting to will have access to all the files from the $_FILES variable. Thats where all the information will be at.

Overlord
12 Nov 2007, 8:06 PM
So the commented out loop should work?

SilveR316
12 Nov 2007, 8:23 PM
Here's the php code I use to return results back to the widget. Basically it just sets a bogus error for each file it receives. You can do whatever you want with the file inside the foreach loop.


<?php
$return = array('success' => false, 'errors' => array());
foreach ($_FILES as $key => $values)
{
$return['errors'][$key] = 'test error';

// uncomment to up the uploaded file to the current directory
//move_uploaded_file($values['tmp_name'], $values['name']);
}
echo json_encode($return);

SilveR316
12 Nov 2007, 8:34 PM
I posted the 2.0 version of the code here: http://extjs.com/forum/showthread.php?t=17956

Please continue any 2.0 discussion there so we don't clutter up this 1.x thread with 2.0 stuff. :)

Overlord
12 Nov 2007, 9:50 PM
Thank you so much! That's working perfectly.

mschering
14 Nov 2007, 1:52 AM
I've created a simplified version of it for 2.0. You can add it to a formpanel as a field and it's not a form itself. Progress is not supported.

You can add it to a form like this:



var uploadFile = new Ext.ux.UploadFile({
inputName : 'attachments'
});
var upForm = new Ext.form.FormPanel({
fileUpload:true,
items: uploadFile,
bodyStyle: 'padding:5px'
});




The code of upload file:


/**
* @copyright Copyright Intermesh 2007
* @author Merijn Schering <[email protected]>
*
* Based on the File Upload Widget of Ing. Jozef Sakalos
*
* This file is part of Group-Office.
*
* Group-Office is free software; you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the
* Free Software Foundation; either version 2 of the License, or (at your
* option) any later version.
*
* See file /LICENSE.GPL
*/

Ext.namespace('Ext.ux');

Ext.ux.UploadFile = function(config) {

this.inputs = new Ext.util.MixedCollection();

Ext.ux.UploadFile.superclass.constructor.call(this, config);


};


Ext.extend(Ext.ux.UploadFile, Ext.BoxComponent, {

defaultAutoCreate : {tag: "div"},
addText : 'Browse your PC',
addIcon : 'add.png',
deleteIcon : 'delete.png',
fileCls: 'file',

onRender : function(ct, position){
this.id=Ext.id();
this.el = ct.createChild({tag: 'div', id: this.id});

this.createButtons();

this.createUploadInput();

},

createUploadInput: function() {

if(!this.inputName)
{
this.inputName = Ext.id();
}

var id = Ext.id();

var inp = this.inputWrap.createChild({
tag:'input'
, type:'file'
, cls:'x-uf-input'
, size:1
, id:id
, name:this.inputName+'[]'
});
inp.on('change', this.onFileAdded, this);
this.inputs.add(inp);

return inp;
},

createButtons: function() {

// create containers sturcture
this.buttonsWrap = this.el.createChild({
tag:'div', cls:'x-uf-buttons-ct',
children:[
{ tag:'div', cls:'x-uf-input-ct'
, children: [
{tag:'div', cls:'x-uf-bbtn-ct'}
, {tag:'div', cls:'x-uf-input-wrap'}
]
}

]
});

// save containers for future use
this.inputWrap = this.buttonsWrap.select('div.x-uf-input-wrap').item(0);
this.addBtnCt = this.buttonsWrap.select('div.x-uf-input-ct').item(0);

// add button
var bbtnCt = this.buttonsWrap.select('div.x-uf-bbtn-ct').item(0);
this.browseBtn = new Ext.Button({
renderTo: bbtnCt,
text:this.addText + '...'
, cls: 'x-btn-text-icon'
, icon: this.addIcon
});


},

/**
* File added event handler
* @param {Event} e
* @param {Element} inp Added input
*/

onFileAdded: function(e, inp) {

// hide all previous inputs
this.inputs.each(function(i) {
i.setDisplayed(false);
});

// create table to hold the file queue list
if(!this.table) {
this.table =this.el.createChild({
tag:'table', cls:'x-uf-table'
, children: [ {tag:'tbody'} ]
});
this.tbody = this.table.select('tbody').item(0);

this.table.on({
click:{scope:this, fn:this.onDeleteFile, delegate:'a'}
});
}

// add input to internal collection
var inp = this.inputs.itemAt(this.inputs.getCount() - 1);

// uninstall event handler
inp.un('change', this.onFileAdded, this);

// append input to display queue table
this.appendRow(inp);

// create new input for future use
this.createUploadInput();

},
/**
* Appends row to the queue table to display the file
* Override if you need another file display
* @param {Element} inp Input with file to display
*/
appendRow: function(inp) {
var filename = inp.getValue();
var o = {
id:inp.id
, fileCls: this.getFileCls(filename)
, fileName: Ext.util.Format.ellipsis(filename.split(/[\/\\]/).pop(), this.maxNameLength)
, fileQtip: filename
}

var t = new Ext.Template([
'<tr id="r-{id}">'
, '<td class="x-unselectable {fileCls} x-tree-node-leaf">'
, '<img class="x-tree-node-icon" src="' + Ext.BLANK_IMAGE_URL + '">'
, '<span class="x-uf-filename" unselectable="on" qtip="{fileQtip}">{fileName}</span>'
, '</td>'
, '<td id="m-{id}" class="x-uf-filedelete"><a id="d-{id}" href="#"><img src="' + this.deleteIcon + '"></a>'
, '</td>'
, '</tr>'
]);

// save row reference for future
inp.row = t.append(this.tbody, o, true);
},

onDeleteFile: function(e, target) {
this.removeFile(target.id.substr(2));
},

/**
* Removes file from the queue
* private
*
* @param {String} id Id of the file to remove (id is auto generated)
* @param {Boolean} suppresEvent Set to true not to fire event
*/
removeFile: function(id) {
if(this.uploading) {
return;
}
var inp = this.inputs.get(id);
if(inp && inp.row) {
inp.row.remove();
}
if(inp) {
inp.remove();
}
this.inputs.removeKey(id);

},

getFileCls: function(name) {
var atmp = name.split('.');
if(1 === atmp.length) {
return this.fileCls;
}
else {
return this.fileCls + '-' + atmp.pop();
}
},
clearQueue: function() {
this.inputs.each(function(inp) {
if(!inp.isVisible()) {
this.removeFile(inp.id, true);
}
}, this);
},

/**
* Disables/Enables the whole form by masking/unmasking it
*
* @param {Boolean} disable true to disable, false to enable
* @param {Boolean} alsoUpload true to disable also upload button
*/
setDisabled: function(disable) {

if(disable) {
this.addBtnCt.mask();
}
else {
this.addBtnCt.unmask();
}
}

});

visves
23 Nov 2007, 5:04 PM
folks, I am having a bit of a problem with a callback on a successful upload. I have the following in my JS code (this is in ext 1.1).

upform = new Ext.ux.UploadForm('form-ct', {
autoCreate: true
, url: 'uploadFile.htm'
, method: 'post'
, maxFileSize: 1048570
, pgCfg: {
uploadIdName: 'upl1'
, uploadIdValue: 'auto'
, progressBar: true
, progressTarget: 'under'
, interval: 1000
, maxPgErrors: 10
, options: {
url: 'progress.htm'
, method: 'post'
// , callback: uploadCallback
}
}
, baseParams: {
cmd:'upload'
, path: 'root'
, folderId: folderId
}
});

upform.on('actioncomplete', function(){
alert('action complete');
});

It seems just fine except for some reason I see the following error in firebug :

Node was not found" code: "8.

IE is not throwing any JS errors. Can someone point me to what i'm doing wrong here?

jsakalos
24 Nov 2007, 5:52 AM
Check what's difference between your code and example code http://aariadne.com/uploadform (or http://aariadne.com/filetree ?).

Or, example pages also throw this error?

visves
24 Nov 2007, 6:51 AM
Saki, Thanks for your reply!

The code in both places seem identical. I got rid of the error for now, by doing the following.I am passing the method to call back as an additional parameter as part of the pgCfg. Then in your original code, I am doing the following :

onSuccess: function(form, action) {
this.pgCfg.uplcallback();
this.processResponse(form, action);
}

One interesting thing is If I call my callback after the processResponse, I end up getting the same error through firebug. ie., this code is causing the same problem:

// This is producing the same error
onSuccess: function(form, action) {
this.processResponse(form, action);
this.pgCfg.uplcallback();
}

Any idea on what I did wrong?

Originally, I had this piece of code in my calling method..which I got rid of now..

upform.on('actioncomplete', function(){
alert('action complete');
});

Ultimately I just want to be notified that the upload has finished successfully.



Check what's difference between your code and example code http://aariadne.com/uploadform (or http://aariadne.com/filetree ?).

Or, example pages also throw this error?

jsakalos
24 Nov 2007, 10:38 AM
The only thing I can think of is that alert stops execution of javascript. Try your original code with Ext.MessageBox or, temporarily, with console.log.

The idea of listening to actioncomplete event if absolutely fine.

Gigel Ael
28 Nov 2007, 4:30 AM
Hi,

I open two Firefox tabs with the same page that contains an upload form. I add one file to the queue in each upload form in each firefox tab and I hit the upload button relatively in the same time. The progress bar doesn't work anymore. Does anyone have a solution to this issue?


Thanks,
Gigel

jsakalos
28 Nov 2007, 4:38 AM
There can be many reasons. How does your server handle concurrent file uploads? Do you use pecl php extension? How does that extension handle concurrent file uploads?

Anyway, I'm trying to figure out practical use of two concurrently running upload forms in two Firefox tabs in vain...

Gigel Ael
28 Nov 2007, 4:56 AM
I've also tested this on http://aariadne.com/uploadform and the progress doesn't work either.

I agree that using two firefox tabs to upload files while having a control able to handle multiple uploads is stupid. But some users may try this and it would be nice if the progress continues to work as it should be.

jsakalos
28 Nov 2007, 5:51 AM
Hmmm, single upload on demo page works; I've never tested concurrent uploads. I would suspect that it is how pecl uploadprogress handles progress. Apache runs multithread but I'm not quite sure that uploadprogress can get info on progress from all threads.

I'm not going into this deeper as I consider it only a cosmetic flaw... ;)

cleverdevil
12 Dec 2007, 11:07 AM
I have a place in my application where a user can upload a single picture. I don't need or want the complexity of multiple files, just a single file. If the user uploads a different file, it will just overwrite the old one. Is there a way to make this widget only allow one file to be uploaded?

It seems like this is a very common use case?

jsakalos
13 Dec 2007, 7:12 AM
You can then use standard Ext form field upload framework.

cleverdevil
13 Dec 2007, 7:47 AM
Pardon my ignorance, but I have scoured Ext.form.* and don't see anything relating to file uploads. What am I missing?

jsakalos
13 Dec 2007, 4:01 PM
Look for BasicForm config fileUpload:true and for field type "file".

christ1an
20 Dec 2007, 3:29 AM
Hello,

i want to use this extension wit the internal ext-adapter (my whole application uses this), but when i press the "upload"-button, an error occured:


ext-base.js (line 12) :
_94.elements has no properties
getViewWidth(div#upl-panel.x-layout-active-content)ext-base.js (line 12)
request(Object scope=Object timeout=30000)ext-all-debug.js (line 4966)
run()ext-all-debug.js (line 24285)
apply()ext-base.js (line 10)
[Break on this error] (function(){var _1;Ext.lib.Dom={getViewWidth:function(_2){return _2?this.getDocu...

has ever anyone tested it this way? or is the error on my side?

jsakalos
20 Dec 2007, 3:35 AM
This version is not compatible with Ext 2.0. There is one port, not written by me, hanging around.

christ1an
20 Dec 2007, 5:01 AM
oh sorry, i dont use ext 2.0, its on Ext 1.1.1

i would like to debug that, is there a possibility to view the output from the server (that is coming to the iframe)? I am trying to understand, how this gonna work, its a little new to me, please dont be hard to me :)

e.g. by a callback-function given to the UploadForm? I dont see anything right now :(

jsakalos
20 Dec 2007, 7:11 AM
Well, the best advice is to compare your code with demo page code to find out a difference that could cause the error.

http://aariadne.com/uploadform

Aleks_P
21 Dec 2007, 2:30 PM
I posted the 2.0 version of the code here: http://extjs.com/forum/showthread.php?t=17956

Please continue any 2.0 discussion there so we don't clutter up this 1.x thread with 2.0 stuff. :)

SilveR316, could post here source of upload.php and progress.php?

btw is there possibility to add multiple files selection in open dialog?

Comma
26 Dec 2007, 4:38 AM
Nice widget, but what about mimetype icons? Where i can get iconpack and reifine path?

jsakalos
26 Dec 2007, 4:58 AM
I don't know about any complete mime-types icon pack; try to search net hopefully you'll find some.

Icons are then used in css file(s). Something like this:



.file-aac .x-tree-node-icon
, .file-ac3 .x-tree-node-icon
, .file-aifc .x-tree-node-icon
, .file-aiff .x-tree-node-icon
, .file-ape .x-tree-node-icon
, .file-au .x-tree-node-icon
, .file-flac .x-tree-node-icon
, .file-m3u .x-tree-node-icon
, .file-m4a .x-tree-node-icon
, .file-mac .x-tree-node-icon
, .file-mid .x-tree-node-icon
, .file-midi .x-tree-node-icon
, .file-mp2 .x-tree-node-icon
, .file-mp3 .x-tree-node-icon
, .file-ogg .x-tree-node-icon
, .file-psid .x-tree-node-icon
, .file-ra .x-tree-node-icon
, .file-ram .x-tree-node-icon
, .file-sf .x-tree-node-icon
, .file-sid .x-tree-node-icon
, .file-spx .x-tree-node-icon
, .file-wav .x-tree-node-icon
, .file-wma .x-tree-node-icon
, .file-wv .x-tree-node-icon
, .file-wvc .x-tree-node-icon
{
background-image: url(../img/icons/mime/sound.png);
}

Comma
26 Dec 2007, 8:12 AM
Thanks for css tip, and about icons - http://www.famfamfam.com/lab/icons/silk/ I got here some usefull sets.

jsakalos
27 Dec 2007, 12:16 PM
Yeah, I also use famfamfam icons, however I think the set doesn't contain all mimetypes...

kiprud
13 Jan 2008, 6:54 AM
Please can you make an archive with all files needed to run this widget standalone on a apache /php/mysql/ server ? thks best regards !

jsakalos
13 Jan 2008, 1:39 PM
I'll do for 2.0 version. Meanwhile: [Ver. 1.0-beta2] Ext.ux.UploadForm File Upload Widget - Page 13 - Ext JS Forums (http://extjs.com/forum/showthread.php?p=60093)

Edit: I mean client files. I'll never publish server files.

elmarfreire
21 Feb 2008, 12:59 PM
Hi jsakalos,


You have created the Ext.ux.UploadForm correct? You would like me to provide the sources of progress.php and filetree.php? I want to convert them for java.


{"time_start":"1203627482","time_last":"1203627486","speed_average":"117836","speed_last":"179165","bytes_uploaded"

:"471344","bytes_total":"4210079","files_uploaded":"0","est_sec":"31","success":true}

I want to generate this json of response in Java.

Thanks!

manville
3 Mar 2008, 7:39 AM
Right click on demo page, View Source, find out which files you need, download from demo page.

Good luck! :)

I might be missing something; I am new to Extjs how / where do I get the Ext.ux.UploadForm.js? I would like to use this awesome tool in the non SWF version. I have a SWF version running but it is very unreliable.

jsakalos
3 Mar 2008, 9:22 AM
http://aariadne.com/uploadform/Ext.ux.UploadForm.js

same for other needed files... ;)

johne90
3 Mar 2008, 6:06 PM
I am trying to get the SWFUpload version of this to work. I have copied all of the files on the demo page, and all of the file locations are correct. But the only thing that displays on the page is the box with the this version is postponed message.

Can someone tell me how to get the swf upload widget to display fully?

jsakalos
4 Mar 2008, 3:36 AM
I have stopped devel of swf version at it crashed [email protected]

johne90
4 Mar 2008, 1:19 PM
Right, I read that. So its not possible for me to use it as it is on the demo?

jsakalos
4 Mar 2008, 1:33 PM
I'm not sure on what was the state of devel when I abandoned it. You can download files from demo page and play with it on your own... ;)

johne90
4 Mar 2008, 1:40 PM
Yeah, I did that as I said in my first post.

All I ever asked was, why when I have the exact same setup as the demo page does only the box with the following message show up?: "Development of this swfupload version has been postponed due to instability of the flash uploader on [email protected] platform. Details..."

jsakalos
4 Mar 2008, 2:01 PM
There must be some difference... ;)

I'd suspect some different paths or a javascript error. Firebug?

johne90
4 Mar 2008, 3:53 PM
I set up the structure with all files that you included on the demo page just as it appeared. Would it be paths that are different in the js files that I copied from the demo that would cause this?



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="../filetree/filetree.css">
<link rel="stylesheet" type="text/css" href="uploadform.css">
<script type="text/javascript" src="../extjs/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../extjs/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="Ext.ux.SWFUpload.js"></script>

<style type="text/css">
#form-ct, #swfu-out {
position: relative;
left: 14px;
width: 180px;
padding: 10px;
border: 1px solid silver;
background-color: #D3E6EA;
margin-bottom: 24px;
}
#swfu-out {
font-size: 8pt;

}
#adsense-top {
margin: 10px;
}
#info-column {
position: absolute;
top: 108px;
right: 8px;
width: 240px;
border: 1px dotted silver;
background-color: #efefef;
margin: 4px;
padding: 8px;
font-size: 8pt;
}
#info-column ul {
list-style-type: disc;
list-style-position: inside;
}
#pg-target {
position: absolute;
left: 400px;
top: 108px;
width: 154px;
}
#float-form-ct {
}
</style>
</head>
<body>

<div id="form-ct"><div id="form-ct-in"></div></div>
<div id="pg-target"></div>
<div id="float-form-ct"></div>

<div id="bbtn-swfu"></div>
<div id="swfu-out"><div style="margin-bottom:10px;border:1px solid silver;background:#ffe8e8;padding:2px;">Development
of this swfupload version has been postponed due to instability of the flash uploader on [email protected] platform.
<a href="http://extjs.com/learn/Extension:SWFUpload">Details...</a></div><div id="swfu-ct"></div></div>

<script type="text/javascript" src="uploadform.js"></script>

<!-- Remove next line from local installation -->

<script type="text/javascript" language="javascript">var zstpagid =4;var zstROI = 1;</script>
<script type="text/javascript" language="javascript">
var s_sid = 90134;var st_dominio = 4;
var cimg = 0;var cwi =150;var che =30;
</script>

</body>
</html>

jsakalos
4 Mar 2008, 4:49 PM
Do you use Firebug? It will tell you if you have all files in place (http://getfirebug.com).

kompset
10 Mar 2008, 5:38 AM
Hello, Jozef Sakalos!

I have some difficulties at uploading files Ext File Upload. They then do not wish to work.
I have to you a request. You can upload all files into one archive? Please! At me correctly to download files about a web-page it is impossible.

Thanks for the help.

Yours faithfully, Sergey.

P.S. I badly know English language.:(

jsakalos
10 Mar 2008, 5:54 AM
You mean that demo site doesn't work? Because I've just checked it and it seems to work.

If it is your implementation then you need server side scripts written per this specification: http://aariadne.com/filetree/

jsakalos
11 Mar 2008, 5:59 AM
See some news here: [In Progress] Saki's FileTree for Ext 2.0 (http://extjs.com/forum/showthread.php?t=29090)

loveyeah
12 Mar 2008, 12:00 AM
Hi all,

what I need that I write, so here is another my "kid". It's Ext.form.BasicForm extension that provides easy user interface for (multiple) file uploads.

I will integrate it to the FileTree context menu soon.

You can see it in action on the Live Demo Page (http://aariadne.com/uploadform).

Cheers,
I want code source ,thanks very much!

jsakalos
12 Mar 2008, 3:31 AM
[Ver. 1.0-beta2] Ext.ux.UploadForm File Upload Widget - Page 13 - Ext JS Forums (http://extjs.com/forum/showthread.php?p=60093)

ofir
12 Mar 2008, 8:52 AM
The widget looks great, too bad it doesn't work in Opera

jsakalos
16 Mar 2008, 8:40 PM
The widget looks great, too bad it doesn't work in Opera

Try Ext 2.0 version in Opera: [Beta 1] Saki's FileTree for Ext 2.0 (http://extjs.com/forum/showthread.php?t=29090)

bishop
4 Jun 2008, 5:20 AM
I saw the live demo,but can I download the example complete?
Sorry for my english but I'm italian...!

Hussein
12 Jun 2008, 5:50 AM
[Ver. 1.0-beta2] Ext.ux.UploadForm File Upload Widget - Page 13 - Ext JS Forums (http://extjs.com/forum/showthread.php?p=60093)

Very good, but where I get the Ext.ux?

jsakalos
12 Jun 2008, 11:53 PM
Do you really want version for Ext 1.x? If you want version for Ext 2.0 go to http://filetree.extjs.eu

burroughsc
16 Jul 2008, 2:47 AM
I am using the upload panel with EXT 2.1, and can physically get a file to upload, but the uploadCallback is always success=true and response.responseText="" no matter what my serverside script outputs.

eg {'success':true}, {'success':false}, {'hello':'world'}

Have I missed something?

// window with uploadpanel
var win = new Ext.Window({
width:180
,minWidth:165
,id:'winid'
,height:220
,minHeight:200
// ,stateful:false
,layout:'fit'
,border:true
,closable:false
,title:'UploadPanel'
,iconCls:'icon-upload'
,items:[{
xtype:'uploadpanel'
,buttonsAt:'tbar'
,id:'uppanel'
,url:'http://localhost/cgi-bin/UploadHandlerLocalhost.cgi'
,path:'root'
,maxFileSize:1048576
,enableProgress:false
}]
});
win.show.defer(500, win);

jsakalos
16 Jul 2008, 11:06 AM
What's http header the server sends? I guess it should be text/html as it is file upload that runs in iframe.

burroughsc
16 Jul 2008, 11:37 PM
What's http header the server sends? I guess it should be text/html as it is file upload that runs in iframe.

Header is text/html with UTF-8 encoding.

I've tried a whole bundle of things, but nothing ever changes the fact that the response object in uploadCallback is always:
{responseText:'', responseXML:null, arguments:undefined}

Anything obvious I need to look at?

8148

jsakalos
17 Jul 2008, 1:18 PM
It sounds very strange... I've tested also server errors and everything was fine... I have no other idea but to step int the code, both extension and Ext, to see what's happening.

burroughsc
18 Jul 2008, 1:21 AM
It sounds very strange... I've tested also server errors and everything was fine... I have no other idea but to step int the code, both extension and Ext, to see what's happening.

You know what was wrong? :-?

I was using an upload script hosted on a different virtual host to the one I was running the upload panel from. As soon as I moved the script to the same virtual host I started to receive valid values in the upload callback. Although quite why that should have made any difference I am not entirely sure.

Michelangelo
23 Jul 2008, 10:57 PM
Hi jsakalos

I would like insert insidemy window your fantastic component!


.
.
.
.
{
columnWidth: 0.5,
layout: 'form',
bodyStyle: 'padding:5px;',
border: false,
items: [
{xtype: 'textfield', fieldLabel: 'Business Phone', id: 'businessphone', name: 'businessphone', anchor: '95%'},
{xtype: 'textfield', fieldLabel: 'Mobile Phone', id: 'mobilephone', name: 'mobilephone', anchor: '95%'},
{xtype: 'textfield', fieldLabel: 'Tel. Extension', id: 'extension', name: 'extension', anchor: '55%'},
{xtype: 'textfield', fieldLabel: 'Department', id: 'department', name: 'department', anchor: '95%'},
{xtype: 'panel',
items: new Ext.ux.UploadForm('form-ct-in', {
autoCreate: true
, url: '/filetree/filetree.php'
, method: 'post'
, maxFileSize: 1048570
, pgCfg: {
uploadIdName: 'UPLOAD_IDENTIFIER'
, uploadIdValue: 'auto'
, progressBar: true
, progressTarget: 'under'
, interval: 1000
, maxPgErrors: 10
, options: {
url: 'progress.php'
, method: 'post'
// , callback: pgCallback
}
}
, baseParams: {
cmd:'upload'
, path: 'root'
}
})
}
]
}
.
.
.
.



where I wrong?

thanks

jsakalos
24 Jul 2008, 12:24 AM
UploadForm is for Ext 1.x. Use UploadPanel instead.

chicano
19 Mar 2010, 6:07 PM
Hello all,

I would like to know if anyone has implemented this amazing work in ExtJS 3.x.x if so please share it ;).

Pachat
27 Jul 2010, 4:36 AM
You may have a look here (http://www.sencha.com/forum/showthread.php?29090-Beta-1-Saki-s-FileTree-for-Ext-2.0/page80)