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

Custom Http Handler

Telerik ASP.NET Async Upload control relies on an Http handler to upload files and performs the uploads by dividing the files in chunks and saving them in a temporary folder.

This demo shows how you can inherit and extend the default Http handler to create a custom one which allows you to save files directly to a database instead of a temporary folder.

For our demo purposes we have set two handlers: one saving your file to the database and returning the database record identifier, and another retrieving the uploaded image from the database in order for it to be visualized.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
    • DefaultCS.aspx.cs
    • Handler.ashx.cs
    • SampleAsyncUploadConfiguration.cs
    • SampleAsyncUploadResult.cs
    • StreamImage.ashx.cs
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Upload_ImageUploader_DefaultCS" %>

<!DOCTYPE html>
<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 src="scripts.js" type="text/javascript"></script>
</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">
        <p class="info"></p>
        <telerik:RadAsyncUpload RenderMode="Lightweight" runat="server" ID="RadAsyncUpload1" HttpHandlerUrl="~/AsyncUpload/Examples/ImageUploader/Handler.ashx"
            OnClientFileUploaded="fileUploaded" OnClientFileUploadRemoving="fileUploadRemoving" 
            MultipleFileSelection="Disabled" AllowedFileExtensions="jpeg,jpg,gif,png,bmp" Width="500px" />
        <div class="imageContainer"></div>
    </div>

    <script type="text/javascript">
        Sys.Application.add_load(function () {
            demo.initialize();
        });
    </script>

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

Support & Learning Resources

Find Assistance