Click here to Skip to main content
15,670,081 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 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="" For="@(() =>"></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"
        Upload Images
    <br />

code file

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 =

        Medias.Add(new MediaVariantUI
            Content = buffer,
            ImageDataUrl = imageDataUrl,
            ContentType = imageFile.ContentType,
            Name = imageFile.Name,
            Size = imageFile.Size,
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