How to upload and display Images and file details from two Lists in c# blazor

RAMAN RAGAVAN 46 Reputation points
2023-01-09T11:00:33.377+00:00

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

      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>  
Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
798 questions
{count} votes