Monday, July 16th, 2007
Ext.ux.UploadForm: An Ext File Upload Widget
Category: Component, JavaScript
, Sencha
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.
Related Content:
3.8 rating from 111 votes
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.
Very clean widget, I’m impressed. I’ll definitely be digging through his code to look at his methodology.
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.
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. ;)
Yes André, I’ve seen that and I like it. I just didn’t want to use swfupload.
I’m still waiting for a clean solution based on Prototype+Scriptaculous: FancyUpload is very nice, but it is based on MooTools… :(
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 :)
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 :)”
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
Progress bar is real. Look at the UploadForm wiki page for explanation. There will be also textual info on upload progress available soon.
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.
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!
pixeline,
UploadForm is Ext JS Extension so if javascript is off it doesn’t work at all.
arf, my bad :)
has anyone looked at license, commercial license is really expensive for js library. why does ajaxian advertise yui-ext js so much ?
The commercial license is optional and only for people who feel they need one. It is completely free for commercial use.
@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?
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
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.
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!
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
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…
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.
What should the progress.php look like?
If you’re using uploadprogress PHP extension it should just json_encode the return value of uploadprogress_get_info($id) call.
Great work, is it possible to get the progress.php?
Yes, just contact me on skype nick: jsakalos
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.