How to upload and display Images and file details from two Lists?

Question

Hi all, I am learning blazor with building a project.There i am stuck with one image upload functionality.I have two classes one for pure image file data and another for only display  images (completely for UI purposes).I am stuck with the requirment whenever user selects multiple images ,the first list will trigger and should automaticaly reflect to the second list and bind to the table.I have been told something like  below   need to follow for this scenario but i am facing some difficulties to build the logic.Please anyone help me on this.I have to add remove and edit name functionality also.User can remove or edit image name before sending in to DB below is my table plan but how and where i have to create second list and connected together?

Hint for me:

List<browsedfiles>
{
get{return files}
set{Imagedata =new List<Media>(value)
files=value;
}

List<ImageforUI>Imagedata {get;set;}

I am unable to build this logic but i have my first list which is binding only name.

my onchange handler with first list

 private async Task OnFilesChanged(InputFileChangeEventArgs eventArgs){
 
 
   var files = new List<browsedfiles>(eventArgs.FileCount);
   
   files.AddRange(eventArgs.GetMultipleFiles(5).Select(file => new browsedfiles(file)));
  
 }

binding first list to UI

<MudList Style="padding: 2em; width: 100%;" Dense="true">
                    @foreach (var fileInfo in files)
                    {
                        <MudListItem @key="@fileInfo.File">
                            <MudChip Color="Color.Dark"
                                     Style="overflow: hidden; width: 60px;"
                                     Text="@(fileInfo.FileExtension)"/>
                            @(fileInfo.FileNameWithoutExtension)

                            @if (!string.IsNullOrEmpty(fileInfo.Tag))
                            {
                                <MudChip Color="Color.Default" Size="Size.Small" Text="@(fileInfo.Tag)"/>
                            }

                            @if (fileInfo.Processed)
                            {
                                <MudIcon Color="Color.Success" Icon="@Icons.Filled.Check"></MudIcon>
                            }
                        </MudListItem>
                    }
                </MudList>

till this i am able to do but the second part i need to create a table with second list and bind images,Name, size content types to a table with seperate list of these details. I have to add remove and edit name functionality also.User can remove or edit image name before sending in to DB below is my table plan but how and where i have to create second list and connected together?

 @if (Imagedata .Count() > 0)
    {
        <div id="another_unique_identifier" class="ma-0" style="height:250px;overflow: auto;">
            <MudTable Items="Imagedata " Hover="true" Dense="true" Class="mb-4" Striped="true">
                <HeaderContent>
                    <MudTh>Images</MudTh>
                    <MudTh>Name</MudTh>
                    <MudTh>Content Type</MudTh>
                    <MudTh>Size</MudTh>
                </HeaderContent>
                <RowTemplate>
                    <MudTd DataLabel="Image"><MudAvatar Image="@context.ImageDataUrl" /></MudTd>
                    <MudTd DataLabel="Name">@context.FileNameWithoutExtension</MudTd>
                    <MudTd DataLabel="ContentType">@context.ContentType</MudTd>
                    <MudTd DataLabel="Size">@context.Size</MudTd>
                    <MudTd DataLabel="Edit">
                    </MudTd>
                </RowTemplate>
            </MudTable>
        </div>