Example E4644
Visible to All Users

GridView for Web Forms - How to upload files in Edit mode and see them on a click in Browse mode

This example demonstrates how to upload image files from the Grid View edit form and display the uploaded images.

Grid View - Links in grid

Implementation Details

The Grid View in this example contains an unbound column populated with ASPxHyperLink controls. When a data row has no image, the link has no target and displays the "No data uploaded" text.

ASPx
<dx:GridViewDataTextColumn FieldName="Url" UnboundType="Object" VisibleIndex="6"> <DataItemTemplate> <dx:ASPxHyperLink ID="ASPxHyperLink" OnLoad="ASPxHyperLink_Load" runat="server" Target="_blank" Text="No data uploaded"> </dx:ASPxHyperLink> </DataItemTemplate> <%--...--%> </dx:GridViewDataTextColumn>

The link column's EditItemTemplate contains an ASPxUploadControl, which allows users to upload files in edit mode.

ASPx
<dx:GridViewDataTextColumn FieldName="Url" UnboundType="Object" VisibleIndex="6"> <%--...--%> <EditItemTemplate> <dx:ASPxUploadControl ID="ASPxUploadControl1" ShowProgressPanel="true" UploadMode="Auto" AutoStartUpload="true" FileUploadMode="OnPageLoad" OnFileUploadComplete="ASPxUploadControl1_FileUploadComplete" runat="server"> <ValidationSettings MaxFileSize="4194304" MaxFileSizeErrorText="Size of the uploaded file exceeds maximum file size" AllowedFileExtensions=".jpg,.jpeg"> </ValidationSettings> <ClientSideEvents FileUploadComplete="OnFileUploadComplete" /> </dx:ASPxUploadControl> <%--...--%> </EditItemTemplate> </dx:GridViewDataTextColumn>

Files to Look At

Documentation

More Examples

Example Code

Default.aspx
ASPx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>ASPxGridView - How to upload files in Edit mode and see them on a cell click in Browse mode</title> <script type="text/javascript"> function OnFileUploadComplete(s, e) { if (e.callbackData !== "") { lblFileName.SetText(e.callbackData); btnDeleteFile.SetVisible(true); } } function OnClick(s, e) { callback.PerformCallback(lblFileName.GetText()); } function OnCallbackComplete(s, e) { if (e.result === "ok") { lblFileName.SetText(null); btnDeleteFile.SetVisible(false); } } </script> </head> <body> <form id="form1" runat="server"> <div> <dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False" OnCustomErrorText="ASPxGridView1_CustomErrorText" OnRowUpdating="ASPxGridView1_RowUpdating" DataSourceID="SqlDataSource1" KeyFieldName="ProductID"> <Columns> <dx:GridViewCommandColumn VisibleIndex="0" ShowEditButton="true"> </dx:GridViewCommandColumn> <dx:GridViewDataTextColumn FieldName="ProductID" ReadOnly="True" VisibleIndex="1"> <EditFormSettings Visible="False" /> </dx:GridViewDataTextColumn> <dx:GridViewDataTextColumn FieldName="ProductName" VisibleIndex="2"> </dx:GridViewDataTextColumn> <dx:GridViewDataTextColumn FieldName="CategoryID" VisibleIndex="3"> </dx:GridViewDataTextColumn> <dx:GridViewDataTextColumn FieldName="UnitPrice" VisibleIndex="4"> </dx:GridViewDataTextColumn> <dx:GridViewDataCheckColumn FieldName="Discontinued" VisibleIndex="5"> </dx:GridViewDataCheckColumn> <dx:GridViewDataTextColumn FieldName="Url" UnboundType="Object" VisibleIndex="6"> <DataItemTemplate> <dx:ASPxHyperLink ID="ASPxHyperLink" OnLoad="ASPxHyperLink_Load" runat="server" Target="_blank" Text="No data uploaded"> </dx:ASPxHyperLink> </DataItemTemplate> <EditItemTemplate> <dx:ASPxLabel ID="lblAllowebMimeType" runat="server" Text="Allowed image types: jpeg, jpg" Font-Size="8pt" /> <br /> <dx:ASPxLabel ID="lblMaxFileSize" runat="server" Text="Maximum file size: 4Mb" Font-Size="8pt" /> <br /> <dx:ASPxUploadControl ID="ASPxUploadControl1" ShowProgressPanel="true" UploadMode="Auto" AutoStartUpload="true" FileUploadMode="OnPageLoad" OnFileUploadComplete="ASPxUploadControl1_FileUploadComplete" runat="server"> <ValidationSettings MaxFileSize="4194304" MaxFileSizeErrorText="Size of the uploaded file exceeds maximum file size" AllowedFileExtensions=".jpg,.jpeg"> </ValidationSettings> <ClientSideEvents FileUploadComplete="OnFileUploadComplete" /> </dx:ASPxUploadControl> <br /> <dx:ASPxLabel ID="lblFileName" runat="server" ClientInstanceName="lblFileName" Font-Size="8pt" /> <dx:ASPxButton ID="btnDeleteFile" RenderMode="Link" runat="server" ClientVisible="false" ClientInstanceName="btnDeleteFile" AutoPostBack="false" Text="Remove"> <ClientSideEvents Click="OnClick" /> </dx:ASPxButton> </EditItemTemplate> </dx:GridViewDataTextColumn> </Columns> </dx:ASPxGridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT [ProductID], [ProductName], [CategoryID], [UnitPrice], [Discontinued] FROM [Products]" UpdateCommand="UPDATE [Products] SET [ProductName] = @ProductName, [CategoryID] = @CategoryID, [UnitPrice] = @UnitPrice, [Discontinued] = @Discontinued WHERE [ProductID] = @ProductID"> <UpdateParameters> <asp:Parameter Name="ProductName" Type="String" /> <asp:Parameter Name="CategoryID" Type="Int32" /> <asp:Parameter Name="UnitPrice" Type="Decimal" /> <asp:Parameter Name="Discontinued" Type="Boolean" /> <asp:Parameter Name="ProductID" Type="Int32" /> </UpdateParameters> </asp:SqlDataSource> <dx:ASPxCallback ID="ASPxCallback1" runat="server" ClientInstanceName="callback" OnCallback="ASPxCallback1_Callback"> <ClientSideEvents CallbackComplete="OnCallbackComplete" /> </dx:ASPxCallback> </div> </form> </body> </html>
Default.aspx.cs(vb)
C#
using System; using System.Collections.Generic; using DevExpress.Web; using System.IO; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) Session.Clear(); } public List<MySavedObjects> FileList { get { List<MySavedObjects> list = Session["list"] as List<MySavedObjects>; if (list == null) { list = new List<MySavedObjects>(); for (int i = 0; i < ASPxGridView1.VisibleRowCount; i++) { list.Add(new MySavedObjects() { RowNumber = i }); } Session["list"] = list; } return list; } } protected void ASPxUploadControl1_FileUploadComplete(object sender, FileUploadCompleteEventArgs e) { if (e.IsValid) { string fileName = ASPxGridView1.EditingRowVisibleIndex + e.UploadedFile.FileName; string path = "~/Documents/" + fileName; e.UploadedFile.SaveAs(Server.MapPath(path), true); FileList[ASPxGridView1.EditingRowVisibleIndex].Url = Page.ResolveUrl(path); FileList[ASPxGridView1.EditingRowVisibleIndex].FileName = fileName; Session["list"] = FileList; e.CallbackData = fileName; } } protected void ASPxHyperLink_Load(object sender, EventArgs e) { ASPxHyperLink hpl = (ASPxHyperLink)sender; GridViewDataItemTemplateContainer c = (GridViewDataItemTemplateContainer)hpl.NamingContainer; if (!String.IsNullOrWhiteSpace(FileList[c.VisibleIndex].FileName) && !String.IsNullOrWhiteSpace(FileList[c.VisibleIndex].Url)) { hpl.Text = FileList[c.VisibleIndex].FileName; hpl.NavigateUrl = FileList[c.VisibleIndex].Url; } } protected void ASPxGridView1_RowUpdating(object sender, DevExpress.Web.Data.ASPxDataUpdatingEventArgs e) { throw new CustomExceptions.MyException("Data updates aren't allowed in online examples. Click the Cancel button to check how your file was uploaded."); } protected void ASPxGridView1_CustomErrorText(object sender, ASPxGridViewCustomErrorTextEventArgs e) { if (e.Exception is CustomExceptions.MyException) e.ErrorText = e.Exception.Message; } protected void ASPxCallback1_Callback(object source, CallbackEventArgs e) { string fileName = e.Parameter; foreach (MySavedObjects myObj in FileList) { if (myObj.FileName == fileName) myObj.FileName = myObj.Url = string.Empty; } File.Delete(Server.MapPath("~/Documents/" + fileName)); e.Result = "ok"; } }

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.