104 lines
3.2 KiB
Plaintext
104 lines
3.2 KiB
Plaintext
@inject ISnackbar Snackbar
|
|
|
|
<style>
|
|
.file-upload-input {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
z-index: 10;
|
|
opacity: 0;
|
|
}
|
|
</style>
|
|
|
|
<MudStack Style="width: 100%">
|
|
<MudFileUpload T="IReadOnlyList<IBrowserFile>"
|
|
@ref="@_fileUpload"
|
|
OnFilesChanged="OnInputFileChanged"
|
|
AppendMultipleFiles
|
|
Hidden="@false"
|
|
InputClass="file-upload-input"
|
|
tabindex="-1"
|
|
@ondrop="@ClearDragClass"
|
|
@ondragenter="@SetDragClass"
|
|
@ondragleave="@ClearDragClass"
|
|
@ondragend="@ClearDragClass">
|
|
<ActivatorContent>
|
|
<MudPaper Height="300px"
|
|
Outlined="true"
|
|
Class="@_dragClass">
|
|
<MudText Typo="Typo.h6">
|
|
Drag and drop files here or click
|
|
</MudText>
|
|
@foreach (var file in _fileNames)
|
|
{
|
|
<MudChip T="string"
|
|
Color="Color.Dark"
|
|
Text="@file"
|
|
tabindex="-1" />
|
|
}
|
|
</MudPaper>
|
|
</ActivatorContent>
|
|
</MudFileUpload>
|
|
<MudToolBar Gutters="@false"
|
|
Class="relative d-flex justify-end gap-4">
|
|
<MudButton Color="Color.Primary"
|
|
OnClick="@OpenFilePickerAsync"
|
|
Variant="Variant.Filled">
|
|
Open file picker
|
|
</MudButton>
|
|
<MudButton Color="Color.Primary"
|
|
Disabled="@(!_fileNames.Any())"
|
|
OnClick="@Upload"
|
|
Variant="Variant.Filled">
|
|
Upload
|
|
</MudButton>
|
|
<MudButton Color="Color.Error"
|
|
Disabled="@(!_fileNames.Any())"
|
|
OnClick="@ClearAsync"
|
|
Variant="Variant.Filled">
|
|
Clear
|
|
</MudButton>
|
|
</MudToolBar>
|
|
</MudStack>
|
|
|
|
@code {
|
|
#nullable enable
|
|
private const string DefaultDragClass = "relative rounded-lg border-2 border-dashed pa-4 mt-4 mud-width-full mud-height-full";
|
|
private string _dragClass = DefaultDragClass;
|
|
private readonly List<string> _fileNames = new();
|
|
private MudFileUpload<IReadOnlyList<IBrowserFile>>? _fileUpload;
|
|
|
|
private async Task ClearAsync()
|
|
{
|
|
await (_fileUpload?.ClearAsync() ?? Task.CompletedTask);
|
|
_fileNames.Clear();
|
|
ClearDragClass();
|
|
}
|
|
|
|
private Task OpenFilePickerAsync()
|
|
=> _fileUpload?.OpenFilePickerAsync() ?? Task.CompletedTask;
|
|
|
|
private void OnInputFileChanged(InputFileChangeEventArgs e)
|
|
{
|
|
ClearDragClass();
|
|
var files = e.GetMultipleFiles();
|
|
foreach (var file in files)
|
|
{
|
|
_fileNames.Add(file.Name);
|
|
}
|
|
}
|
|
|
|
private void Upload()
|
|
{
|
|
// Upload the files here
|
|
Snackbar.Configuration.PositionClass = Defaults.Classes.Position.TopCenter;
|
|
Snackbar.Add("TODO: Upload your files!");
|
|
}
|
|
|
|
private void SetDragClass()
|
|
=> _dragClass = $"{DefaultDragClass} mud-border-primary";
|
|
|
|
private void ClearDragClass()
|
|
=> _dragClass = DefaultDragClass;
|
|
} |