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

Binary Images and RadAsyncUpload in Grid

Next database reset in 0 hours, 17 minutes, 3 seconds
 Image NameDescriptionImage 
1
Page size:
 2 items in 1 pages
jjj jjjj Photo of jjj
x y Photo of x
This example illustrates the usage of RadAsyncUpload and BinaryImage and how to display and edit images. The upload process requires that the files are uploaded to a custom handler and not to the hosting page. Files are stored in a temporary location until a Postback occurs. The temporary location is cleaned-up automatically.

In order to save the uploaded files into the database you could use the InputStream property to access the content of the uploaded files:

.CS
....
 UploadedFile file = radAsyncUpload.UploadedFiles[0];
 byte[] fileData = new byte[file.InputStream.Length];
 file.InputStream.Read(fileData, 0, (int)file.InputStream.Length);
 cmd.Parameters.Add("@Data", SqlDbType.Image);
 cmd.Parameters["@Data"].Value = fileData;
...

.VB
...
 Dim file As UploadedFile = radAsyncUpload.UploadedFiles(0)
 Dim fileData As Byte() = New Byte(file.InputStream.Length - 1) {}
 file.InputStream.Read(fileData, 0, CInt(file.InputStream.Length))
 cmd.Parameters.Add("@Data", SqlDbType.Image)
 cmd.Parameters("@Data").Value = fileData
...

There are a few important things to consider when using RadAsyncUpload:

  • RadAsyncUpload requires the Telerik.Web.UI.WebResource handler to be registered in the web.config
  • You need to ensure that any submit buttons on the page are disabled while upload is in progress. Otherwise, there is no guarantee that the files will be uploaded successfully
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Controls_Examples_Integration_GridAndRadAsyncUpload_DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            var uploadedFilesCount = 0;
            var isEditMode;
            function validateRadUpload(source, e)
            {
                // When the RadGrid is in Edit mode the user is not obliged to upload file.
                if (isEditMode == null || isEditMode == undefined)
                {
                    e.IsValid = false;

                    if (uploadedFilesCount > 0)
                    {
                        e.IsValid = true;
                    }
                }
                isEditMode = null;
            }

            function OnClientFileUploaded(sender, eventArgs)
            {
                uploadedFilesCount++;
            }
            
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-container no-bg">
        <telerik:RadGrid RenderMode="Lightweight" runat="server" ID="RadGrid1" AllowPaging="True" AllowSorting="True"
            AutoGenerateColumns="False" GridLines="None" 
            OnItemCreated="RadGrid1_ItemCreated" PageSize="3" OnInsertCommand="RadGrid1_InsertCommand"
            OnNeedDataSource="RadGrid1_NeedDataSource" OnDeleteCommand="RadGrid1_DeleteCommand"
            OnUpdateCommand="RadGrid1_UpdateCommand" OnItemCommand="RadGrid1_ItemCommand">
            <PagerStyle Mode="NumericPages" AlwaysVisible="true"></PagerStyle>
            <MasterTableView Width="100%" CommandItemDisplay="Top" DataKeyNames="ID">
                <Columns>
                    <telerik:GridEditCommandColumn>
                        <HeaderStyle Width="36px"></HeaderStyle>
                    </telerik:GridEditCommandColumn>
                    <telerik:GridTemplateColumn HeaderText="Image Name" UniqueName="ImageName" SortExpression="Name">
                        <ItemTemplate>
                            <asp:Label runat="server" ID="lblName" Text='<%# Eval("Name") %>'></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <telerik:RadTextBox RenderMode="Lightweight" runat="server" Width="300px" ID="txbName" Text='<%# Eval("Name") %>'>
                            </telerik:RadTextBox>
                            <asp:RequiredFieldValidator ID="Requiredfieldvalidator1" runat="server" ControlToValidate="txbName"
                                ErrorMessage="Please, enter a name!" Display="Dynamic" SetFocusOnError="true"></asp:RequiredFieldValidator>
                        </EditItemTemplate>
                        <HeaderStyle Width="30%"></HeaderStyle>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn HeaderText="Description" UniqueName="Description" DataField="Description">
                        <ItemTemplate>
                            <asp:Label ID="lblDescription" runat="server" Text='<%# TrimDescription(Eval("Description") as string) %>'></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <telerik:RadTextBox RenderMode="Lightweight" ID="txbDescription" Width="300px" runat="server" TextMode="MultiLine"
                                Text='<%# Eval("Description") %>' Height="150px">
                            </telerik:RadTextBox>
                        </EditItemTemplate>
                        <ItemStyle VerticalAlign="Top"></ItemStyle>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn DataField="Data" HeaderText="Image" UniqueName="Upload">
                        <ItemTemplate>
                            <telerik:RadBinaryImage runat="server" ID="RadBinaryImage1" DataValue='<%#Eval("Data") %>'
                                AutoAdjustImageControlSize="false" Height="80px" Width="80px" ToolTip='<%#Eval("Name", "Photo of {0}") %>'
                                AlternateText='<%#Eval("Name", "Photo of {0}") %>'></telerik:RadBinaryImage>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <telerik:RadAsyncUpload RenderMode="Lightweight" runat="server" ID="AsyncUpload1" OnClientFileUploaded="OnClientFileUploaded"
                                AllowedFileExtensions="jpg,jpeg,png,gif" MaxFileSize="1048576" OnFileUploaded="AsyncUpload1_FileUploaded">
                            </telerik:RadAsyncUpload>
                        </EditItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridButtonColumn Text="Delete" CommandName="Delete" ButtonType="FontIconButton">
                        <HeaderStyle Width="36px"></HeaderStyle>
                    </telerik:GridButtonColumn>
                </Columns>
                <EditFormSettings>
                    <EditColumn ButtonType="FontIconButton">
                    </EditColumn>
                </EditFormSettings>
                <PagerStyle AlwaysVisible="True"></PagerStyle>
            </MasterTableView>
        </telerik:RadGrid>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance