Our objective is to realize a professional GUI for uploading files, and this is achieved by combining ImageList and MultiUpload. Our environment is ASP.NET 2.0 on Windows and IIS, and both our ImageList and MultiUpload controls use ASP.NET AJAX Extensions 1.0, which you can download and install from here.

Background

This article refers to the open-source controls of the “Memba Velodoc XP Edition”, which you can download from here (this page provides links to Codeplex, Google code, and Sourceforge.NET) and which are distributed under the GPL license. These controls include an ImageList and a MultiUpload controls which we use in this article. You can experiment these controls live at this link.

Using the code

In Visual Studio 2005, create a new ASP.NET AJAX-Enabled Web Site, and add a reference to Memba.WebControls.XP.dll which contains the ImageList and MultiUpload2 server controls. Memba.WebControls.XP.dll is part of the Memba Velodoc XP Edition. The source code is available at the download location cited above.

Open the Default.aspx page, and add both the ImageList and MultiUpload2 server controls, either by dragging and dropping the controls after adding them to the toolbox, or simply by adding the following code between the existing <form> tags:

The important thing to note here is that the browser clears HTML file input controls each time it loads the page, especially after a postback. There is no way to set the value of a file input control, otherwise web servers could obtain user files without their consent. There is no workaround to this security restriction. Our ImageList has been designed to maintain its state, so it needs to be cleared to be in sync with the MultiUpload control.

We could run the page at this stage and upload files, but we need some JavaScript client code to display, in the ImageList, the files which have been selected in the MultiUpload control. Add the following script just before the </body> closing tag of your page:

pageLoad is called by the framework when the page DOM and scripts are loaded and initialized. This is a good place to get references to controls and add event handlers.

pageUnload is called by the framework when the page unloads. It is recommended to clear handlers at this stage.

The script above implements event handlers for the Browse event of the MultiUpload control, for the Remove event of the ImageList control, and for the Click event of the Clear button. The Browse event handler adds the selected file to the ImageList. ImageList items have a property called tag, which is set to the identifier of the file input in the MultiUpload control. The Remove event handler reads the tag of the item removed from the ImageList to remove the corresponding file input from the MultiUpload control. The Clear event handler simply clears both the ImageList and the MultiUpload controls.

Press F5 to run the project, and click the MultiUpload control labeled “Choose file...” to add a file to the list. Move your mouse over the corresponding item in the ImageList to display the remove icon which is a red cross. Click the remove icon to remove the corresponding file from the upload selection. Add more files. Test the Clear button. Add files, and submit to upload the files.

Points of interest

This MultiUpload control hides the complexity of dynamically creating file input HTML controls, and removes any constraint regarding the presentation of the files which have been selected for upload. The combination with the ImageList control is a great presentation option described here, which is a huge improvement over old, ugly file input controls. For more advanced developers, the source code for the ImageList and MultiUpload controls is available at Codeplex, Google code, and Sourceforge.NET, and is commented in great details.

My work at Memba

I am currently working on two projects:- VELODOC, a file transfer online service and software product which you can try at http://www.velodoc.net;- CITADOC, a knowledge base/wiki online service and software product which can be managed and edited in Microsoft Office and which will be released in the second half of 2008.

The XP edition of these projects is the open source core released under the GPL license.

Comments and Discussions

Hello, first I would like to thank you! When I first operation of the code, select the file, Trace: Air Show characters, can not upload, of course, file picture of the list is empty at the same time a JS error (as follows: 2140 line 17) Refresh your browser the same JS error, but normally upload. My operating system is 2003, the browser is IE7.0 Please advice, thank you.