Infragistics(R) NetAdvantage(R) ASP.NET
WebUpload Overview
E-mail your feedback on this topic.

Glossary Item Box

About WebUpload

The NetAdvantage™ for ASP.NET upload control, or WebUpload, is a control that allows you to upload any types of files, sending them from the client browser to the server. The size of the uploaded files can be restricted only by server limitations, so you can upload large files with size more than default 10MB.

The upload control is able to handle single uploads (default) or simultaneous multiple file upload operations. To facilitate multiple uploads, the control uses an HTML iframe element to upload files in the background. When the file is uploaded then iframe is removed as a HTML DOM element.There are a number of UI elements that support the upload control as depicted in Figure 1. Visual elements include:

During multiple uploads visual elements include:

Architecture

Use of the WebUpload control consists of two required parts - client-side jQuery widget and server-side logic which is responsible for handling and processing each upload request. The server is also responsible for processing the upload itself. The example in this document implements server code using ASP.NET Framework, but the WebUpload control is independent of server technology.

The upload control exposes a rich jQuery API, so that the controls can be easily configured on the client-side. Also, developers using the Microsoft® ASP.NET MVC framework can leverage the upload control’s server-ide wrapper to configure the control with their .NET™ language of choice.

The WebUpload control may be extensively styled giving you an opportunity to provide a completely different look and feel for the control as opposed to the default style. Styling options include using your own styles as well as styles from jQuery UI’s ThemeRoller.

Figure 1: The WebUpload control as presented to the user

Features

Adding WebUpload to a Web Page

This example demonstrates how to include and implement the client-side logic of the control and how to configure the server-side so that it receives and saves the uploaded files.

Note: For more information about the server-side architecture and implementation is available in: HTTP Handler and Module

This sample demonstrates a basic upload scenario in Single Mode, which will start the upload automatically.

Figure 2

Single WebUpload Sample

  1. To get started, include the required and localized resources for your application. 
  2. On your ASPX page, reference the required JavaScript files, CSS files.

    In ASPX:


    <link type="text/css" href="/Styles/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link type="text/css" href="/Styles/css/structure/infragistics.css" rel="stylesheet" /> <script type="text/javascript" src="/Scripts/jquery.min.js"></script> <script type="text/javascript" src="/Scripts/jquery-ui.min.js"></script> <script type="text/javascript" src="/Scripts/js/infragistics.js"></script>
  3. Once the above setup is complete, begin to set options including ID, autostartupload and progressUrl. The last property defines the URL of the HTTP handler that returns file status progress and file size information and handles cancel upload command. That’s all you need on the client-side widget to connect with server-side and get the upload control to work. The remaining options have their default values. For example for the upload mode is single.

    In ASPX:

    <igjq:WebUpload ID="WebUpload1" runat="server" 
        AutoStartUpload="true" ProgressUrl="/WebUploadStatusHandler.ashx">
    </igjq:WebUpload >
    
    
    
  4. Next you must configure the server-side HTTP Handler and Module.

Configuring the HTTP Handler and Module

The required HTTP handler and Module are part of the Infragistics.Web.UI dll as well as the ASP.NET upload wrapper. Follow the steps below to register them in the Web.config file.

  1. To get started, first you must create folder with write permissions, where the uploaded files will be saved. Then you have to register that folder in the Web.config (see the code below), so that the WebUpload knows where to save the files. For the current example the folder is called Uploads.
  2. You can restrict the size of the uploaded files by setting the maxFileSizeLimit setting. In this sample this size is about 100 MB.

    In web.config:

    <appSettings>
        <add key="fileUploadPath" value="~/Uploads" />
        <add key="maxFileSizeLimit" value="100000000" />
    </appSettings>
    
    
    Note: The value of maxFileSizeLimit is in bytes.
  3. Then you need to register the modules and handlers. Depending on your server you should configure Web.config file.

    For IIS6(and Development Environment)

    In web.config:

    <system.web>
        <httpHandlers>
             <add verb="GET" type="Infragistics.Web.UI.EditorControls.UploadStatusHandler" 
                             path="IGUploadStatusHandler.ashx" />
        </httpHandlers>
        <httpModules>
            <add name="IGUploadModule" type="Infragistics.Web.UI.EditorControls.UploadModule" />
        </httpModules>
    </system.web>
    
    

    For IIS7

    In web.config:

    <system.webServer>
        <modules runAllManagedModulesForAllRequests="true">
            <add name="IGUploadModule" type="Infragistics.Web.UI.EditorControls.UploadModule" 
                                       preCondition="managedHandler" />
        </modules>
        <handlers>
            <add name="IGUploadStatusHandler" path="IGUploadStatusHandler.ashx" verb="*"
                 type="Infragistics.Web.UI.EditorControls.UploadStatusHandler" preCondition="integratedMode" />
       </handlers>
    </system.webServer>
    
    
  4. Run the web page and you will get the basic WebUpload control. Then you can select a file from the file picker window that your browser displays and monitor the progress information that WebUpload exposes as seen in Figure 2.
    Note: If you are still not able to run the upload control, please follow this link to explore possible errors WebUpload Client-side Events Samples. The client-side events topic explains how to attach to a client-side event onError and investigate the problem.

Related Links

Single WebUpload Sample

WebUpload Client-side Events Samples

HTTP Handler and Module

Using client-side events