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 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) {
|
|
||||||
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);
|
|
||||||
|
|
||||||
|
private async Task Callback(string tempFilePath) {
|
||||||
|
var guid = await ImageService.StoreImageAsync(tempFilePath);
|
||||||
if (guid is null) {
|
if (guid is null) {
|
||||||
Message = "Image upload failed";
|
throw new ApplicationException("Could not process file, upload possibly corrupted.");
|
||||||
} else {
|
}
|
||||||
Message = "Image uploaded successfully";
|
|
||||||
Path = "/images/" + guid;
|
Path = "/images/" + guid;
|
||||||
}
|
}
|
||||||
} catch (Exception ex) {
|
|
||||||
Message = $"{ex.Message} ({ex.GetType().Name}).";
|
|
||||||
} finally {
|
|
||||||
Busy = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
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