diff --git a/Iceshrimp.Frontend/Pages/DrivePage.razor b/Iceshrimp.Frontend/Pages/DrivePage.razor index dd296bce..289a1544 100644 --- a/Iceshrimp.Frontend/Pages/DrivePage.razor +++ b/Iceshrimp.Frontend/Pages/DrivePage.razor @@ -11,6 +11,7 @@ @using Microsoft.AspNetCore.Authorization @using Iceshrimp.Frontend.Components @inject ApiService Api; +@inject IJSRuntime Js; @inject IStringLocalizer Loc; @inject ILogger Logger; @inject NavigationManager Nav; @@ -28,8 +29,18 @@ @Loc["Drive"] } + @if (_state == State.Loaded && Folder is not null) + { + + + + } +
+ Upload! +
+ @if (_state == State.Loaded && Folder != null) {
    @@ -61,9 +72,11 @@ } @code { - [Parameter] public string? Id { get; set; } - private DriveFolderResponse? Folder { get; set; } = null; - private State _state { get; set; } + [Parameter] public string? Id { get; set; } + private DriveFolderResponse? Folder { get; set; } = null; + private State _state { get; set; } + private InputFile UploadInput { get; set; } = null!; + private IJSObjectReference _module = null!; private async Task Load() { @@ -93,6 +106,8 @@ protected override async Task OnInitializedAsync() { await Load(); + _module = await Js.InvokeAsync("import", + "./Pages/DrivePage.razor.js"); } protected override async Task OnParametersSetAsync() @@ -104,4 +119,18 @@ { Nav.NavigateTo(Folder?.ParentId != null ? $"/drive/{Folder.ParentId}" : "/drive"); } + + // The Component is hidden, and triggered by a sepperate button. + // That way we get it's functionality, without the styling limitations of the InputFile component + private async Task OpenUpload() + { + await _module.InvokeVoidAsync("openUpload", UploadInput.Element); + } + + private async Task Upload(InputFileChangeEventArgs e) + { + var res = await Api.Drive.UploadFileAsync(e.File); + Folder!.Files.Add(res); + StateHasChanged(); + } } \ No newline at end of file diff --git a/Iceshrimp.Frontend/Pages/DrivePage.razor.css b/Iceshrimp.Frontend/Pages/DrivePage.razor.css index d6bc940f..0924a811 100644 --- a/Iceshrimp.Frontend/Pages/DrivePage.razor.css +++ b/Iceshrimp.Frontend/Pages/DrivePage.razor.css @@ -1,3 +1,7 @@ +.file-input { + display: none; +} + .drive-files { display: flex; flex-wrap: wrap; diff --git a/Iceshrimp.Frontend/Pages/DrivePage.razor.js b/Iceshrimp.Frontend/Pages/DrivePage.razor.js new file mode 100644 index 00000000..5eb113bd --- /dev/null +++ b/Iceshrimp.Frontend/Pages/DrivePage.razor.js @@ -0,0 +1,3 @@ +export function openUpload(element) { + element.click(); +} \ No newline at end of file