0 Files:
<InputFile id="fileInput" OnChange="UploadFiles" hidden multiple /> <MudButton HtmlTag="label" Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Filled.CloudUpload" for="fileInput"> Upload Files </MudButton> <MudFab HtmlTag="label" Color="Color.Secondary" Icon="@Icons.Filled.Image" Label="Load picture" for="fileInput" /> <MudFab HtmlTag="label" Color="Color.Success" Icon="@Icons.Filled.AttachFile" for="fileInput" /> <MudIconButton HtmlTag="label" Color="Color.Info" Icon="@Icons.Filled.PhotoCamera" for="fileInput"> </MudIconButton> @if (files != null) { <MudText Typo="@Typo.h6">@files.Count() File@(files.Count() == 1 ? "" : "s"):</MudText> <MudList> @foreach (var file in files) { <MudListItem Icon="@Icons.Filled.AttachFile" @key=""> @file.Name <code>@file.Size bytes</code> </MudListItem> } </MudList> }
@code { IList<IBrowserFile> files = new List<IBrowserFile>(); private void UploadFiles(InputFileChangeEventArgs e) { foreach (var file in e.GetMultipleFiles()) { files.Add(file); } //TODO upload the files to the server } }
Use a standard label
Use an html label styled to your liking in combination with a hidden InputFile
.
<label style=" box-shadow: 0 2px 7px #4caf50; display: inline-flex; width: 150px; justify-content: space-around; border-radius: 2em; color: white; border:2px solid; cursor: pointer; align-items: center; padding:16px; background-color: #4caf50;" for="fileInput2"> Upload <MudIcon Icon="@Icons.Filled.CloudUpload"/> </label> <InputFile id="fileInput2" OnChange="UploadFiles" hidden multiple /> @if (files != null) { <MudList> @foreach (var file in files) { <MudListItem Icon="@Icons.Filled.AttachFile"> @file.Name <code>@file.Size bytes</code> </MudListItem> } </MudList> }
@code { IList<IBrowserFile> files = new List<IBrowserFile>(); private void UploadFiles(InputFileChangeEventArgs e) { foreach (var file in e.GetMultipleFiles()) { files.Add(file); } //TODO upload the files to the server } }
Validation
Use the accept
attribute to limit the type of files you want.
@inject ISnackbar Snackbar <InputFile id="fileInput112" OnChange="UploadFiles" hidden multiple accept=".jpg, .jpeg, .png" /> <MudButton HtmlTag="label" Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Filled.CloudUpload" for="fileInput112"> Upload your images </MudButton>
@code { private void UploadFiles(InputFileChangeEventArgs e) { var entries = e.GetMultipleFiles(); //Do your validations here Snackbar.Configuration.PositionClass = Defaults.Classes.Position.TopCenter; Snackbar.Add($"Files with {entries.FirstOrDefault().Size} bytes size are not allowed", Severity.Error); Snackbar.Add($"Files starting with letter {entries.FirstOrDefault().Name.Substring(0, 1)} are not recommended", Severity.Warning); Snackbar.Add($"This file has the extension {entries.FirstOrDefault().Name.Split(".").Last()}", Severity.Info); //TODO upload the files to the server } }
Drag and Drop Example
Using the example below, you can compose a drag-and-drop uploader.
Drag and drop files here or click
@inject ISnackbar Snackbar <MudPaper @ondragenter="" @ondragleave="" @ondragend="" Height="300px" Outlined="true" Class=""> @if (!Clearing) { <InputFile OnChange="OnInputFileChanged" multiple class="absolute mud-width-full mud-height-full overflow-hidden z-2" style="opacity:0;" /> } <MudText Typo="Typo.h6">Drag and drop files here or click</MudText> @foreach (var file in fileNames) { <MudChip Color="Color.Dark" Text="" /> } </MudPaper> <MudToolBar DisableGutters="true" Class="gap-4"> <MudButton OnClick="Upload" Disabled="@(!fileNames.Any())" Color="Color.Primary" Variant="Variant.Filled">Upload</MudButton> <MudButton OnClick="Clear" Disabled="@(!fileNames.Any())" Color="Color.Error" Variant="Variant.Filled">Clear</MudButton> </MudToolBar>
@code { private bool Clearing = false; private static string DefaultDragClass = "relative rounded-lg border-2 border-dashed pa-4 mt-4 mud-width-full mud-height-full"; private string DragClass = DefaultDragClass; private List<string> fileNames = new List<string>(); private void OnInputFileChanged(InputFileChangeEventArgs e) { ClearDragClass(); var files = e.GetMultipleFiles(); foreach(var file in files) { fileNames.Add(file.Name); } } private async Task Clear() { Clearing = true; fileNames.Clear(); ClearDragClass(); await Task.Delay(100); Clearing = false; } private void Upload() { //Upload the files here Snackbar.Configuration.PositionClass = Defaults.Classes.Position.TopCenter; Snackbar.Add("TODO: Upload your files!", Severity.Normal); } private void SetDragClass() { DragClass = $"{DefaultDragClass} mud-border-primary"; } private void ClearDragClass() { DragClass = DefaultDragClass; } }