Skip to content
This repository has been archived by the owner. It is now read-only.
Switch branches/tags
Go to file
Cannot retrieve contributors at this time
@page "/multi"
<h1>Multiple files</h1>
<p>A multi-file picker that displays information about selection and shows progress as each one is loaded.</p>
<label for="uploadFiles">Select File(s)</label>
<InputFile id="uploadFiles" multiple OnChange="HandleSelection" />
<label for="uploadFolder">Select Folder</label>
<InputFile id="uploadFolder" multiple webkitdirectory OnChange="HandleSelection" />
@if (selectedFiles != null)
foreach (var file in selectedFiles)
var isLoading = file.Data.Position > 0;
<div class="file-row">
<!-- File info -->
Size: <strong>@file.Size bytes</strong>;
Last modified: <strong>@file.LastModified.ToShortDateString()</strong>;
Type: <strong>@file.Type</strong>
Relative Path: <strong>@file.RelativePath</strong>
<!-- Upload button -->
<button @onclick="() => LoadFile(file)" disabled="@isLoading">
@if (!isLoading)
<span>Loaded @((100.0 * file.Data.Position / file.Size).ToString("0"))%</span>
@code {
IFileListEntry[] selectedFiles;
void HandleSelection(IFileListEntry[] files)
selectedFiles = files;
async Task LoadFile(IFileListEntry file)
// So the UI updates to show progress
file.OnDataRead += (sender, eventArgs) => InvokeAsync(StateHasChanged);
// Just load into .NET memory to show it can be done
// Alternatively it could be saved to disk, or parsed in memory, or similar
var ms = new MemoryStream();
await file.Data.CopyToAsync(ms);