Added file upload component

This commit is contained in:
Mia Rose Winter 2024-01-14 13:13:28 +01:00
parent 7b636a28df
commit 108e1c0221
Signed by: miawinter
GPG key ID: 4B6F6A83178F595E
3 changed files with 51 additions and 35 deletions

View file

@ -0,0 +1,41 @@
@using Wave.Utilities
@if (Busy) {
<progress class="progress progress-primary w-full max-w-xs mb-3"></progress>
}
<div class="form-control">
<InputFile class="file-input file-input-bordered w-full max-w-xs" disabled="@Busy"
OnChange="@LoadFiles" accept="@AcceptTypes" />
@if (!string.IsNullOrWhiteSpace(Message)) {
<div class="label">
<span class="label-text-alt text-error">@Message</span>
</div>
}
</div>
@code {
[Parameter]
public long MaxFileSize { get; set; } = 1024 * 1024 * 5; // 5MB should be fine
[Parameter]
public string AcceptTypes { get; set; } = "image/png, image/jpeg, image/webp";
[Parameter]
public required EventCallback<string> FileUploadedCallback { get; set; }
private string Message { get; set; } = string.Empty;
private bool Busy { get; set; }
private async Task LoadFiles(InputFileChangeEventArgs args) {
Busy = true;
try {
string tempPath = await FileUtilities.StoreTemporary(args.File.OpenReadStream(MaxFileSize));
await FileUploadedCallback.InvokeAsync(tempPath);
Message = string.Empty;
} catch (Exception ex) {
Message = "File upload failed: " + ex.Message;
} finally {
Busy = false;
}
}
}

View file

@ -2,7 +2,6 @@
@using Microsoft.AspNetCore.Authorization @using Microsoft.AspNetCore.Authorization
@using Wave.Services @using Wave.Services
@using System.IO.Pipelines
@attribute [Authorize] @attribute [Authorize]
@rendermode InteractiveServer @rendermode InteractiveServer
@ -11,48 +10,24 @@
<PageTitle>Upload</PageTitle> <PageTitle>Upload</PageTitle>
<h3 class="title mb-3">Upload</h3> <h3 class="title mb-3">Upload</h3>
@if (Busy) {
<progress class="progress progress-primary w-56"></progress>
}
<div> <div>
<p>@Message</p>
@if (Path is not null) { @if (Path is not null) {
<img src="@Path" type="@ImageService.ImageMimeType" width="800" alt="" /> <img src="@Path" type="@ImageService.ImageMimeType" width="800" alt="" />
} }
</div> </div>
<FileUploadComponent FileUploadedCallback="Callback" />
<InputFile OnChange="@LoadFiles" accept="image/png, image/jpeg, image/webp" />
@code { @code {
private const long MaxFileSize = 1024 * 1024 * 5; // 5MB should be fine
private string Message { get; set; } = string.Empty;
private string? Path { get; set; } private string? Path { get; set; }
private bool Busy { get; set; }
private async Task LoadFiles(InputFileChangeEventArgs args) { private async Task Callback(string tempFilePath) {
Busy = true; var guid = await ImageService.StoreImageAsync(tempFilePath);
if (guid is null) {
try { throw new ApplicationException("Could not process file, upload possibly corrupted.");
string tempName = System.IO.Path.GetRandomFileName();
string tempDirectory = System.IO.Path.Combine(".", "files", "temp");
Directory.CreateDirectory(tempDirectory);
string tempPath = System.IO.Path.Combine(tempDirectory, tempName);
await using var fs = new FileStream(tempPath, FileMode.Create);
await args.File.OpenReadStream(MaxFileSize).CopyToAsync(fs);
var guid = await ImageService.StoreImageAsync(tempPath);
if (guid is null) {
Message = "Image upload failed";
} else {
Message = "Image uploaded successfully";
Path = "/images/" + guid;
}
} catch (Exception ex) {
Message = $"{ex.Message} ({ex.GetType().Name}).";
} finally {
Busy = false;
} }
Path = "/images/" + guid;
} }
} }

File diff suppressed because one or more lines are too long