Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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.how i can get one single paylods in HandleSubmit(submit btn click mtd) methode? how can i create a model class for these?

What I have tried:

<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>


code file

C#
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,
        });
    }
}
Posted
Updated 7-Jan-23 11:43am

1 solution

 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900