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

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

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.

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

Hi @MIPAKTEH_1 ,

A Blazor WebAssembly Standalone app runs entirely in the browser — it cannot write files directly to the server’s file system. To persist uploads, you’ll need a backend endpoint (Web API, Blazor Server, etc.) to receive and save the file.

Here’s the general Upload → Save → Display pattern you can follow:

1. Client Side (Blazor WebAssembly or Blazor Server)

• Let the user choose a file using the <InputFile> component.
• When a file is picked, send it to the server using HttpClient with MultipartFormDataContent.
• After the upload, either:
  • Add the new image URL to the current list, or
  • Request a fresh list of images from the server.

Example:

<InputFile OnChange="HandleUpload" />
 
@code {
    private List<string> images = new();
 
    private async Task HandleUpload(InputFileChangeEventArgs e)
    {
        var file = e.File;
        using var content = new MultipartFormDataContent();
        content.Add(new StreamContent(file.OpenReadStream(10_000_000)), "file", file.Name);
 
        var response = await Http.PostAsync("api/uploads", content);
        if (response.IsSuccessStatusCode)
        {
            images = await Http.GetFromJsonAsync<List<string>>("api/uploads");
        }
    }
}

WebAssembly runs in the browser sandbox — uploading to the server requires a POST to your backend.

2. Server Side (ASP.NET Core Web API or Blazor Server)

• Accept the file as IFormFile in a controller.
• Validate the type, size, and MIME type.
• Save it to wwwroot/Uploads so it’s accessible as a static file.
• Return the file’s public URL.

Example:

[HttpPost]
public async Task<IActionResult> Upload(IFormFile file)
{
    if (file == null || file.Length == 0)
        return BadRequest("No file uploaded");
 
    var uploadsPath = Path.Combine(_env.WebRootPath, "Uploads");
    Directory.CreateDirectory(uploadsPath);
 
    var fileName = Path.GetRandomFileName() + Path.GetExtension(file.FileName);
    var filePath = Path.Combine(uploadsPath, fileName);
 
    using var stream = System.IO.File.Create(filePath);
    await file.CopyToAsync(stream);
 
    return Ok($"/Uploads/{fileName}");
}

3. Listing Uploaded Images

• Create a GET endpoint to return all image URLs from the Uploads folder.

Example:

[HttpGet]
public IActionResult List()
{
    var uploadsPath = Path.Combine(_env.WebRootPath, "Uploads");
    if (!Directory.Exists(uploadsPath))
        return Ok(Array.Empty<string>());
 
    var files = Directory.GetFiles(uploadsPath)
                         .Select(f => "/Uploads/" + Path.GetFileName(f));
    return Ok(files);
}

4. Displaying the Images in Blazor

Example:

@foreach (var img in images)
{
<img src="@img" style="max-width:150px;" />
}

I suggest checking these out for better understanding of the pieces

• <InputFile> usage and file streaming Blazor File Upload Basics
• Handling IFormFile in an API Uploading Files in ASP.NET Core
• Mapping wwwroot to URLs Serving Static Files
• Using HttpClient for GET/POST Calling Web APIs from Blazor
• Listing files in C# Directory.GetFiles()

Hope this helps. Please reach out if you need any clarification.