This example demonstrates how to use the DxUpload component inside the grid edit form template to upload images to the server and then display them in the grid.
In this example, the data source contains paths to images that are maintained on the server. DxGrid displays the images in the cell template (CellDisplayTemplate).
<DxGridDataColumn FieldName=@nameof(TestModel.ImageUrl) Caption="Image">
<CellDisplayTemplate>
<img style="max-width:300px" src="@context.Value" />
</CellDisplayTemplate>
</DxGridDataColumn>The grid edit form template (EditFormTemplate) contains DxUpload component that allows you to upload images to the server.
<EditFormTemplate Context="EditFormContext">
@{
var item = (TestModel)EditFormContext.EditModel;
}
<DxFormLayout CssClass="w-100">
<DxFormLayoutItem Caption="Name:">
@EditFormContext.GetEditor("Name")
</DxFormLayoutItem>
<DxFormLayoutItem>
<img style="max-width:300px" src="@item.ImageUrl" />
</DxFormLayoutItem>
<DxFormLayoutItem>
<DxUpload Name="ImageUpload" FileUploaded="@((args) => OnFileUploaded(args, item))"
UploadUrl="@GetUploadUrl("/api/Upload/UploadFile/")" ChunkSize="20000" ShowFileList="false"
AllowedFileExtensions="@(new List<string> { ".jpg", ".jpeg", ".gif", ".png" })">
</DxUpload>
</DxFormLayoutItem>
</DxFormLayout>
</EditFormTemplate>After an image is uploaded, the FileUploaded event handler saves the image's path to the corresponding row's edit model.
protected void OnFileUploaded(FileUploadEventArgs args, TestModel item) {
var fileUrl = _fileUrlStorageService.Get(Guid.Parse(args.FileInfo.Guid));
item.ImageUrl = fileUrl;
}