Hi @RAMAN RAGAVAN
I want to preview the image in the mud card.How can i get image url in to UI list
Try to modify your code as below:
Add an ImageUri property in the MediaVariantUI class, IFileWithStatus interface, and FileWithStatusBase 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 ImageUri { get; set; }
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; }
string ImageUri { get; set; }
}
//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;
ImageUri = file.ImageUri;
}
public BrowserFileWithStatus File { get; }
public String Name { get; set; }
public String FileNameWithoutExtension { get; set; }
public String ContentType { get; set; }
public string ImageUri { get; set; }
}
Then, in the FileuploadComponent component: after selecting the file, read the image file and get the based64 string to display the image.
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)).ToList());
foreach (var imagefile in files)
{
var image = await imagefile.File.RequestImageFileAsync("image/jpg", 100, 100);
using (Stream imageStream = image.OpenReadStream(1024 * 1024 * 10))
{
using MemoryStream ms = new();
await imageStream.CopyToAsync(ms);
imagefile.ImageUri = $"data:image/png;base64,{Convert.ToBase64String(ms.ToArray())}";
}
}
SelectedFiles = files;
await SelectedFilesChanged.InvokeAsync(SelectedFiles).ConfigureAwait(false);
}
After that, in the MudcardComponent component, use the following code to display image:
<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="@item.ImageUri" 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>
The result as below:
i know following code is used to get image data but how can i asign to second class list when first class list triggered
I know you want directly to display the image via the MediaVariantUI.BrowserFileWithStatus.File, I also checked it, but it not works. So, I suggest you could use the above method.
If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Best regards,
Dillion