Enhance MudFileUpload to support folders
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);
}Source: MudBlazor/MudBlazor