ProgressDisplay Control
NOTE:
The ProgressDisplay control is intended for advanced developers that want to create their own upload interface from scratch.
The UploadManager control is recommended for typical scenarios. The UploadManager control
composites the ProgressDisplay together with an iframe file selection area for a end-to-end solution with a rich progress
display and error handling.
The ProgressDisplay control encapsulates a progress display using AJAX, so your users can see progress feedback during an upload.
Using the ProgressDisplay control
The easiest way to get started is to copy the ProgressDisplay 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 ProgressDisplay 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
For upload selection, just use the built in file elements on the same page as the control. 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.
Testing the page
The progress display will look like this during an upload:
Handling the upload
To get the upload status and a list of files after an upload, call the
HttpUploadModule.GetUploadStatus method from your code-behind.
Related topics
|