Multi FileUpload control

Modified: 2008/10/08 11:54 by Pavol - Categorized as: Extensions
Hi, I've been thinking a lot, if I should add this control in here, not because it's so cool, but right the opposite. But sometimes it appeared on the forum, that fileupload control would be great feature, so for those who want to have anything at least here it is.

FileUpload

FileUpload











Edit

A little theory first

Upload of file in ASP.NET needs to make postback. So you can open a new window and upload file there or if you don't mind postback at all, then you could use standard asp:FileUpload web control and it'll work just fine.

But if anyone solved fileupload control with AJAX compatibility, then he knows it's not easy task at all. To be honest I didn't find solution that shows it can be done. But after a little investigation it appeared that old iframe could do the trick and it really did.

The solution is quite easy. Load the page, inside that page let's have an iframe with fileupload control and the button that does postback (not callback). After upload an iframe gets rerendered, but the rest of the page remains untouched. It has a some lacks though. You don't have access to the rest of your page controls, because they're simply not in the iframe. Also you need an extra aspx page for the iframe, so it would be difficult to have a component that has to contain aspx page, but with HttpHandler it's possible.

OK, that's not the solution I used. The idea remains the same, but the solution lies in form's target attribute. If the upload button is clicked, now the whole form is targeted into an iframe and sent back to the server. It should remove the previous lacks.

Edit

Support

It was tested on FireFox 3.0, IE 7 and Opera 9.5. Google Chrome beta has some problem with the script if more than one file can be uploaded. If they release better debugger, then I shall remove this problem, because personally I like this browser.

Edit

What can and cannot be done

Well, so what is it capable of? Not much really. Main advantages could be:
1. AJAX like functionality (postback is done in invisible iframe)
2. Multi-FileUpload. The files are uploaded step by step.
3. If you reach the the file size limit (implicit size is 4MB) normally you get that error from the server, but with this control you can inform the user more politelly.

What can not be done: After you upload the file the postback is done to the client in an Iframe, so you can't update any of your other fields on the page. But after all files has been uploaded you can make a callback to the server if you set MakeCallback="true" and catch the UploadFinished event.

Edit

ASPX Markup





Edit

Usage

Control can be added dynamically on the page just like any other control and you can have more than one control on the page if you like.
Attributes
UploadOnce - Set to true if you want to upload files only once and then the control becomes disabled
MaxFiles - how many files do you want to upload at one moment
MakeCallback - Set to true if you wish a callback after all files has been uploaded to the server.
ImgLoadingSrc - if you want to show image while uploading the file.
Also you can set all texts through attributes. Just check the code for all of them. They all start with Text. Like TextHeader, TextUploaded etc.
Events
FileUploaded - file has been uploaded. If you are uploading three files, then this will event will fire three times.
UploadFinished - after all files has been uploaded, you'll get this event. Also if you want to modify any controls in your page. Do it in this event not in FileUploaded

The project was built in VS 2008, .NET 3.5, just link your gaia libraries and should be ready to go.

Edit

Where is the progress bar ?

Well the only possibility I know of (if you don't want to use flash etc.) is to write HttpModule/HttpHandler. The code is too complex to write it in two days, but if you like it I found two freeware controls that support it:
NeatUpload
Darren's fileupload control


Feel free to modify the code. But remember that usage of this control is in your responsibility, so test it first before releasing to production environment.

Pavol.



ScrewTurn Wiki version 2.0.33. Some of the icons created by FamFamFam.