Fix set-avatar auth flow and API avatar upload stability

src/Yavsc.Org/Views/Manage/SetAvatar.cshtml

@@ -1,9 +1,16 @@
 @model PerformerProfile
 @{ ViewBag.Title = "Edit your avatar"; }
 @{
+    var apiBaseUrl = string.IsNullOrWhiteSpace(SiteSettings.Value.ApiUrl)
+        ? string.Empty
+        : SiteSettings.Value.ApiUrl.TrimEnd('/');
+    var setAvatarUrl = string.IsNullOrEmpty(apiBaseUrl)
+        ? "/api/v1/account/set-avatar"
+        : $"{apiBaseUrl}/api/v1/account/set-avatar";
     var previewAvatarSrc = string.IsNullOrWhiteSpace(User?.Identity?.Name)
         ? Yavsc.Constants.DefaultAvatar
         : $"{Yavsc.Constants.AvatarsPath}/{User.Identity.Name}.png";
+    var accessToken = ViewData["AvatarAccessToken"] as string ?? string.Empty;
 }
 @section header{
 <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
@@ -11,7 +18,12 @@
 }
 @section scripts{
 <script>
-$(document).ready(function() {
+(() => {
+    const bearer = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(accessToken));
+    const uploadUrlBase = "@setAvatarUrl";
+    const uploadUrl = bearer
+        ? uploadUrlBase + (uploadUrlBase.indexOf('?') >= 0 ? '&' : '?') + 'access_token=' + encodeURIComponent(bearer)
+        : uploadUrlBase;
     Dropzone.options.postavatar = {
         maxFilesize: 2, // MB (an avatar)
         autoProcessQueue: true,
@@ -21,14 +33,21 @@ $(document).ready(function() {
             }
             else { done(); }
         },
-        url: "/api/setavatar"
-        };
-  });
+        url: uploadUrl,
+        init: function() {
+            this.on('sending', function(file, xhr) {
+                if (bearer) {
+                    xhr.setRequestHeader('Authorization', 'Bearer ' + bearer);
+                }
+            });
+        }
+    };
+})();
 </script>
 }
 <img src="@previewAvatarSrc">
 
-<form id="postavatar" action="/api/setavatar" class="dropzone" method="post" enctype="multipart/form-data">
+<form id="postavatar" action="@setAvatarUrl" class="dropzone" method="post" enctype="multipart/form-data">
     <div class="fallback">
         <input name="Avatar" type="file" id="Avatar" />
     </div>