Hi i am learning blazor and am stuck in some point.I have an edit form having functionality to add multiple image for a record.How can i merge list of images and other data as a single paylod. i have rough code with me but dont know how to create a model for these two list.i will have add/remove selected image also in future
onfilechange for multuiple images
private async Task OnFilesChanged(InputFileChangeEventArgs e)
{
var maxAllowedFiles = 3000;
var format = "image/png";
foreach (var imageFile in e.GetMultipleFiles(maxAllowedFiles))
{
var resizedImageFile = await imageFile.RequestImageFileAsync(format,
100, 100);
var buffer = new byte[resizedImageFile.Size];
await resizedImageFile.OpenReadStream().ReadAsync(buffer);
var imageDataUrl =
$"data:{format};base64,{Convert.ToBase64String(buffer)}";
Medias.Add(new MediaVariantUI
{
Content = buffer,
ImageDataUrl = imageDataUrl,
ContentType = imageFile.ContentType,
Name = imageFile.Name,
Size = imageFile.Size,
});
}
}
below is edit form using mudblazor
<EditForm Model="@characters" OnValidSubmit="HandleSubmit">
<MudNumericField Label="Id" @bind-Value="character.id" For="@(() => character.id)"></MudNumericField>
<MudTextField Label="Name" @bind-Value="character.Name" For="@(() => character.Name)" />
<MudTextField Label="Bio" @bind-Value="character.Bio" For="@(() => character.Bio)" />
<MudDatePicker Label="Birth Date" @bind-Date="character.BirthDate" />
<br />
<InputFile id="fileInput" OnChange="OnFilesChanged" hidden multiple />
<MudButton HtmlTag="label"
Variant="Variant.Filled"
Color="Color.Success"
StartIcon="@Icons.Filled.CloudUpload"
for="fileInput">
Upload Images
</MudButton>
<br />
</EditForm>
how i can get one single paylos in HandleSubmit methode? how can i create a model class for these?