I am learning blazor and c# fundas with a simple app.This app will allow you to
browse all kind of files including images.As all kind files we can browse, i need a seperate class
for images only so when ever user select file, first class-BrowserFileWithStatus list will trigger the second class-MediaVariantUI (lists)
class 1-BrowserFileWithStatus - list of this class NOT use to bind to the UI
class 2-MediaVariantUI- list of this class will use to bind to the UI
I am able to bind the file name but How i can bind the images in mud card.I dont want to disturb my first class
i need to asign my images to second class list.How can I do that? below is my classes and pages.
basicaly i dont want to disturb First class
//FIRST CLASS
public class BrowserFileWithStatus: FileWithStatusBase
{
public BrowserFileWithStatus(IBrowserFile file)
{
File = file ?? throw new ArgumentNullException(nameof(file));
FileName = Path.GetFileName(File.Name);
}
public IBrowserFile File { get; }
}
public class FileWithStatusBase: IFileWithStatus
{
private readonly string fileName = null!;
public string FileNameWithoutExtension { get; private init; } = null!;
public string FileExtension { get; private init; } = null!;
public string FileName
{
get => fileName;
protected init
{
fileName = value;
FileExtension = Path.GetExtension(fileName.AsSpan())[1..].ToString();
FileNameWithoutExtension = Path.GetFileNameWithoutExtension(fileName);
}
}
}
public interface IFileWithStatus
{
string FileNameWithoutExtension { get; }
string FileExtension { get; }
string FileName { get; }
}
//SECOND CLASS-USING FOR IMAGE ONLY OPERATIONS
public class MediaVariantUI
{
private BrowserFileWithStatus file;
public MediaVariantUI(BrowserFileWithStatus file)
{
File = file;
this.file = file;
Name = file.FileName;
ContentType = file.File.ContentType;
FileNameWithoutExtension = file.FileNameWithoutExtension;
}
public BrowserFileWithStatus File { get; }
public String Name { get; set; }
public String FileNameWithoutExtension { get; set; }
public String ContentType { get; set; }
}
My main UI Page
@page "/MediaUpload"
@using FileUpload.Models;
<EditForm Model="mediaformmodels" OnValidSubmit="CreateMediaNewFormAsync">
<FileuploadComponent @bind-SelectedFiles="mediaformmodels.ListFileToUpload"></FileuploadComponent>
@if (mediaformmodels.ListMediaVariantUI != null && mediaformmodels.ListMediaVariantUI.Count > 0)
{
<MudcardComponent MediaVariantUIList="mediaformmodels.ListMediaVariantUI"></MudcardComponent>
}
<MudGrid Class="mt-4 pt-1" Justify="Justify.FlexEnd">
<MudItem>
<MudButton Size="Size.Large"
Variant="Variant.Filled"
Color="Color.Primary"
StartIcon="@Icons.Material.Outlined.Save"
ButtonType="ButtonType.Submit">
SUBMIT
</MudButton>
</MudItem>
</MudGrid>
</EditForm>
@code {
private MediaFormModels mediaformmodels = new();
private async Task CreateMediaNewFormAsync()
{
foreach (var mediaFile in mediaformmodels.ListMediaVariantUI.Where(x => x != null))
{
//save each media files
}
}
}
//MediaFormModels class for mediaformmodels
using System.ComponentModel.DataAnnotations;
namespace FileUpload.Models
{
public class MediaFormModels
{
private List<MediaVariantUI>? listMediaVariantUIValue = new();
private List<BrowserFileWithStatus>? listFileToUpload = new();
public IReadOnlyList<BrowserFileWithStatus>? ListFileToUpload
{
get
{
return listFileToUpload;
}
set
{
listFileToUpload = value.ToList();
ListMediaVariantUI = value.Select(file => new MediaVariantUI(file)).ToList();
}
}
public IReadOnlyList<MediaVariantUI>? ListMediaVariantUI
{
get { return listMediaVariantUIValue; }
set { listMediaVariantUIValue = value.ToList(); }
}
}
}
My File upload page
@using FileUpload.Models;
<h3>FileuploadComponent</h3>
<InputFile id="fileInput" OnChange="OnFilesChanged" hidden multiple />
<MudButton HtmlTag="label"
Variant="Variant.Filled"
Color="Color.Success"
StartIcon="@Icons.Filled.CloudUpload"
for="fileInput">
Upload Image
</MudButton>
@code {
[Parameter]
public IReadOnlyList<BrowserFileWithStatus> SelectedFiles { get; set; } = Array.Empty<BrowserFileWithStatus>();
[Parameter]
public EventCallback<IReadOnlyList<BrowserFileWithStatus>> SelectedFilesChanged { get; set; }
private async Task OnFilesChanged(InputFileChangeEventArgs eventArgs)
{
//i know following code is used to get image data but how can i asign to second class list when first class list triggered
//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)}";
//}
_ = eventArgs ?? throw new ArgumentNullException(nameof(eventArgs));
var files = new List<BrowserFileWithStatus>(eventArgs.FileCount);
files.AddRange(eventArgs.GetMultipleFiles(10000).Select(file => new BrowserFileWithStatus(file)));
SelectedFiles = files;
await SelectedFilesChanged.InvokeAsync(SelectedFiles).ConfigureAwait(false);
}
}
For image binding i have a card component
@using FileUpload.Models;
<h3>Display selected Images</h3>
<MudPaper Width="100%" Class="darkbackground" MinHeight="350">
<MudContainer>
<MudGrid Spacing="@spacing" Justify="Justify.Center">
@foreach (var item in MediaVariantUIList)
{
<MudItem xs="4" Style="display:flex;">
<MudCard Height="350px" Width="300px">
<MudCardMedia Image="" Height="200" />
<MudCardContent>
<input @bind="@item.FileNameWithoutExtension" @bind:event="oninput" />
@* <MudTextField @bind-Value="@item.FileNameWithoutExtension" @bind:event="oninput" Label="Name" Variant="Variant.Text" Margin="Margin.Dense"></MudTextField>*@
<MudText Class="textsilver" Typo="Typo.body2">@item.Name</MudText>
</MudCardContent>
<MudCardActions>
<MudIconButton Icon="@Icons.Material.Filled.Delete" Variant="Variant.Outlined" Color="Color.Error" Size="Size.Small" />
</MudCardActions>
</MudCard>
</MudItem>
}
</MudGrid>
</MudContainer>
</MudPaper>
@code {
public int spacing { get; set; } = 2;
[Parameter]
public IReadOnlyList<MediaVariantUI> MediaVariantUIList { get; set; } = Array.Empty<MediaVariantUI>();
}