Ajax Multiple FileUpload for ASP.NET
Every Web 2.0 site deserves a good Ajax FileUpload control. That means something that doesn't post back and leave you thinking if the upload was successful or not. For a fully functional website it's common to upload files for processing or usage. Examples include photos, data, text files, documents, etc. In this post we're going to cover one of the latest contributions to the Gaia Ajax control family. The FileUpload Control :-)
The control was created by Pavol and resides in the CommunityExtensions project. The original work can be found here. It has now been made available in the library and is to be shipped with Gaia Ajax 3.5 codename "Themis". Let's go ahead and have a look at how you can apply ajaxified FileUpload capabilities to your application. The control allows a user to select multiple files to upload and one file will be uploaded at the time.
Code Usage
You can configure it for a maximum allowed number of files. In ASPX markup the FileUpload control looks like this. Not all properties are set, but you can see the most important ones below. We've set the MaxFiles to 5, meaning no more than 5 files can be uploaded at any given time.
1: <gaia:FileUpload
2: ID="fileUpload"
3: runat="server"
4: TextHeader="Files to Upload. (Max 4MB per file)"
5: MaxFiles="5"
6: OnFileUploaded="fileUpload_onFileUploaded"
7: UploadOnce="false"
8: ImgLoadingSrc="Media/file-loader.gif"
9: CssClass="fup" >
10: gaia:FileUpload>
1: protected void fileUpload_onFileUploaded(object sender, FileUpload.FileUploadEventArgs e)
2: {
3: string fileName = Server.MapPath("~/Images/") + e.PostedFile.FileName;
4: e.PostedFile.SaveAs(fileName);
5: e.InfoText = "File was successfully uploaded";
6: }
Having a FileUpload citizen in the Control suite is a great addition and we've already gotten extensive feedback on the value-add this provides for the library. In the samples that ships with Gaia we've added a quick demo in the DynamicImage sample to demonstrate further use of the FileUpload control.Here you can upload files that will be made available for use in the DynamicImage sample. Ps! This feature is only enabled when the samples are run from localhost to avoid uploading too many images to our servers.
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
Hopefully this will not be the last contribution to the CommunityExtensions project. All members of the Gaia Community have permissions to upload controls/extensions to the WIKI. A couple of days ago another community member, Nathan posted the InPlaceCollectionEditor.
Gaia Ajax offers an extensible solution for building advanced controls, either in pure C# or with a thin javascript file to embed advanced functionality. This offers you unlimited opportunities when using Gaia Ajax as the main toolkit for building the presentation layer of your web applications.
