If I upload image to my web App with ASP.NET CORE and Blazor Assembly StandAlone App to the folder Uploads My question is How to show all images to the new page using coding above

Question

@page "/view-page"

<h3>Blank View Page</h3>

@for (int i = 0; i < tshirtItems.Count; i++)

{

var index = i;

<div class="tshirt-section">

    <img src="@tshirtItems[i].ImagePath" alt="T-Shirt Image" style="max-width: 150px; max-height: 150px;" />

    <div>

        <label for="tshirtImage">Upload Image:</label>

        <InputFile OnChange="e => UploadImage(e, index)" />

    </div>

    <div>

        <label for="tshirtName">T-Shirt Name:</label>

        <input type="text" id="tshirtName" @bind="tshirtItems[i].Name" />

    </div>

    <div>

        <label for="tshirtPrice">Price:</label>

        <input type="number" id="tshirtPrice" @bind="tshirtItems[i].Price" />

    </div>

</div>
```}

@code {

```powershell
private List<TShirt> tshirtItems = new List<TShirt>

{

    new TShirt { ImagePath = "", Name = "Shirt 1", Price = 0 },

    new TShirt { ImagePath = "", Name = "Shirt 2", Price = 0 },

    new TShirt { ImagePath = "", Name = "Shirt 3", Price = 0 },

    new TShirt { ImagePath = "", Name = "Shirt 4", Price = 0 },

    new TShirt { ImagePath = "", Name = "Shirt 5", Price = 0 },

    new TShirt { ImagePath = "", Name = "Shirt 6", Price = 0 }

};

private async Task UploadImage(InputFileChangeEventArgs e, int index)

{

    var file = e.File; // Get the uploaded file

    if (file != null)

    {

        var buffer = new byte[file.Size];

        await file.OpenReadStream().ReadAsync(buffer);

        // Convert to Base64

        var base64Image = Convert.ToBase64String(buffer);

        tshirtItems[index].ImagePath = $"data:image/png;base64,{base64Image}";

    }

}

private class TShirt

{

    public string ImagePath { get; set; }

    public string Name { get; set; }

    public decimal Price { get; set; }

}
```}

Answer 1

Is your components render mode interactive, so the the onchange event fires?

Answer 2

Do you want show the images uploaded to "web App with ASP.NET CORE" on the "new page" of "Blazor Assembly StandAlone App"?

If yes:

(1) Add controller to your "web App with ASP.NET CORE" app which can download the uploaded image file, and

(2) Add the img tag to the "new page" and set src attribute to the url of the controller.

Answer 3

I think SurferOnWww right but I very newest blank to start it.If have some example..

The official Blazor documentation is the recommended starting point for your learning, and it includes file upload examples.

https://learn.microsoft.com/en-us/aspnet/core/blazor/file-uploads?view=aspnetcore-9.0