SlickUpload Demos

» Overview Demonstrates the basics of SlickUpload. Selecting files, maximum file limit, file type validation, require files to be selected.

» FileNameGenerator How to control and generate server filenames for files as they are uploaded.

» Additional Fields How to add additional input fields for each selected file.

» Custom Progress Display custom progress information during a postprocessing step after files are uploaded.

» Localization How to localize the SlickUpload control.

» Modal Progress Show the progress display in a modal.

» Skinned Skin the file list and progress display.

» Upload to Amazon S3 How to upload to Amazon's Simple Storage Service with progress display.

» Upload to SQL Server Upload directly to a SQL Server, streaming with no memory usage.

Clustered» Use a StatusManager configuration to allow uploads with progress to a cluster/web farm/web garden.

» Custom UploadStreamProvider How to develop your own upload stream provider – this example shows how to zip files as they are uploaded.

» SimpleThe bare metal SlickUpload control, drag-dropped onto the page.

Modal Progress Sample

Select files to upload:

NOTE: the maximum allowed request size for this sample is 1000 MB. If you attempt to upload files larger than this, you will recieve a oversized upload error which SlickUpload will handle gracefully. This is controlled by the maxRequestLength attribute of the httpRuntime key in the web.config file.

Description

The SlickUpload progress display is templatable and customizable, meaning it can easily be shown in an AJAX style modal if desired. This sample shows a simple modal, but any modal library could be used, including something like jQuery thickbox or the AjaxControlToolkit ModalPopupExtender.

The simple modal shown here consists of a mask layer and modal container, styled to provide the modal look and feel:

<div id="modal-mask" style="position:absolute;left:0;top:0;right:0;bottom:0;background-color:#000;opacity:.5;filter: alpha(opacity=50);-moz-opacity: .5;"></div> <div id="modal" style="position:absolute;border:solid 1px #888;width:50%;background-color:#fff;padding:1em">

To position the modal, we add a handler to the control that fires when the upload has been started:

<kw:SlickUpload ... OnClientUploadStarted="showProgressModal" ... />

In this example, the code in the showProgressModal just positions the simple modal. If you were using a different modal library, this would be where you could invoke the modal dialog to wrap the progress div.