UploadManager Control
The UploadManager control is the primary SlickUpload client interface. It encapsulates a file selection area and progress display,
giving you a simple one-step method of adding powerful file uploading to your application. When dropped on a page,
the UploadManager control handles the submit event for the page, so there is no special wireup code required.
The UploadManager control wraps an iframe for file selection, so that all errors can be handled gracefully. By default with ASP.NET,
when an oversized upload occurs, ASP.NET receives the entire upload before generating an error. This means that ASP.NET is
using processor cycles and memory handling what may be a Denial of Service (DOS) attack. SlickUpload's iframe architecture
allows SlickUpload to immediately end oversized upload requests while providing useful error messages to users.
When the upload is submitted, the file selection iframe is hidden and the progress display shown.
Using the UploadManager control
The easiest way to get started is to copy the UploadManager sample from the SlickUpload package. This sample contains
a fully functional implementation, with a rich dynamic file selection area.
If you want to start from scratch instead, follow the instructions below.
Adding the control
Once you've installed SlickUpload, you can add the UploadManager control to
your page by dragging it from the toolbox. You'll get a control with a default template that looks like this:
Controlling the upload
Add a button to the page to submit the upload. There is no special wiring needed – any submit button will work. If
you want the submit button to disappear during the upload process, set its class attribute to "suSubmitButton". This is a marker
class that SlickUpload uses to determine which elements to hide during the upload process.
If you want to provide a mechanism for cancelling the upload once in progress, add a link or button that calls the
SlickUpload_CancelUpload() javascript function to cancel the upload. Set the cancel element's display style to none so
it is initially invisible – SlickUpload will show it when the upload is in progress. Set its class attribute to "suCancelButton",
which is a marker class that SlickUpload uses to determine which elements to show during the the upload process.
Creating the upload selection area
To create the upload selection area for the UploadManager control, add a file named UploadHandler.aspx in the same folder.
Prepare it for file upload by doing the following steps:
- Set the enctype="multipart/form-data" attribute of the form element. This allows the page to handle uploads.
- Add one or more <input type="file" /> elements on the page to receive the uploads.
The UploadManager sample contains an UploadHandler.aspx page with javascript logic to allow dynamic multiple file selection,
so you may want to use that as a starting point for this page.
Testing the page
At this point, the page should be functional for uploading. The selection mode will look something like this:
The progress mode will look like this:
Handling the upload
To add server side logic to handle an upload, add an event handler for the UploadManager.UploadComplete event.
Validating that at least one file has been selected
You can require that a file be selected in the UploadManager control before the upload can continue by dropping an UploadManagerRequiredFileValidator
on your page and setting its ControlToValidate property to the UploadManager control. This allows you to use the built-in ASP.NET validation framework
to validate whether a file has been selected.
Related topics
|