AsyncUpload - Large File Upload

Uploaded % ( ) Total
Uploaded files: % () Total files:

Uploading file:

Elapsed time:  Estimated time:  Speed:

Demo Configurator

  • Chunk size
    1 Mb
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

ASP.NET by default allows the maximum file size upload to be 4 MB. If you use a third-party ASP.NET File Upload to upload large files and you receive a notification that the upload has failed due to the maximum file size limit, then the respective component does not support large file uploads.

In order to override the maximum file size restriction, you need to modify the web.config file and enable the file upload process to handle larger files. With RadAsyncUpload you can quickly upload files over 4 MB. RadAsyncUpload helps you overcome the 4 MB file size upload limitation in ASP.NET by dividing the large files into smaller chunks and uploading them subsequently. You can control the size of the chunks and thus the number of requests to the server required to upload the file, which can improve your application's performance.

Use your browser's Developer Tools to monitor the change in the number of requests to the server, when you change the size of the chunks the AsyncUpload divides the large files into smaller chunks in order to surpass the ASP.NET limitation of 4MB.

Check out the demo to see how Telerik's ASP.NET Upload control enables you to easily upload large files in ASP.NET without modifying the value in the web.config file. Our online documentation provides more details how to upload large files with RadAsyncUpload.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="AsyncUpload.Examples.LargeFileUploads.DefaultCS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <div class="demo-container size-narrow" runat="server" id="DemoContainer1">
        <telerik:RadAsyncUpload RenderMode="Lightweight" runat="server" ID="AsyncUpload1" ChunkSize="1048576" />
        <telerik:RadProgressArea RenderMode="Lightweight" runat="server" ID="RadProgressArea1" />
    </div>


    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="DemoContainer1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"  />

    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
        <Views>
            <qsf:View>

                <qsf:ConfiguratorColumn runat="server">
                    <ul class="fb-group">
                        <li>
                            <span class="label">Chunk size</span>
                            <qsf:DropDownList ID="RadDropDownList" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadDropDownList_SelectedIndexChanged" Size="Narrow">
                                <Items>
                                    <telerik:DropDownListItem Text="1 Mb" Value="1048576" />
                                    <telerik:DropDownListItem Text="2 Mb" Value="2097152" />
                                    <telerik:DropDownListItem Text="3 Mb" Value="3145728" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>

            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?