Neighbourhood.omg.lol/Components/NewPicDialog.razor

@inject IJSRuntime JS
@inject State State
@inject RestService api
@inject NavigationManager navigationManager

<div class="overlay @(Active ? "active" : string.Empty)" data-ui="#@id"></div>
<dialog id="@id" class="@(Active ? "active" : string.Empty)" open="@Active">
  <h5>Share a picture</h5>
  <div class="row">
    <button @onclick="PicFromMedia"><i class="fa-solid fa-image"></i> Select a picture</button>
    <button @onclick="PicFromPhoto"><i class="fa-solid fa-camera"></i> Take a photo</button>
    @* <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> *@
  </div>
  <div class="row">
    @if(Base64File != null && FileSize != null){
      <img class="extra" src="@Base64Url">
      <small>
        @FileContentType (@formatSizeUnits(FileSize))
      </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; }
  [Parameter]
  public string? Base64File { get; set; }
  [Parameter]
  public long? FileSize { get; set; }
  [Parameter]
  public string? FileContentType { get; set; }
  [Parameter]
  public string? Description { get; set; }
  [Parameter]
  public string id { get; set; }
  [Parameter]
  public bool Active { get; set; }

  private bool loading = false;

  private FileResult? File { get; set; }
  private string? Base64Url {
    get {
      if (FileContentType == null || Base64File == null) return null;

      return $"data:{FileContentType};base64,{Base64File}";
    }
  }

  public async Task PostPic() {
    loading = true;
    await InvokeAsync(StateHasChanged);

    PutPicResponseData? response = await api.PutPic(State.SelectedAddressName, Base64File);
    if(!string.IsNullOrEmpty(Description) && response != null && !string.IsNullOrEmpty(response.Id)) {
      await api.PostPicDescription(State.SelectedAddressName, response.Id, Description);
      await State.RefreshPics();
      State.SendRefresh();
      await InvokeAsync(StateHasChanged);
    }

    await JS.InvokeVoidAsync("ui", "#" + id);
    // clear input
    File = null;
    Description = string.Empty;
    loading = false;
    await InvokeAsync(StateHasChanged);

  }

  private string formatSizeUnits(long? bytes){
    if(bytes == null) return "?? 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;
  }



  private async Task PicFromMedia(EventArgs e) {
    File = await MediaPicker.Default.PickPhotoAsync();
    await PopulateFileDetails();
  }

  private async Task PicFromPhoto(EventArgs e) {
    File = await MediaPicker.Default.CapturePhotoAsync();    
    await PopulateFileDetails();
  }

  private async Task PopulateFileDetails() {
    FileContentType = File.ContentType;
    FileSize = await Utilities.FileSize(File);
    Base64File = await Utilities.Base64FromFile(File);
  }
}