Krystalware
SlickUpload logo

Quick Start

The SlickUpload quick start demonstrates how to install SlickUpload in a new or existing application, add upload support to a page, and display a list of the files that were uploaded.

You can find the completed source code for this example in the Quickstart (.NET 2.0+) or Quickstart-1.1 (.NET 1.1) folder in the SlickUpload package.

Downloading SlickUpload

If you haven't already, download SlickUpload.

Installing SlickUpload

First, install SlickUpload in your application as outlined in the Installing SlickUpload topic.

Adding a SlickUpload control

In the designer, drag a SlickUpload control from the toolbox onto your page:

The control adds default templates for file selection, file display, and progress display. You can fully customize any of these, but for now leave them with the defaults.

Submitting the upload

To submit the upload, you'll need a submission button. This can be any ASP.NET element that causes a postback or form submission. In this case, we'll use a simple button:

  1. From the HTML toolbox section, drag a Horizontal Rule onto your page below the SlickUpload control.
  2. From the Standard toolbox section, drag a Button below the horizontal rule.
  3. Set its Text property to "Upload".

Displaying the upload results

  1. Add a couple of lines of empty space after the Upload button.
  2. From the Standard toolbox section, drag a Label onto your page after the empty space.
  3. Clear its Text property and set its ID property to "uploadResult".
  4. From the Data toolbox section, drag a Repeater onto your page after the empty space.
  5. Set its ID property to "uploadFileList".
  6. Set its EnableViewState property to "false".
  7. Switch to source view and copy the following templates in between the <asp:Repeater> begin and end tags.
<FooterTemplate></ul></FooterTemplate>
<ItemTemplate><li><%# DataBinder.Eval(Container.DataItem, "ClientName")%></li></ItemTemplate>
<HeaderTemplate><ul></HeaderTemplate>

Handling the upload

To handle the upload and display the results in the upload results box, add some handler code for the UploadComplete event.

  1. Double-click the SlickUpload control to add and go to an event handler for the UploadComplete event.
  2. Add the following namespace imports at the top of the code file:

    C#

    using Krystalware.SlickUpload;
    using Krystalware.SlickUpload.Status;

    VB.NET

    Imports Krystalware.SlickUpload
    Imports Krystalware.SlickUpload.Status
  3. Add the following code inside the UploadComplete event handler:

    C#

    uploadResult.Text = "Upload Result: " + e.Status.State;

    if (e.Status.State == UploadState.Terminated)
        uploadResult.Text += ". Reason: " + e.Status.Reason;
        
    if (e.Status.State != UploadState.Terminated)
    {
        uploadFileList.DataSource = e.UploadedFiles;
        uploadFileList.DataBind();
    }

    VB.NET

    uploadResult.Text = "Upload Result: " + e.Status.State.ToString()

    If e.Status.State = UploadState.Terminated Then
        uploadResult.Text += ". Reason: " + e.Status.Reason.ToString()
    End If

    If Not e.Status.State = UploadState.Terminated Then
        uploadFileList.DataSource = e.UploadedFiles
        uploadFileList.DataBind()
    End If

Adding a cancel button

At this point the code can handle uploads and display the files that were uploaded, but there is no way to cancel an upload in progress. To do this, add a cancel button and wire it up with some javascript:

  1. Switch to source view and add the following javascript inside the <head> tag on your page:
    <script type="text/javascript">
    function cancelUpload()
    {
        kw.get("<%=SlickUpload1.ClientID %>").cancel();
    }    
    </script>
    This code gets a reference to the SlickUpload control on the page (modify the SlickUpload1 to refer to the ID if you have changed it), and calls the cancel method to cancel the upload.
  2. From the Standard toolbox section, drag a Button onto your page after the Upload button.
  3. Set its ID property to "cancelButton".
  4. Set its Text property to "Cancel".
  5. Set its OnClientClick property to "cancelUpload();return false;". This will call the cancel upload function and then return false to cancel ASP.NET's automatic page postback and allow the cancellation to execute.
  6. Select the SlickUpload control and set its ShowDuringUploadElements property to "cancelButton". This will show the cancel button only during the upload.
  7. Switch to source view and add the following style attribute inside the <asp:Button> tag. This will hide the cancel button until the upload starts.
style="display:none"

Testing

You now have a fully functioning application that can accept file uploads. The running version should look something like this:

Selecting files



Uploading files



Displaying uploaded files