allow multiple files to be uploaded to rowing endpoint

nginx/vue/src/views/admin/CreateRowing.vue

@@ -3,44 +3,49 @@ import Button from "@/components/input/Button.vue";
 import { ref } from "vue";
 import axios from "axios";
 
-const image = ref(null);
+const images = ref([]);
-const status = ref("");
+const results = ref([]);
-const error = ref("");
 
 function onFileChange(e) {
-    image.value = e.target.files[0] || null;
+    images.value = Array.from(e.target.files);
+    results.value = [];
 }
 
 async function submit() {
-    if (!image.value) {
+    if (!images.value.length) return;
-        error.value = "Please select an image";
+    results.value = images.value.map((f) => ({ name: f.name, status: "Uploading..." }));
-        return;
-    }
-    error.value = "";
-    status.value = "Uploading...";
 
-    const formData = new FormData();
+    await Promise.all(
-    formData.append("image", image.value);
+        images.value.map(async (file, i) => {
+            const formData = new FormData();
+            formData.append("image", file);
+            try {
+                const res = await axios.post("/api/rowing", formData, {
+                    headers: { "Content-Type": "multipart/form-data" },
+                });
+                const mins = Math.floor(res.data.Time / 1e9 / 60);
+                const secs = String(Math.floor((res.data.Time / 1e9) % 60)).padStart(2, "0");
+                results.value[i].status = `${res.data.Distance}m in ${mins}:${secs}`;
+                results.value[i].ok = true;
+            } catch (err) {
+                results.value[i].status = err.response?.data?.error || "Upload failed";
+                results.value[i].ok = false;
+            }
+        })
+    );
 
-    try {
+    images.value = [];
-        const res = await axios.post("/api/rowing", formData, {
-            headers: { "Content-Type": "multipart/form-data" },
-        });
-        status.value = `Saved: ${res.data.Distance}m in ${Math.floor(res.data.Time / 1e9 / 60)}:${String(Math.floor((res.data.Time / 1e9) % 60)).padStart(2, "0")}`;
-        image.value = null;
-    } catch (err) {
-        status.value = "";
-        error.value = err.response?.data?.error || "Upload failed";
-    }
 }
 </script>
 
 <template>
     <div class="flex flex-col gap-2">
         <h1>Create Rowing</h1>
-        <input type="file" accept="image/jpeg,image/png,image/gif,image/webp" @change="onFileChange" />
+        <input type="file" accept="image/jpeg,image/png,image/gif,image/webp" multiple @change="onFileChange" />
         <Button @click="submit">Upload</Button>
-        <p v-if="status">{{ status }}</p>
+        <div v-for="r in results" :key="r.name">
-        <p v-if="error" class="text-red-500">{{ error }}</p>
+            <span>{{ r.name }}: </span>
+            <span :class="r.ok ? '' : 'text-red-500'">{{ r.status }}</span>
+        </div>
     </div>
 </template>