Use Alpine and the API for SAS picture upload

sas/static/bundled/sas/album-index.ts

@@ -7,6 +7,7 @@ import {
   type PicturesFetchPicturesData,
   albumFetchAlbum,
   picturesFetchPictures,
+  picturesUploadPicture,
 } from "#openapi";
 
 interface AlbumPicturesConfig {
@@ -78,4 +79,40 @@ document.addEventListener("alpine:init", () => {
       this.loading = false;
     },
   }));
+
+  Alpine.data("pictureUpload", (albumId: number) => ({
+    errors: [] as string[],
+    pictures: [],
+    sending: false,
+    progress: null as HTMLProgressElement,
+
+    init() {
+      this.progress = this.$refs.progress;
+    },
+
+    async sendPictures() {
+      const input = this.$refs.pictures as HTMLInputElement;
+      const files = input.files;
+      this.progress.value = 0;
+      this.progress.max = files.length;
+      this.sending = true;
+      for (const file of files) {
+        await this.sendPicture(file);
+      }
+      this.sending = false;
+      // This should trigger a reload of the pictures of the `picture` Alpine data
+      this.$dispatch("pictures-upload-done");
+    },
+
+    async sendPicture(file: File) {
+      const res = await picturesUploadPicture({
+        // biome-ignore lint/style/useNamingConvention: api is snake_case
+        body: { album_id: albumId, picture: file },
+      });
+      if (!res.response.ok) {
+        this.errors.push(`${file.name} : ${res.error.detail}`);
+      }
+      this.progress.value += 1;
+    },
+  }));
 });