New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Control over Upload Process


Starting with Q3.2012 ManualUpload property is available. By setting the ManualUpload property to true the user could start the upload when he/she wants. When manual upload is used under IE 9/8/7 the upload module is IFrame. In order to start the upload startUpload() method from the client side API of the RadAsyncUpload should be invoked. pauseUpload() and resumeUpload() methods were added a bit later with Q1 2013. Keep in mind that pause and resume methods are supported only in browsers that fully utilize the HTML5 File API.

Select files and start the upload manually by clicking the "Start upload" button. You can also "Pause" the upload process and "Resume" it by clicking the appropriate button.

  • DefaultCS.aspx
  • styles.css
<%@ Page Language="c#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script type="text/javascript">
        function startManualUpload() {
            var upload = $find('<%=RadAsyncUpload1.ClientID%>');
            upload.startUpload();
        }
        function pauseManualUpload() {
            var upload = $find('<%=RadAsyncUpload2.ClientID%>');
            upload.pauseUpload();
        }
        function resumeManualUpload() {
            var upload = $find('<%=RadAsyncUpload2.ClientID%>');
            upload.resumeUpload();
        }
    </script>
    <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">
        <telerik:RadAsyncUpload RenderMode="Lightweight" runat="server" ID="RadAsyncUpload1" ManualUpload="true" MultipleFileSelection="Automatic"  />
        <telerik:RadButton RenderMode="Lightweight" runat="server" OnClientClicking="startManualUpload" Text="Start upload" AutoPostBack="false"  />
    </div>
    <br />
    <div class="demo-container size-narrow">
        <telerik:RadAsyncUpload RenderMode="Lightweight" runat="server" ID="RadAsyncUpload2" MultipleFileSelection="Automatic"  />

        <telerik:RadButton RenderMode="Lightweight" runat="server" OnClientClicking="pauseManualUpload" Text="Pause upload" AutoPostBack="false"  />
        <telerik:RadButton RenderMode="Lightweight" runat="server" OnClientClicking="resumeManualUpload" Text="Resume upload" AutoPostBack="false"  />
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance