AsyncUpload - File Upload with Drag and Drop

The Drag and Drop functionality relies on the HTML5 File API and Drag-And-Drop modules, which means that it works in modern browsers only:

Firefox 4+, Google Chrome, IE10+, Edge.

Custom Drop Zone

Drop Files Here

Custom Drop Zone

Drop Files Here

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadAsyncUpload allows users to upload files by simply dragging and dropping them over the control, rather than opening the Upload Dialog and selecting them from there.

The upload starts automatically when the users drop the files over the Upload control or custom drop zones that you specify.

Drag and drop files over the upload or custom drop zones.

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

<!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" />
    <script type="text/javascript" src="scripts.js"></script>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <qsf:MessageBox ID="InformationBox1" Icon="Info" Type="Info" runat="server">
        <p>
            The Drag and Drop functionality relies on the HTML5 File API and Drag-And-Drop modules,
            which means that it works in modern browsers only:
        </p>
        <p>Firefox 4+, Google Chrome, IE10+, Edge.</p>
    </qsf:MessageBox>

    <div class="demo-container size-wide">
        <telerik:RadAsyncUpload RenderMode="Lightweight" runat="server" ID="RadAsyncUpload1" MultipleFileSelection="Automatic" DropZones=".DropZone1,#DropZone2"  />

        <div class="DropZone1">
            <p>Custom Drop Zone</p>
            <p>Drop Files Here</p>
        </div>
        <div id="DropZone2">
            <p>Custom Drop Zone</p>
            <p>Drop Files Here</p>
        </div>
    </div>

    <telerik:RadScriptBlock runat="server">
        <script type="text/javascript">
            //<![CDATA[
            Sys.Application.add_load(function () {
                demo.initialize();
            });
            //]]>
        </script>
    </telerik:RadScriptBlock>

    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?