83 lines
2.5 KiB
Text
83 lines
2.5 KiB
Text
|
@inject IJSRuntime JS
|
||
|
|
@inject State State
|
||
|
|
|
||
|
|
<div class="overlay" data-ui="#@id"></div>
|
||
|
|
<dialog id="@id">
|
||
|
|
<h5>Share a picture</h5>
|
||
|
|
<div class="row">
|
||
|
|
<div class="field label prefix border">
|
||
|
|
<i class="fa-solid fa-image"></i>
|
||
|
|
<InputFile OnChange="@ChangeFile" accept="image/gif, image/heic, image/heif, image/jpeg, image/png, image/svg+xml, image/webp"></InputFile>
|
||
|
|
<input type="text">
|
||
|
|
<label>Select a picture</label>
|
||
|
|
</div>
|
||
|
|
@if(File != null){
|
||
|
|
<small>
|
||
|
|
@File.ContentType (@formatSizeUnits(File.Size))
|
||
|
|
</small>
|
||
|
|
}
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="field textarea label border max">
|
||
|
|
<InputTextArea @bind-Value="Description"></InputTextArea>
|
||
|
|
<label>Description</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<nav class="right-align no-space">
|
||
|
|
<button class="transparent link" data-ui="#@id" disabled="@loading">Cancel</button>
|
||
|
|
<button @onclick="PostPic" disabled="@loading">
|
||
|
|
@if (loading) {
|
||
|
|
<span>Uploading...</span>
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
<i class="fa-solid fa-cloud-arrow-up"></i> <span>Upload</span>
|
||
|
|
}
|
||
|
|
</button>
|
||
|
|
</nav>
|
||
|
|
</dialog>
|
||
|
|
|
||
|
|
@code {
|
||
|
|
private IBrowserFile? File { get; set; }
|
||
|
|
private string Description { get; set; }
|
||
|
|
private bool loading = false;
|
||
|
|
[Parameter]
|
||
|
|
public string id { get; set; }
|
||
|
|
|
||
|
|
public async Task PostPic() {
|
||
|
|
loading = true;
|
||
|
|
await InvokeAsync(StateHasChanged);
|
||
|
|
|
||
|
|
RestService api = new RestService();
|
||
|
|
PutPicResponseData? response = await api.PutPic(State.SelectedAddressName, File);
|
||
|
|
if(!string.IsNullOrEmpty(Description) && response != null && !string.IsNullOrEmpty(response.Id)) {
|
||
|
|
await api.PostPicDescription(State.SelectedAddressName, response.Id, Description);
|
||
|
|
await State.RefreshPics();
|
||
|
|
await InvokeAsync(StateHasChanged);
|
||
|
|
}
|
||
|
|
|
||
|
|
await JS.InvokeVoidAsync("ui", "#" + id);
|
||
|
|
// clear input
|
||
|
|
File = null;
|
||
|
|
Description = string.Empty;
|
||
|
|
loading = false;
|
||
|
|
await InvokeAsync(StateHasChanged);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
private async Task ChangeFile(InputFileChangeEventArgs e){
|
||
|
|
File = e.File;
|
||
|
|
}
|
||
|
|
|
||
|
|
private string formatSizeUnits(long bytes){
|
||
|
|
string formatted = "0 bytes";
|
||
|
|
if (bytes >= 1073741824) { formatted = $"{(bytes / 1073741824):.##} GB"; }
|
||
|
|
else if (bytes >= 1048576) { formatted = $"{(bytes / 1048576):.##} MB"; }
|
||
|
|
else if (bytes >= 1024) { formatted = $"{(bytes / 1024):.##} KB"; }
|
||
|
|
else if (bytes > 1) { formatted = $"{bytes} bytes"; }
|
||
|
|
else if (bytes == 1) { formatted = $"{bytes} byte"; }
|
||
|
|
|
||
|
|
return formatted;
|
||
|
|
}
|
||
|
|
}
|