Hello,
I am trying to set image for a database byte array field in GridEditSettings Template using InputFile control. I have tried SfUploader too, but because i could not hide Template i have decided to use Microsoft.AspNetCore.Components.Forms InputFile control. The following snipped shows what i want to do:
<SfGrid TValue="Client">
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" ShowDeleteConfirmDialog="true" Mode="EditMode.Dialog">
<HeaderTemplate>
@{
<span>Client</span>
}
</HeaderTemplate>
<Template>
@{
var entity = (context as Client);
ImageSourse = string.Format("data:image/png;base64,{0}", entity.Logo != null ? Convert.ToBase64String(entity.Logo) : null);
<div>
<div class="form-group col-md-6">
<label>Logo</label>
<img src=@ImageSourse height="35" />
<InputFile accept="png" OnChange="@(async (ea) => { entity.Logo = await GetFileContentAsync(ea.GetMultipleFiles(1).SingleOrDefault()); })" />
</div>
</div>
}
</Template>
</GridEditSettings>
<SfDataManager Url="odata/Clients" Adaptor="Adaptors.ODataV4Adaptor" />
<GridColumns>
<GridColumn Field=@nameof(Client.Logo) HeaderText="Logo" AutoFit="true">
<Template>
<img src="@string.Format("data:image/png;base64,{0}", (context as Client).Logo != null ? Convert.ToBase64String((context as Client).Logo) : null)" height="35" />
</Template>
</GridColumn>
</GridColumns>
</SfGrid>
@code {
public string ImageSourse { get; set; }
public async Task<byte[]> GetFileContentAsync(IBrowserFile browserFile)
{
byte[] fileContent = null;
if (browserFile != null)
{
try
{
using System.IO.Stream stream = browserFile.OpenReadStream();
{
fileContent = new byte[browserFile.Size];
await browserFile.OpenReadStream().ReadAsync(fileContent);
ImageSourse = string.Format("data:image/png;base64,{0}", Convert.ToBase64String(fileContent));
}
}
catch (Exception ex)
{
throw new ApplicationException(ex.Message);
}
}
return fileContent;
}
public partial class Client
{
public byte[] Logo { get; set; }
//... other fields
}
}
How can i refresh Logo image as soon as i select an image file on Edit Dialog so user can see new selected image before saving.
Actually i don't want to show upload file or select file button but for now its ok, if it was possible to show a tooltip on image space when user hover over with message "select image" and if user clicks on image (image space) then file selector dialog opens, this can be a feature request. It will be great if you can add an image selector that works as explained.
Thanks.
