Added file upload component
This commit is contained in:
parent
7b636a28df
commit
108e1c0221
41
Wave/Components/FileUploadComponent.razor
Normal file
41
Wave/Components/FileUploadComponent.razor
Normal 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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
|
@ -2,7 +2,6 @@
|
|||
|
||||
@using Microsoft.AspNetCore.Authorization
|
||||
@using Wave.Services
|
||||
@using System.IO.Pipelines
|
||||
|
||||
@attribute [Authorize]
|
||||
@rendermode InteractiveServer
|
||||
|
@ -11,48 +10,24 @@
|
|||
<PageTitle>Upload</PageTitle>
|
||||
|
||||
<h3 class="title mb-3">Upload</h3>
|
||||
@if (Busy) {
|
||||
<progress class="progress progress-primary w-56"></progress>
|
||||
}
|
||||
|
||||
<div>
|
||||
<p>@Message</p>
|
||||
@if (Path is not null) {
|
||||
<img src="@Path" type="@ImageService.ImageMimeType" width="800" alt="" />
|
||||
}
|
||||
</div>
|
||||
|
||||
<InputFile OnChange="@LoadFiles" accept="image/png, image/jpeg, image/webp" />
|
||||
<FileUploadComponent FileUploadedCallback="Callback" />
|
||||
|
||||
@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 bool Busy { get; set; }
|
||||
|
||||
private async Task LoadFiles(InputFileChangeEventArgs args) {
|
||||
Busy = true;
|
||||
|
||||
try {
|
||||
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;
|
||||
|
||||
private async Task Callback(string tempFilePath) {
|
||||
var guid = await ImageService.StoreImageAsync(tempFilePath);
|
||||
if (guid is null) {
|
||||
throw new ApplicationException("Could not process file, upload possibly corrupted.");
|
||||
}
|
||||
|
||||
Path = "/images/" + guid;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
2
Wave/wwwroot/css/main.min.css
vendored
2
Wave/wwwroot/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue