adamf/web_server
1
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

allow multiple files to be uploaded to rowing endpoint
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 1m51s
Details

Browse Source
This commit is contained in:
Adam French
2026-03-04 15:26:17 +00:00
parent e25fc5f1d1
commit 88884121ab
1 changed files with 30 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
nginx/vue/src/views/admin/CreateRowing.vue
View File

@@ -3,44 +3,49 @@ import Button from "@/components/input/Button.vue";
import { ref } from "vue"; import { ref } from "vue";
import axios from "axios"; import axios from "axios";
const image = ref(null); const images = ref([]);
const status = ref(""); const results = ref([]);
const error = ref("");
function onFileChange(e) { function onFileChange(e) {
image.value = e.target.files[0] || null; images.value = Array.from(e.target.files);
results.value = [];
} }
async function submit() { 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...";
await Promise.all(
images.value.map(async (file, i) => {
const formData = new FormData(); const formData = new FormData();
formData.append("image", image.value); formData.append("image", file);
try { try {
const res = await axios.post("/api/rowing", formData, { const res = await axios.post("/api/rowing", formData, {
headers: { "Content-Type": "multipart/form-data" }, 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")}`; const mins = Math.floor(res.data.Time / 1e9 / 60);
image.value = null; 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) { } catch (err) {
status.value = ""; results.value[i].status = err.response?.data?.error || "Upload failed";
error.value = err.response?.data?.error || "Upload failed"; results.value[i].ok = false;
} }
})
);
images.value = [];
} }
</script> </script>
<template> <template>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<h1>Create Rowing</h1> <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> <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> </div>
</template> </template>