BinaryImage - Binary Images and RadAsyncUpload in Grid

Next database reset in 1 hours, 23 minutes, 14 seconds
 Image NameDescriptionImage 
12
Page size:
 5 items in 2 pages
Senecio.png Senecio is a genus of the daisy family (Asteraceae) that includes ragworts and groundsels. The flower heads are normally rayed, completely yellow, and the heads are borne in branched clusters. Senecio... Photo of Senecio.png
Bellflower.png American bellflower (Campanula americana) is a tall bellflower that grows mainly in the Great Plains and eastern coast of the United States. Its flowers are light blue to violet and usually form in el... Photo of Bellflower.png
Thistle.png Thistle is the common name of a group of flowering plants characterised by leaves with sharp prickles on the margins, mostly in the family Asteraceae. Prickles often occur all over the plant - on surf... Photo of Thistle.png
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB
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 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" />
    <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>

Find Assistance

Help Us Improve

Was this example helpful?