This example demonstrates how to upload image files from the Grid View edit form and display the uploaded images.
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
- Default.aspx (VB: Default.aspx)
- Default.aspx.cs (VB: Default.aspx.vb)
Documentation
More Examples
Example Code
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>
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";
}
}