ComponentArt Web.UI 2008.1 includes one new addition to the library of controls: Upload. ComponentArt Upload is a file upload control with all the high-end AJAX and client-centric functionality one should expect from a Web.UI control.

The control comes with a custom server-side HTTP module for optimally processing the file upload, and an HTTP handler which provides upload progress information and otherwise enables communication between the module and the control on the client.

On the client, progress feedback is provided using client templates, in which all the metrics related to the upload (percentage, elapsed time, file sizes, speed, filenames, etc.) can be accessed and displayed in any layout the developer defines. File input fields (there can be more than one) are also formatted and styled using client templates, again with unlimited visual potential.

To configure an Upload control, the HTTP module and the handler must be added to the application’s web.config file:

<httpModules>
 <add type="ComponentArt.Web.UI.UploadModule, ComponentArt.Web.UI"
  name="ComponentArtUploadModule"/>
</httpModules>


<httpHandlers>
 <add verb="*"
  type="ComponentArt.Web.UI.UploadProgressHandler, ComponentArt.Web.UI"
  path="ComponentArtUploadProgress.axd" />
</httpHandlers>

Once this back-end infrastructure is in place, an Upload control can be placed on a page of the application:

<ComponentArt:Upload runat=”server” ID=”Upload1” TempFileFolder=”c:\temp\uploads” ... />

The Upload control writes files to disk as they come in, to prevent the waste of memory on the server, so TempFileFolder must be set on the control, to the absolute path of a folder where uploads are to be stored as they happen.

When an upload completes, the file(s) can be handled via the control’s Uploaded event, or by setting the DestinationFolder property, which will cause successful uploads to automatically be moved to the specified folder. In the latter case, automatic validation can also be performed before moving, using the AllowedFileExtensions and AllowedMimeTypes properties.

Styling of the control is done almost exclusively with client templates. The input area, as well as the progress feedback, can both be client-templated. In the latter case, extensive information on upload progress is available to be used in the template.

The progress client template (specified using the ProgressClientTemplateId property) is rendered in a popup over the upload control by default. If the ProgressDomElementId property is set, the client template will instead be rendered into the specified DOM element, allowing external controls to be used for progress feedback, such as the ComponentArt Dialog control.

The value of the boolean AutoPostBack property determines whether a postback will occur when the upload completes. If false, a callback is performed instead, and Upload's server-side event handler (or DestinationFolder logic) is still executed right away, without the page visibly reloading.

We hope you find this new control useful. We're pretty excited about what it brings to the field and the bar it sets for rich client-side styling and formatting. Try it out and let us know what you think.

You can start by checking out the Upload samples online.