Monday, July 16th, 2007

Ext.ux.UploadForm: An Ext File Upload Widget

Category: Component, JavaScript, Sencha

Jozef Sakalos has followed on from his Ext Filetree widget with a new file upload manager, Ext.ux.UploadForm that provides a user interface for easy uploading of files to a server.

Files are first added to an “upload queue” and then they are uploaded to the server.

Any file can be individually removed from the queue before upload or the whole queue can be cleared.

The result of upload is shown for each file by icons of success or failure and, in the case of failure, the server error message is shown as the tooltip of the failure icon.

Unfortunately, one of the biggest pains is not being able to select more than one darn file in the window that pops up, which can’t be fixed here.

Upload Form

Posted by Dion Almaer at 6:02 am
28 Comments

+++--
3.8 rating from 117 votes

28 Comments »

Comments feed TrackBack URI

I’ve implemented this same stuff based on mootools and Swiff.upload wich dóes let you select more than one file in the popup window that comes up. (it was on Ajaxian some weeks ago) It was one hell to set up, but i’ve got it standardized now for myself.

Comment by SchizoDuckie — July 16, 2007

Very clean widget, I’m impressed. I’ll definitely be digging through his code to look at his methodology.

Comment by Brian — July 16, 2007

I’ve seen your implementation and I like it very much.

I was designing mine from the viewpoint of Ext JS where I didn’t want any flash (if you mean swfupload) and where I don’t use mootools. Good thing is that people have one more upload control to choose from according their need, likes and preferences.

Comment by jsakalos — July 16, 2007

Info: I’m now working on implementation of configurable textual information on upload in progress like completed bytes, speed, average and estimated time to complete. Looks promising. ;)

Comment by jsakalos — July 16, 2007

Yes André, I’ve seen that and I like it. I just didn’t want to use swfupload.

Comment by jsakalos — July 16, 2007

I’m still waiting for a clean solution based on Prototype+Scriptaculous: FancyUpload is very nice, but it is based on MooTools… :(

Comment by Antonello — July 16, 2007

SchizoDuckie, isn’t the problem you’re describing a limitation of the browser popup window?
With the swfupload variants, the popup window it generates has multiple select ok – but because can only contain 1 file, thats why browsers only allow you to select one on the popup.

This should really change – in fact the whole implementation in browsers is pretty lame – you can’t style it much, and you cant upload multiple files with it :(

I hope this is addressed in HTML 5 :)

Comment by Ryan G — July 16, 2007

hmm – here’s what i was trying to say again – the comment script removed my input tag :)

“SchizoDuckie, isn’t the problem you’re describing a limitation of the browser popup window?
With the swfupload variants, the popup window it generates has multiple select ok – but because input type=’file’ can only contain 1 file, thats why browsers only allow you to select one on the popup.

This should really change – in fact the whole input type=’file’ implementation in browsers is pretty lame – you can’t style it much, and you cant upload multiple files with it

I hope this is addressed in HTML 5 :)”

Comment by Ryan G — July 16, 2007

I see the progress bar, but basically it’s just for show, right? It isn’t really showing how much was uploaded. I too, am waiting for some implementation with prototype :P

Comment by Cosmin Catalin Sanda — July 16, 2007

Progress bar is real. Look at the UploadForm wiki page for explanation. There will be also textual info on upload progress available soon.

Comment by jsakalos — July 16, 2007

Nice work. Please note that your implementation does not degrade gracefully if javascript is not available. It would be perfect if it improved an html upload form.

i developed a jquery plugin that handles file upload (not multiple yet) in which the progress bar reflects the actual percentage. It’s based on jquery and the flash plugin.

Comment by pixeline — July 16, 2007

Ryan G:

I’ve implemented the fancy upload stuff mentioned here above. You are right that the browser-native file select boxes allow only one file to be selected and the SWF upload allows multiple selects. The point is using the SWF is that you can have a callback on the closing of the multiple select file box which in turn creates multiple file input elements with the correct files attached to them!

Comment by SchizoDuckie — July 16, 2007

pixeline,

UploadForm is Ext JS Extension so if javascript is off it doesn’t work at all.

Comment by jsakalos — July 16, 2007

arf, my bad :)

Comment by pixeline — July 16, 2007

has anyone looked at license, commercial license is really expensive for js library. why does ajaxian advertise yui-ext js so much ?

Comment by Kalyan — July 16, 2007

The commercial license is optional and only for people who feel they need one. It is completely free for commercial use.

Comment by Sam — July 16, 2007

@Kalyan: Ajaxian is not advertising any library or script that they post about. They’re simply posting a blog entry about a cool feature. Ext is a very well-built library with a great UI suite. It has a great following and community. It makes sense for Ajaxian to post about it.

As for Ext’s license, I have no idea why you’re concerned about it. If you read the license page (http://extjs.com/license) you’ll see that they offer an open-source license under LGPL. What’s your primary concern?

Comment by Rey Bango — July 16, 2007

Josef: Looks great. One issue I noticed: if I add one file and upload it, works fine and I get a green check next to the file. If I add another file (for a total of 2) it will upload both files, and so on e.g. if I add files one at a time it will continually upload all the files not just the last one I added.
Cheers,
Scott

Comment by Scott M. — July 16, 2007

Hi Scott,

maybe I add and option not to re-upload files once done. I was busy with textual info on uploads, that works now, so now I’ll polish it to behave as expected.

Comment by jsakalos — July 16, 2007

To the author: One request, implement a version of this that also does the SWF of Flash upload. Why? You get multi-select and drag and drop. Do that and I’ll definitely donate to the cause!

Comment by David Jensen — July 16, 2007

A really crude way of getting around the single file at a time issue is make a giant form with 100 input=file’s in it. Then install the firefox plugin dragdropupload, you’ll be able to drag n drop your hundred files

Like I said it’s crude ;]

I’m sure you could make an implementation of this which wasn’t quite so ugly, could be useful if you’re developing a CMS for a single client if you can convince them to use firefox

Comment by Steve Boyd — July 16, 2007

Hi Steve,
you’re right that wouldn’t be cross browser. (BTW, I was first thinking about it.) File upload has been the painful area of web applications for years and I’m not sure if it’s going to change for the better soon…

Comment by jsakalos — July 16, 2007

Hi David,

I’ll think about it. Drag & drop and multiselect are interesting features for users so I’ll give it a try. When (and if) there be anything functional I’ll inform you all.

Comment by jsakalos — July 16, 2007

What should the progress.php look like?

Comment by rightondev — July 17, 2007

If you’re using uploadprogress PHP extension it should just json_encode the return value of uploadprogress_get_info($id) call.

Comment by jsakalos — July 18, 2007

Great work, is it possible to get the progress.php?

Comment by buggzzy — July 23, 2007

Yes, just contact me on skype nick: jsakalos

Comment by jsakalos — July 23, 2007

Client server progress bar is fairly easy with perl cgi upload. A tmp file is created during the upload, the name of which can be set manually. By monitoring the file size using ajax and an external script, its possible to create a real progress bar.

I still prefer FancyUpload though. Its a lot more reliable and less buggy. When flash isn’t available (rare nowadays), degrade to a single file upload field.

Comment by $JEET$ — August 10, 2007

Leave a comment

You must be logged in to post a comment.