SlickUpload Quick Start Guide

2022-05-04 10:07:36

Quick Start Guide

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 folder in the SlickUpload package. Choose the solution that matches the VS.NET version and view engine technology you want to use.

This article is written with C# code samples for brevity, but VB versions of the completed code are available in the Quickstart folder of the SlickUpload package.

TIP: When you're going to copy paste the code from a code snippet below, here's the easy way: double click anywhere within the snippet box. This will select all of the code for any code snippet so you can easily copy it to the clipboard.

Create a New Project

Open VS.NET and create a new web project. This tutorial applies to VS 2005, VS 2008, and VS 2010, with .NET 2.0, .NET 3.5, or .NET 4.0. There are sections applicable to WebForms, MVC, and Razor. Select your preferred configuration and create a new project of that type.

You can also use this tutorial to add SlickUpload to an existing application.

Install SlickUpload

If you haven't already, go to the SlickUpload download page and download the latest version of SlickUpload. Once you've done that, install SlickUpload in your application as outlined in the Installing SlickUpload topic. These steps will be the same no matter what type of project you select above.

After you complete these steps, you should end up with the Krystalware.SlickUpload.dll as a reference in your application and a web.config that looks something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<?xml version="1.0" ?>
<configuration>
    <configSections>
        <section name="slickUpload" type="Krystalware.SlickUpload.Configuration.SlickUploadSection, Krystalware.SlickUpload" requirePermission="false" />
    </configSections>
    <slickUpload>
        <uploadProfiles>
            <add name="quickStart">
                <uploadStreamProvider type="File" location="~/Files" existingAction="Overwrite"/>
            </add>
        </uploadProfiles>
    </slickUpload>
    <system.web>
        <compilation debug="true">
        </compilation>
        <!--
                        The <authentication> section enables configuration
                        of the security authentication mode used by
                        ASP.NET to identify an incoming user.
                -->
        <authentication mode="Windows"/>
        <!--
                        The <customErrors> section enables configuration
                        of what to do if/when an unhandled error occurs
                        during the execution of a request. Specifically,
                        it enables developers to configure html error pages
                        to be displayed in place of a error stack trace.
 
                <customErrors mode="RemoteOnly" defaultRedirect="GenericErrorPage.htm">
                        <error statusCode="403" redirect="NoAccess.htm" />
                        <error statusCode="404" redirect="FileNotFound.htm" />
                </customErrors>
                -->
        <httpModules>
            <add name="SlickUploadModule" type="Krystalware.SlickUpload.Web.SlickUploadModule, Krystalware.SlickUpload" />
        </httpModules>
    </system.web>
     
    <!--
        The system.webServer section is required for running under IIS 7 integrated mode.
        It is not necessary for previous versions of IIS or the VS.NET WebDev server.
    -->
    <system.webServer>
        <validation validateIntegratedModeConfiguration="false" />
        <modules runAllManagedModulesForAllRequests="true">
            <add name="SlickUploadModule" type="Krystalware.SlickUpload.Web.SlickUploadModule, Krystalware.SlickUpload" preCondition="integratedMode" />
        </modules>
    </system.webServer>   
 
    <!-- Enable large requests to SlickUpload's handler -->
    <location path="SlickUpload.axd">
        <system.webServer>
            <security>
                <requestFiltering>
                    <requestLimits maxAllowedContentLength="2072576000"/>
                </requestFiltering>
            </security>
        </system.webServer>
    </location>
</configuration>

Select View Technology

The rest of the tutorial is specific to the type of project you created above. If you created a normal ASP.NET application, or don't know the other types, use the WebForms tutorial. The following tutorials are available:

ASP.NET WebForms Quick Start

This section will guide you through adding the SlickUpload control to your ASP.NET WebForms application and handling uploads from it.

Add the SlickUpload control to your page

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

    SlickUpload Quick Start Guide

    As you drag-drop the control, it will automatically add default templates for file selection, file display, and progress display. You can fully customize any of these templates, as well as completely restyling the entire control. For now leave them with the defaults.

  2. To set up a very basic theme for the control, add the following css to your <head> block:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <style type="text/css">
        /* hide initially  */
        .su-fileselector, .su-folderselector, .su-filelisttemplate, .su-uploadprogressdisplay
        {
            display: none;
            zoom:1;
        }
         
        /* fileselector cursor, link color */
        .su-fileselector, .su-fileselector *, .su-folderselector, .su-folderselector *
        {
            color:blue;
            cursor:pointer;
        }
     
        /* hover links */
        a
        {
            text-decoration:none
        }
         
        a:hover, .su-hover a
        {
            text-decoration:underline;
        }
    </style>

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 ID property to "uploadButton".
  4. Set its Text property to "Upload".

SlickUpload Quick Start Guide

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:
1
2
3
<HeaderTemplate><ul></HeaderTemplate>
<ItemTemplate><li><%# DataBinder.Eval(Container.DataItem, "ClientName")%></li></ItemTemplate>
<FooterTemplate></ul></FooterTemplate>

SlickUpload Quick Start Guide

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:
    1
    using Krystalware.SlickUpload;
  3. Add the following code inside the UploadComplete event handler:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    uploadResult.Text = "Upload Result: " + e.UploadSession.State.ToString();
     
    if (e.UploadSession.State == UploadState.Error)
        uploadResult.Text += ". Error: " + e.UploadSession.ErrorSummary;
     
    if (e.UploadSession.State == UploadState.Complete)
    {
        uploadFileList.DataSource = e.UploadSession.UploadedFiles;
        uploadFileList.DataBind();
    }

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:
    1
    2
    3
    4
    5
    6
    <script type="text/javascript">
        function cancelUpload()
        {
            kw("<%=SlickUpload1.ClientID %>").cancel();
        }    
    </script>

    This code gets a reference to the SlickUpload control on the page (modify the SlickUpload1 reference 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.

Showing and hiding buttons during upload

The sample is now fully functional, but both buttons are always visible. Instead, we want the Upload button to be hidden during uploads, and the Cancel button to be hidden until an upload is started and then displayed. To do this, we handle a couple of SlickUpload events.

  1. Add the following javascript to the script block we added in the last step:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function onSessionStarted(data)
    {
        document.getElementById("<%=uploadButton.ClientID %>").style.display = "none";
        document.getElementById("<%=cancelButton.ClientID %>").style.display = "block";
    }
             
    function onBeforeSessionEnd(data)
    {
        document.getElementById("<%=cancelButton.ClientID %>").style.display = "none";
    }
  2. Add the following attributes to the SlickUpload control. This will hook up the event handlers above. onSessionStarted will be called as the upload starts, and onBeforeSessionEnd will be called once the session is complete and the completion handler is being executed.
    1
    OnClientUploadSessionStarted="onSessionStarted" OnClientBeforeSessionEnd="onBeforeSessionEnd"
  3. Switch to source view and add the following style attribute inside cancel button. This will hide the cancel button until the upload starts.
    1
    style="display:none"

This concludes the ASP.NET WebForms specific instructions. To view screenshots of how the Quick Start sample should look in action, go to the Testing section.

ASP.NET MVC WebForms Quick Start

This section will guide you through adding the SlickUpload control to your ASP.NET MVC application using the WebForms view engine and handling uploads from it.

Add the SlickUpload control to your page

  1. Open the Index view for the Home controller. If you don't have this controller or view, go ahead and add a Home controller with an Index view.
  2. Set the page model type to UploadSession by setting Inherits="System.Web.Mvc.ViewPage<Krystalware.SlickUpload.UploadSession>" in the Page directive.
  3. Add the following namespace imports:
    1
    2
    3
    <%@ Import Namespace="Krystalware.SlickUpload" %>
    <%@ Import Namespace="Krystalware.SlickUpload.Web" %>
    <%@ Import Namespace="Krystalware.SlickUpload.Web.Mvc" %>
  4. Replace everything inside the MainContent ContentPlaceHolder with the following:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    <% using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "uploadForm", enctype = "multipart/form-data" })) { %>
        <% Html.KrystalwareWebForms(new SlickUpload() {
            Id = "slickUpload",
            FileSelectorHtmlAttributes = new { Style = "float:left;padding-right:1em" },
            FileListHtmlAttributes = new { Style = "clear:both" },
            UploadProgressDisplayHtmlAttributes = new { Style = "clear:both" },
            HtmlAttributes = new { Style = "overflow: hidden; zoom: 1" },
            UploadProfile = "quickStart",
            ShowDropZoneOnDocumentDragOver = true,
            AutoUploadOnSubmit = true,
            UploadFormId = "uploadForm",
            SelectorTemplate = new Template(() => { %><a href="javascript:;">Add files</a><% }),
            SelectorFolderTemplate = new Template(() => { %><a href="javascript:;">Add folder</a><% }),
            FileItemTemplate = new Template(() => { %>
                <% Html.KrystalwareWebForms(new FileListElement() { Element = FileListElementType.FileName }); %>
                &ndash;
                <% Html.KrystalwareWebForms(new FileListElement() { Element = FileListElementType.FileSize, Template = new Template("(calculating)") }); %>
                <% Html.KrystalwareWebForms(new FileListRemoveCommand() { HtmlAttributes = new { href = "javascript:;" }, Template = new Template("[x]") }); %>
                <% Html.KrystalwareWebForms(new FileListElement() { Element = FileListElementType.ValidationMessage, HtmlAttributes = new { style = "color:#f00" } }); %>
            <% }),
            ProgressTemplate = new Template(() => { %>
                <div>
                    Uploading
                    <% Html.KrystalwareWebForms(new UploadProgressElement() { Element = UploadProgressElementType.FileCount }); %>
                    file(s),
                    <% Html.KrystalwareWebForms(new UploadProgressElement() { Element = UploadProgressElementType.ContentLengthText, Template = new Template("(calculating)") }); %>.
                </div>
                <div>
                    Currently uploading:
                    <% Html.KrystalwareWebForms(new UploadProgressElement() { Element = UploadProgressElementType.CurrentFileName }); %>
                    file
                    <% Html.KrystalwareWebForms(new UploadProgressElement() { Element = UploadProgressElementType.CurrentFileIndex }); %>
                    of
                    <% Html.KrystalwareWebForms(new UploadProgressElement() { Element = UploadProgressElementType.FileCount }); %>.
                </div>
                <div>
                    Speed:
                    <% Html.KrystalwareWebForms(new UploadProgressElement() { Element = UploadProgressElementType.SpeedText, Template = new Template("(calculating)") }); %>
                </div>
                <div>
                    <% Html.KrystalwareWebForms(new UploadProgressElement() { Element = UploadProgressElementType.TimeRemainingText, Template = new Template("(calculating)") }); %>
                </div>
                <div style="border: 1px solid #008800; height: 1.5em; position: relative;">
                    <% Html.KrystalwareWebForms(new UploadProgressBar() { HtmlAttributes = new { style = "background-color:#00ee00;width:0; height:1.5em;" } }); %>
                    <div style="text-align: center; position: absolute; top: .15em; width: 100%;">
                        <% Html.KrystalwareWebForms(new UploadProgressElement() { Element = UploadProgressElementType.PercentCompleteText, Template = new Template("(calculating)") }); %>
                    </div>
                </div>
            <% })
        }); %>
        <% Html.KrystalwareWebForms(new KrystalwareScriptRenderer()); %>
    <% } %>

    This defines a container form, renders the SlickUpload control, and inserts the SlickUpload javascript on the page.

    The code above is a default set of templates for file selection, file display, and progress display. You can fully customize any of these templates, as well as completely restyling the entire control. For now leave them with the defaults.

  5. To set up a very basic theme for the control, add the following css to your <head> block:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <style type="text/css">
        /* hide initially  */
        .su-fileselector, .su-folderselector, .su-filelisttemplate, .su-uploadprogressdisplay
        {
            display: none;
            zoom:1;
        }
         
        /* fileselector cursor, link color */
        .su-fileselector, .su-fileselector *, .su-folderselector, .su-folderselector *
        {
            color:blue;
            cursor:pointer;
        }
     
        /* hover links */
        a
        {
            text-decoration:none
        }
         
        a:hover, .su-hover a
        {
            text-decoration:underline;
        }
    </style>

Submitting the upload

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

  1. Add the following code just before the end of the form, and just after the KrystalwareScriptRenderer statement:
    1
    2
    3
    4
    <hr />
    <p>
        <input type="submit" value="Upload" id="uploadButton" />
    </p>

Displaying the upload results

  1. Add the following code just before the end of the form, and just after the upload button:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <% if (Model != null) { %>
        Upload Result: <%:Model.State.ToString() %>
        <% if (Model.State == UploadState.Error) { %>
            <br />
            <br />
            Message: <%:Model.ErrorSummary %>
        <% } %>
        <ul>
            <% foreach (UploadedFile file in Model.UploadedFiles) { %>
                <li>
                    <%:file.ClientName %>
                </li>
            <% } %>
        </ul>
    <% } %>

Handling the upload

To handle the upload and display the results in the upload results box, we'll need to tweak the code in the HomeController.

  1. Open the HomeController.
  2. Add the following namespace imports at the top of the code file:
    1
    using Krystalware.SlickUpload;
  3. Replace the Index action method with the following:
    1
    2
    3
    4
    public ActionResult Index(UploadSession session)
    {
        return View(session);
    }

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. Add the following javascript at the top of the page (or inside the <head> tag) on your page:
    1
    2
    3
    4
    5
    6
    <script type="text/javascript">
        function cancelUpload()
        {
            kw("slickUpload").cancel();
        }    
    </script>

    This code gets a reference to the SlickUpload control on the page (modify the slickUpload reference to refer to the ID if you have changed it) and calls the cancel method to cancel the upload.

  2. Add the following code just after the upload button:
    1
    <input type="button" value="Cancel" id="cancelButton" onclick="cancelUpload()" />

Showing and hiding buttons during upload

The sample is now fully functional, but both buttons are always visible. Instead, we want the Upload button to be hidden during uploads, and the Cancel button to be hidden until an upload is started and then displayed. To do this, we handle a couple of SlickUpload events.

  1. Add the following javascript to the script block we added in the last step:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function onSessionStarted(data)
    {
        document.getElementById("uploadButton").style.display = "none";
        document.getElementById("cancelButton").style.display = "block";
    }
             
    function onBeforeSessionEnd(data)
    {
        document.getElementById("cancelButton").style.display = "none";
    }
  2. Add the following attributes to the SlickUpload control. This will hook up the event handlers above. onSessionStarted will be called as the upload starts, and onBeforeSessionEnd will be called once the session is complete and the completion handler is being executed.
    1
    2
    OnClientUploadSessionStarted="onSessionStarted",
    OnClientBeforeSessionEnd="onBeforeSessionEnd"
  3. Add the following style attribute inside the cancel button. This will hide the cancel button until the upload starts.
    1
    style="display:none"

This concludes the ASP.NET MVC WebForms specific instructions. To view screenshots of how the Quick Start sample should look in action, go to the Testing section.

ASP.NET MVC Razor Quick Start

This section will guide you through adding the SlickUpload control to your ASP.NET MVC application using the Razor view engine and handling uploads from it.

Add the SlickUpload control to your page

  1. Open the Index view for the Home controller. If you don't have this controller or view, go ahead and add a Home controller with an Index view.
  2. Set the page model type to UploadSession by setting the "@model Krystalware.SlickUpload.UploadSession directive".
  3. Add the following namespace imports:
    1
    2
    3
    @using Krystalware.SlickUpload;
    @using Krystalware.SlickUpload.Web;
    @using Krystalware.SlickUpload.Web.Mvc;
  4. Replace all of the body content on the page with the following:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "uploadForm", enctype = "multipart/form-data" }))
    {
        @Html.KrystalwareRazor(new SlickUpload()
        {
            Id = "slickUpload",
            FileSelectorHtmlAttributes = new { Style = "float:left;padding-right:1em" },
            FileListHtmlAttributes = new { Style = "clear:both" },
            UploadProgressDisplayHtmlAttributes = new { Style = "clear:both" },
            HtmlAttributes = new { Style = "overflow: hidden; zoom: 1" },
            UploadProfile = "quickStart",
            ShowDropZoneOnDocumentDragOver = true,
            AutoUploadOnSubmit = true,
            UploadFormId = "uploadForm",
            SelectorTemplate = new Template(@<text> <a href="javascript:;">Add files</a></text>),
            SelectorFolderTemplate = new Template(@<text> <a href="javascript:;">Add folder</a></text>),
            FileItemTemplate = new Template(@<text>
                @Html.KrystalwareRazor(new FileListElement() { Element = FileListElementType.FileName })
                &ndash;
                @Html.KrystalwareRazor(new FileListElement() { Element = FileListElementType.FileSize, Template = new Template("(calculating)") })
                @Html.KrystalwareRazor(new FileListRemoveCommand() { HtmlAttributes = new { href = "javascript:;" }, Template = new Template("[x]") })
                @Html.KrystalwareRazor(new FileListElement() { Element = FileListElementType.ValidationMessage, HtmlAttributes = new { style = "color:#f00" } })
            </text>),
            ProgressTemplate = new Template(@<text>
                <div>
                    Uploading @Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.FileCount })
                    file(s),
                    @Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.ContentLengthText, Template = new Template("(calculating)") }).
                </div>
                <div>
                    Currently uploading: @Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.CurrentFileName })
                    file @Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.CurrentFileIndex })
                    of @Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.FileCount }).
                </div>
                <div>
                    Speed: @Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.SpeedText, Template = new Template("(calculating)") })
                </div>
                <div>
                    @Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.TimeRemainingText, Template = new Template("(calculating)") })
                </div>
                <div style="border: 1px solid #008800; height: 1.5em; position: relative;">
                    @Html.KrystalwareRazor(new UploadProgressBar() { HtmlAttributes = new { style = "background-color:#00ee00;width:0; height:1.5em;" } })
                    <div style="text-align: center; position: absolute; top: .15em; width: 100%;">
                        @Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.PercentCompleteText, Template = new Template("(calculating)") })
                    </div>
                </div>
            </text>)
        })
        @Html.KrystalwareRazor(new KrystalwareScriptRenderer())
    }

    This defines a container form, renders the SlickUpload control, and inserts the SlickUpload javascript on the page.

    The code above is a default set of templates for file selection, file display, and progress display. You can fully customize any of these templates, as well as completely restyling the entire control. For now leave them with the defaults.

  5. To set up a very basic theme for the control, add the following css to your <head> block:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <style type="text/css">
        /* hide initially  */
        .su-fileselector, .su-folderselector, .su-filelisttemplate, .su-uploadprogressdisplay
        {
            display: none;
            zoom:1;
        }
         
        /* fileselector cursor, link color */
        .su-fileselector, .su-fileselector *, .su-folderselector, .su-folderselector *
        {
            color:blue;
            cursor:pointer;
        }
     
        /* hover links */
        a
        {
            text-decoration:none
        }
         
        a:hover, .su-hover a
        {
            text-decoration:underline;
        }
    </style>

Submitting the upload

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

  1. Add the following code just before the end of the form, and just after the KrystalwareScriptRenderer statement:
    1
    2
    3
    4
    <hr />
    <p>
        <input type="submit" value="Upload" id="uploadButton" />
    </p>

Displaying the upload results

  1. Add the following code just before the end of the form, and just after the upload button:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    if (Model != null)
    {                       
        <text>Upload Result: </text>@Model.State.ToString()       
        if (Model.State == UploadState.Error) {
            <br />
            <br />
            <text> Message: </text>@Model.ErrorSummary
        }
        <ul>
            @foreach (UploadedFile file in Model.UploadedFiles)
            {
                <li>
                    @file.ClientName
                </li>
            }
        </ul>
    }

Handling the upload

To handle the upload and display the results in the upload results box, we'll need to tweak the code in the HomeController.

  1. Open the HomeController.
  2. Add the following namespace imports at the top of the code file:
    1
    using Krystalware.SlickUpload;
  3. Replace the Index action method with the following:
    1
    2
    3
    4
    public ActionResult Index(UploadSession session)
    {
        return View(session);
    }

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. Add the following javascript at the top of the page (or inside the <head> tag) on your page:
    1
    2
    3
    4
    5
    6
    <script type="text/javascript">
               function cancelUpload()
               {
                   kw("slickUpload").cancel();
               }    
    </script>

    This code gets a reference to the SlickUpload control on the page (modify the slickUpload reference to refer to the ID if you have changed it) and calls the cancel method to cancel the upload.

  2. Add the following code just after the upload button:
    1
    <input type="button" value="Cancel" id="cancelButton" onclick="cancelUpload()" />

Showing and hiding buttons during upload

The sample is now fully functional, but both buttons are always visible. Instead, we want the Upload button to be hidden during uploads, and the Cancel button to be hidden until an upload is started and then displayed. To do this, we handle a couple of SlickUpload events.

  1. Add the following javascript to the script block we added in the last step:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function onSessionStarted(data)
    {
        document.getElementById("uploadButton").style.display = "none";
        document.getElementById("cancelButton").style.display = "block";
    }
             
    function onBeforeSessionEnd(data)
    {
        document.getElementById("cancelButton").style.display = "none";
    }
  2. Add the following attributes to the SlickUpload control. This will hook up the event handlers above. onSessionStarted will be called as the upload starts, and onBeforeSessionEnd will be called once the session is complete and the completion handler is being executed.
    1
    2
    OnClientUploadSessionStarted="onSessionStarted",
    OnClientBeforeSessionEnd="onBeforeSessionEnd"
  3. Add the following style attribute inside the cancel button. This will hide the cancel button until the upload starts.
    1
    style="display:none"

This concludes the ASP.NET MVC Razor specific instructions. To view screenshots of how the Quick Start sample should look in action, go to the Testing section.

Testing

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

Selecting files

Click on the add files link to start adding files. Pick a few files and they will show up in the list.

SlickUpload Quick Start Guide

Uploading files

Click the Upload button to start the upload.

SlickUpload Quick Start Guide

Displaying uploaded files

Once the upload is complete, you'll see a list of the files that have been uploaded. You can also see the files themselves in the ~/Files folder.

SlickUpload Quick Start Guide

上一篇：bzoj4569: [Scoi2016]萌萌哒（ST表+并查集）


下一篇：Maven与Ant比较