fix(backoffice): Disabling image upload/remove and submit buttons during image upload

Author: Metawolve

src/Eurofurence.App.Backoffice/Components/EventDialog.razor

@@ -54,7 +54,7 @@
                         <MudTooltip>
                             <ChildContent>
                                 <div style="width: 500px;">
-                                    <ImageField ImageResponse="@_bannerImage" ImageChanged="OnBannerImageUploaded" ImageUploadError="OnImageUploadError" />
+                                    <ImageField ImageResponse="@_bannerImage" UploadStarted="OnImageUploadStarted" ImageChanged="OnBannerImageUploaded" ImageUploadError="OnImageUploadError" Disabled="_busy" />
                                 </div>
                             </ChildContent>
                             <TooltipContent>
@@ -69,7 +69,7 @@
                         <MudTooltip>
                             <ChildContent>
                                 <div style="width: 500px;">
-                                    <ImageField ImageResponse="@_posterImage" ImageChanged="OnPosterImageUploaded" ImageUploadError="OnImageUploadError" />
+                                    <ImageField ImageResponse="@_posterImage" UploadStarted="OnImageUploadStarted" ImageChanged="OnPosterImageUploaded" ImageUploadError="OnImageUploadError" Disabled="_busy" />
                                 </div>
                             </ChildContent>
                             <TooltipContent>
@@ -176,30 +176,41 @@
         return null;
     }
 
+    /// <summary>
+    /// Called when an image uploaded is started.
+    /// </summary>
+    private void OnImageUploadStarted()
+    {
+        _busy = true;
+    }
+
     /// <summary>
     /// Called when an error occurs while uploading an image.
     /// </summary>
     private void OnImageUploadError()
     {
+        _busy = false;
         Snackbar.Add("Error uploading image.", Severity.Error);
     }
 
     /// <summary>
-    /// Called when a banner image is uploaded.
+    /// Called when a banner image has been uploaded.
     /// </summary>
     /// <param name="image">The uploaded image.</param>
     private void OnBannerImageUploaded(ImageResponse? image)
     {
+        _busy = false;
         _bannerImage = image;
         Snackbar.Add("Banner image successfully uploaded.", Severity.Success);
     }
 
     /// <summary>
-    /// Called when a poster image is uploaded.
+    /// Called when a poster image has been uploaded.
     /// </summary>
     /// <param name="image">The uploaded image.</param>
     private void OnPosterImageUploaded(ImageResponse? image)
     {
+        _busy = false;
         _posterImage = image;
         Snackbar.Add("Poster image successfully uploaded.", Severity.Success);
     }

src/Eurofurence.App.Backoffice/Components/ImageField.razor

@@ -27,18 +27,18 @@
     {
         <MudGrid>
             <MudItem xl="6" md="6">
-                <MudFileUpload T="IBrowserFile" FilesChanged="UploadImage" Style="margin-top: 10px;" />
+                <MudFileUpload T="IBrowserFile" Disabled="IsUploading || Disabled" FilesChanged="UploadImage" Style="margin-top: 10px;" />
             </MudItem>
             <MudItem xl="6" md="6">
-                <MudButton Variant="Variant.Outlined" Color="Color.Error" OnClick="ClearImage" FullWidth="true" Style="margin-top: 10px;">
+                <MudButton Variant="Variant.Outlined" Color="Color.Error" Disabled="IsUploading || Disabled" OnClick="ClearImage" FullWidth="true" Style="margin-top: 10px;">
                     Remove
                 </MudButton>
             </MudItem>
         </MudGrid>
     }
     else
     {
-        <MudFileUpload T="IBrowserFile" FilesChanged="UploadImage" Style="margin-top: 10px;" />
+        <MudFileUpload T="IBrowserFile" Disabled="IsUploading || Disabled" FilesChanged="UploadImage" Style="margin-top: 10px;" />
     }
 </div>
 
@@ -50,6 +50,12 @@
     [Parameter]
     public ImageResponse? ImageResponse { get; set; }
 
+    /// <summary>
+    /// Event raised when the image upload is started.
+    /// </summary>
+    [Parameter]
+    public EventCallback UploadStarted { get; set; }
+
     /// <summary>
     /// Event raised when the image is changed.
     /// </summary>
@@ -63,6 +69,12 @@
     [Parameter]
     public EventCallback ImageUploadError { get; set; }
 
+    /// <summary>
+    /// Disables upload and remove buttons.
+    /// </summary>
+    [Parameter]
+    public bool Disabled { get; set; }
+
     /// <summary>
     /// Determines whether the remove button should be hidden.
     /// </summary>
@@ -83,6 +95,8 @@
         }
 
         IsUploading = true;
+        await UploadStarted.InvokeAsync();
+
         StateHasChanged();
 
         try