How to Upload and List Files in Blazor Server 8

Question

I'm new to Blazor 8 and I'm trying to learn how to handle file uploads and display the uploaded files in a Blazor Server application. Specifically, I'm looking to:

1. Allow users to upload multiple files to the folder.wwwroot/Upload
2. Provide a button that, when clicked, lists all the uploaded files and logs their names to the console.

I've set up my Blazor Server project, but I'm not sure how to proceed with the file upload and listing functionalities. Could someone provide a step-by-step example or guide on how to achieve this in Blazor?

Any help or example code would be greatly appreciated!

Answer 1

Hi @Yusuf,

Here is a whole working demo you could follow:

@page "/"
@rendermode InteractiveServer
@using Microsoft.AspNetCore.Components.Forms
@inject IWebHostEnvironment env
<h3>File Upload</h3>
<InputFile OnChange="HandleFileSelected" multiple />
<button @onclick="ListUploadedFiles">List Uploaded Files</button>
<ul>
    @foreach (var file in uploadedFiles)
    {
        <li>@file</li>
    }
</ul>
@code {
    private List<string> uploadedFiles = new();
    private async Task HandleFileSelected(InputFileChangeEventArgs e)
    {
        foreach (var file in e.GetMultipleFiles())
        {
            var filePath = Path.Combine(env.WebRootPath, "Upload", file.Name);
            using (var stream = new FileStream(filePath, FileMode.Create))
            {
                await file.OpenReadStream().CopyToAsync(stream);
            }
            uploadedFiles.Add(file.Name);
        }
    }
    private void ListUploadedFiles()
    {
        var uploadPath = Path.Combine(env.WebRootPath, "Upload");
        if (Directory.Exists(uploadPath))
        {
            var files = Directory.GetFiles(uploadPath);
            uploadedFiles = files.Select(file => Path.GetFileName(file)).ToList();
            foreach (var file in uploadedFiles)
            {
                Console.WriteLine(file);
            }
        }
    }
}

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,
Rena

Answer 2

See docs

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