Krystalware

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.

Skinned 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 control is fully templatable, giving detailed control over how it looks and acts. This example demonstrates two simple templates – templating the file list and using an image for the progress bar. You can manipulate any other part of the control by modifying the default template HTML and/or adding CSS.

Templating the file list

The file list item is controlled by the <FileTemplate> template. In this example, we do a couple things to spiff up the layout from the standard layout:

Create a border around each item

<div style="border:solid 1px #ccc;margin:1em;padding:1em">

Float the remove link to the top right and add an image

<kw:FileListRemoveLink runat="server" Title="Remove" style="float:right;margin-top:-.5em;margin-right:-.5em">
    <img width="20" height="20" style="vertical-align:middle" src="<%=ResolveUrl("~/Common/delete.png") %>" /> remove
</kw:FileListRemoveLink>

Add a file extension icon

<img id="extImage" width="32" height="32" style="vertical-align:middle;" />

This last feature, a file extension icon, takes a little more to hook up than just the HTML. The HTML provides a placeholder for the image. We then hook up an event that fires after each file is added:

<kw:SlickUpload ... OnClientFileAdded="fileAdded" ... />

The event handler gets a reference to the img tag and sets the image source URL based on the file extension:

function fileAdded(file)
{
    var extImage = file.getElementById("extImage");
    
    extImage.src = "FileIconCS.ashx?ext=" + file.extension;
}

This sets the source to a simple handler which pulls the proper icon. For this example, there is a folder of icons located at ~/Common/icons. The handler selects the proper icon based on file extension and returns it to the client:

public void ProcessRequest(HttpContext context)
{
    string ext = context.Request.QueryString["ext"] ?? "xxx";

    string fileName = context.Server.MapPath("~/Common/icons/" + ext + ".gif");

    if (!File.Exists(fileName))
        fileName = context.Server.MapPath("~/Common/icons/xxx.gif");

    context.Response.ContentType = "image/gif";
    context.Response.TransmitFile(fileName);
}

Progress bar image

To add a progress bar image is as simple as adding a background image to the <kw:UploadProgressBarElement>. This element renders into a div with a width based on the progress complete. To specify a progress image, simply add CSS that references your desired image:

<kw:UploadProgressBarElement ... style="background-image: url('xp.gif')..." ... />