Neighbourhood.omg.lol/Components/EditProfilePicDialog.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>Update your profile picture</h5>
  <div class="padding center-align">
    <img src="@(Base64Url ?? ExistingUrl)" class="small-height square" />
  </div>
  <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>
  <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 {
  [Parameter]
  public string? Address { get; set; }
  public string ExistingUrl { get => $"https://profiles.cache.lol/{Address ?? ""}/picture"; }
  // 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? 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);

    //TODO: upload the profile pic
    //PutPicResponseData? response = await api.PutPic(State.SelectedAddressName!, Base64File!);
    if (Base64File != null && File != null)
    {
      // using var fileStream = await File.OpenReadAsync();
      BasicResponseData? response = await api.PostProfilePic(Address!, File);
      if (response != null)
      {
        await JS.InvokeVoidAsync("ui", "#" + id);
        // clear input
        File = null;
        Base64File = null;
        FileSize = null;
        FileContentType = null;
        await JS.InvokeVoidAsync("cacheBust", ExistingUrl);
      }
      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() {
    if (File == null) {
      FileContentType = null;
      FileSize = null;
      Base64File = null;
    }
    else {
      FileContentType = File.ContentType;
      FileSize = await Utilities.FileSize(File);
      Base64File = await Utilities.Base64FromFile(File);
    }
  }
}