#13829·MudBlazor

Enhance MudFileUpload to support folders

Author: renaudrenaud85Created Sep 10, 2026Updated Sep 16, 2026
Labelsenhancement

Describe your idea

More and more webservices allow not to just upload files but also whole folder-structures.

All modern browser support this and it would be nice, if MudBlazor would also support it directly in the MudFileUpload component: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitEntries

It would make sense that it is not to just a choice between folder and files but that one upload / Drag&Drop can handle both at the same time to allow a good user experience.

Example code and screenshots

Actually, IBrowserFile does not support the relative path, but BrowserFile does: https://github.com/dotnet/aspnetcore/blob/main/src/Components/Web/src/Forms/InputFile/BrowserFile.cs

As InputFileChangeEventArgs only returns IBrowserFile, there would be two ways:

  • Casting the IBrowserFile to BrowserFile which requires a good test coverage if Microsoft is breaking the implementation
  • Using Javascript and mapping to own DTO's

It could also be a combination, something like that:

private async Task OnChangeAsync(InputFileChangeEventArgs args)
{
    var browserFiles = args.GetMultipleFiles(MaximumFileCount);

    var paths = await JsRuntime.InvokeAsync<string[]>(
        "getRelativePaths",
        inputFile.Element);

    files = browserFiles
        .Select((file, index) => new FolderBrowserFile(
            file,
            paths[index]))
        .ToList();
}

public sealed record FolderBrowserFile(
    IBrowserFile File,
    string RelativePath);

and the Javascript:

function getRelativePaths(input) {
    return Array.from(input.files)
        .map(file => file.webkitRelativePath);
}