From 8743b03488d6e3e401308b185f1e72d2da4cdaf9 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Fri, 16 Aug 2024 18:52:28 -0400
Subject: [PATCH 01/11] add rudimentary upload progress bars

---
 backend/endpoints/responses/rom.py            |  4 +-
 backend/endpoints/rom.py                      | 63 ++++++++++++++-----
 frontend/src/App.vue                          |  3 +-
 .../__generated__/models/AddRomsResponse.ts   |  4 +-
 .../src/components/common/Game/Card/Base.vue  |  1 -
 .../common/Game/Dialog/UploadRom.vue          | 16 ++---
 .../src/components/common/Notification.vue    |  1 -
 .../components/common/UploadInProgress.vue    | 36 +++++++++++
 frontend/src/layouts/NotificationStack.vue    | 23 -------
 frontend/src/services/api/rom.ts              | 33 +++++++++-
 frontend/src/stores/upload.ts                 | 29 +++++++++
 11 files changed, 157 insertions(+), 56 deletions(-)
 create mode 100644 frontend/src/components/common/UploadInProgress.vue
 delete mode 100644 frontend/src/layouts/NotificationStack.vue
 create mode 100644 frontend/src/stores/upload.ts

diff --git a/backend/endpoints/responses/rom.py b/backend/endpoints/responses/rom.py
index 2369d06a6..b1e0956ec 100644
--- a/backend/endpoints/responses/rom.py
+++ b/backend/endpoints/responses/rom.py
@@ -188,8 +188,8 @@ class UserNotesSchema(TypedDict):
 
 
 class AddRomsResponse(TypedDict):
-    uploaded_roms: list[str]
-    skipped_roms: list[str]
+    uploaded_files: list[str]
+    skipped_files: list[str]
 
 
 class CustomStreamingResponse(StreamingResponse):
diff --git a/backend/endpoints/rom.py b/backend/endpoints/rom.py
index e69deab9e..939fd7790 100644
--- a/backend/endpoints/rom.py
+++ b/backend/endpoints/rom.py
@@ -1,3 +1,4 @@
+import os
 from collections.abc import AsyncIterator
 from datetime import datetime
 from shutil import rmtree
@@ -22,12 +23,21 @@
 )
 from exceptions.endpoint_exceptions import RomNotFoundInDatabaseException
 from exceptions.fs_exceptions import RomAlreadyExistsException
-from fastapi import File, HTTPException, Query, Request, UploadFile, status
+from fastapi import (
+    BackgroundTasks,
+    File,
+    HTTPException,
+    Query,
+    Request,
+    UploadFile,
+    status,
+)
 from fastapi.responses import FileResponse
 from handler.database import db_platform_handler, db_rom_handler
 from handler.filesystem import fs_resource_handler, fs_rom_handler
 from handler.filesystem.base_handler import CoverSize
 from handler.metadata import meta_igdb_handler, meta_moby_handler
+from handler.socket_handler import socket_handler
 from logger.logger import log
 from stream_zip import NO_COMPRESSION_32, ZIP_AUTO, AsyncMemberFile, async_stream_zip
 from utils.router import APIRouter
@@ -39,7 +49,8 @@
 async def add_roms(
     request: Request,
     platform_id: int,
-    roms: list[UploadFile] = File(...),  # noqa: B008
+    background_tasks: BackgroundTasks,
+    files: list[UploadFile] = File(...),  # noqa: B008
 ) -> AddRomsResponse:
     """Upload roms endpoint (one or more at the same time)
 
@@ -56,40 +67,58 @@ async def add_roms(
     """
 
     platform_fs_slug = db_platform_handler.get_platform(platform_id).fs_slug
+    roms_path = fs_rom_handler.build_upload_file_path(platform_fs_slug)
+
     log.info(f"Uploading roms to {platform_fs_slug}")
-    if roms is None:
+    if not files:
         log.error("No roms were uploaded")
         raise HTTPException(
             status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
             detail="No roms were uploaded",
         )
 
-    roms_path = fs_rom_handler.build_upload_file_path(platform_fs_slug)
-
-    uploaded_roms = []
-    skipped_roms = []
+    uploaded_files = []
+    skipped_files = []
 
-    for rom in roms:
-        if fs_rom_handler.file_exists(roms_path, rom.filename):
-            log.warning(f" - Skipping {rom.filename} since the file already exists")
-            skipped_roms.append(rom.filename)
+    for file in files:
+        if fs_rom_handler.file_exists(roms_path, file.filename):
+            skipped_files.append(file.filename)
             continue
 
-        log.info(f" - Uploading {rom.filename}")
-        file_location = f"{roms_path}/{rom.filename}"
+        log.info(f" - Uploading {file.filename}")
+        file_location = f"{roms_path}/{file.filename}"
+        file_size = os.fstat(file.file.fileno()).st_size
+        uploaded_size = 0
 
         async with await open_file(file_location, "wb+") as f:
             while True:
-                chunk = rom.file.read(8192)
+                chunk = file.file.read(65536)
                 if not chunk:
                     break
                 await f.write(chunk)
 
-        uploaded_roms.append(rom.filename)
+                uploaded_size += len(chunk)
+                progress = (uploaded_size / file_size) * 100
+                await socket_handler.socket_server.emit(
+                    "upload:in_progress",
+                    {
+                        "name": file.filename,
+                        "progress": progress,
+                    },
+                )
+
+        uploaded_files.append(file.filename)
+
+        await socket_handler.socket_server.emit(
+            "upload:complete",
+            {
+                "name": file.filename,
+            },
+        )
 
     return {
-        "uploaded_roms": uploaded_roms,
-        "skipped_roms": skipped_roms,
+        "uploaded_files": uploaded_files,
+        "skipped_files": skipped_files,
     }
 
 
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 5e38ff7a3..001e2c1ff 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import Notification from "@/components/common/Notification.vue";
+import UploadInProgress from "@/components/common/UploadInProgress.vue";
 import api from "@/services/api/index";
 import userApi from "@/services/api/user";
 import storeAuth from "@/stores/auth";
@@ -40,7 +41,7 @@ onBeforeMount(() => {
   <v-app>
     <v-main>
       <notification />
-      <!-- <notification-stack /> -->
+      <upload-in-progress />
       <router-view />
     </v-main>
   </v-app>
diff --git a/frontend/src/__generated__/models/AddRomsResponse.ts b/frontend/src/__generated__/models/AddRomsResponse.ts
index 4c26473e1..a6569b784 100644
--- a/frontend/src/__generated__/models/AddRomsResponse.ts
+++ b/frontend/src/__generated__/models/AddRomsResponse.ts
@@ -4,7 +4,7 @@
 /* eslint-disable */
 
 export type AddRomsResponse = {
-    uploaded_roms: Array<string>;
-    skipped_roms: Array<string>;
+    uploaded_files: Array<string>;
+    skipped_files: Array<string>;
 };
 
diff --git a/frontend/src/components/common/Game/Card/Base.vue b/frontend/src/components/common/Game/Card/Base.vue
index 3091ea4bc..b9a07d45d 100644
--- a/frontend/src/components/common/Game/Card/Base.vue
+++ b/frontend/src/components/common/Game/Card/Base.vue
@@ -9,7 +9,6 @@ import storeDownload from "@/stores/download";
 import storeGalleryView from "@/stores/galleryView";
 import storeRoms from "@/stores/roms";
 import { type SimpleRom } from "@/stores/roms.js";
-import { storeToRefs } from "pinia";
 import { onMounted, ref } from "vue";
 import { useTheme } from "vuetify";
 
diff --git a/frontend/src/components/common/Game/Dialog/UploadRom.vue b/frontend/src/components/common/Game/Dialog/UploadRom.vue
index 6f669a2cb..b24d6fd0d 100644
--- a/frontend/src/components/common/Game/Dialog/UploadRom.vue
+++ b/frontend/src/components/common/Game/Dialog/UploadRom.vue
@@ -93,11 +93,11 @@ async function uploadRoms() {
   }
 
   const platformId = selectedPlatform.value.id;
-  emitter?.emit("snackbarShow", {
-    msg: `Uploading ${romsToUpload.value.length} roms to ${selectedPlatform.value.name}...`,
-    icon: "mdi-loading mdi-spin",
-    color: "romm-accent-1",
-  });
+  // emitter?.emit("snackbarShow", {
+  //   msg: `Uploading ${romsToUpload.value.length} roms to ${selectedPlatform.value.name}...`,
+  //   icon: "mdi-loading mdi-spin",
+  //   color: "romm-accent-1",
+  // });
 
   await romApi
     .uploadRoms({
@@ -105,9 +105,9 @@ async function uploadRoms() {
       platformId: platformId,
     })
     .then(({ data }) => {
-      const { uploaded_roms, skipped_roms } = data;
+      const { uploaded_files, skipped_files } = data;
 
-      if (uploaded_roms.length == 0) {
+      if (uploaded_files.length == 0) {
         return emitter?.emit("snackbarShow", {
           msg: `All files skipped, nothing to upload.`,
           icon: "mdi-close-circle",
@@ -117,7 +117,7 @@ async function uploadRoms() {
       }
 
       emitter?.emit("snackbarShow", {
-        msg: `${uploaded_roms.length} files uploaded successfully (and ${skipped_roms.length} skipped). Starting scan...`,
+        msg: `${uploaded_files.length} files uploaded successfully (and ${skipped_files.length} skipped). Starting scan...`,
         icon: "mdi-check-bold",
         color: "green",
         timeout: 2000,
diff --git a/frontend/src/components/common/Notification.vue b/frontend/src/components/common/Notification.vue
index 65ddd4868..3d732ebf0 100644
--- a/frontend/src/components/common/Notification.vue
+++ b/frontend/src/components/common/Notification.vue
@@ -17,7 +17,6 @@ emitter?.on("snackbarShow", (snackbar: SnackbarStatus) => {
   show.value = true;
   snackbarStatus.value = snackbar;
   snackbarStatus.value.id = notificationStore.notifications.length + 1;
-  // notificationStore.add(snackbarStatus.value);
 });
 
 function closeDialog() {
diff --git a/frontend/src/components/common/UploadInProgress.vue b/frontend/src/components/common/UploadInProgress.vue
new file mode 100644
index 000000000..13b62dc7d
--- /dev/null
+++ b/frontend/src/components/common/UploadInProgress.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import storeUpload from "@/stores/upload";
+import { ref, watch } from "vue";
+import { useDisplay } from "vuetify";
+import { storeToRefs } from "pinia";
+
+const { xs } = useDisplay();
+const uploadStore = storeUpload();
+const { value: romsList } = storeToRefs(uploadStore);
+const show = ref(false);
+
+watch(romsList, (newList) => {
+  show.value = newList.length > 0;
+});
+</script>
+
+<template>
+  <v-snackbar
+    v-model="show"
+    transition="scroll-y-transition"
+    :timeout="100000000000"
+    absolute
+    :location="xs ? 'bottom' : 'bottom right'"
+    color="tooltip"
+  >
+    <template v-for="rom in romsList">
+      <v-icon icon="mdi-upload" color="white" class="mx-2" />
+      Uploading {{ rom.filename }}
+      <v-progress-linear
+        v-model="rom.progress"
+        height="2"
+        color="romm-accent-1"
+      />
+    </template>
+  </v-snackbar>
+</template>
diff --git a/frontend/src/layouts/NotificationStack.vue b/frontend/src/layouts/NotificationStack.vue
deleted file mode 100644
index 3a17d5a94..000000000
--- a/frontend/src/layouts/NotificationStack.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import Notification from "@/components/common/Notification.vue";
-import storeNotifications from "@/stores/notifications";
-import type { SnackbarStatus } from "@/types/emitter";
-import type { Emitter } from "mitt";
-import { storeToRefs } from "pinia";
-import type { Events } from "@/types/emitter";
-import { inject } from "vue";
-const notificationStore = storeNotifications();
-const { notifications } = storeToRefs(notificationStore);
-const emitter = inject<Emitter<Events>>("emitter");
-emitter?.on("snackbarShow", (snackbar: SnackbarStatus) => {
-  snackbar.id = notificationStore.notifications.length + 1;
-  notificationStore.add(snackbar);
-});
-</script>
-<template>
-  <notification
-    v-for="notification in notifications"
-    :style="{ 'margin-top': `${(notifications.indexOf(notification)+1) * 60}px` }"
-  />
-</template>
-<style scoped></style>
diff --git a/frontend/src/services/api/rom.ts b/frontend/src/services/api/rom.ts
index ea13dfc2a..19f52d1ee 100644
--- a/frontend/src/services/api/rom.ts
+++ b/frontend/src/services/api/rom.ts
@@ -6,11 +6,31 @@ import type {
 import api from "@/services/api/index";
 import socket from "@/services/socket";
 import storeDownload from "@/stores/download";
+import storeUpload from "@/stores/upload";
 import type { DetailedRom, SimpleRom } from "@/stores/roms";
 import { getDownloadLink } from "@/utils";
 
 export const romApi = api;
 
+function clearFileFromUploads({ name }: { name: string }) {
+  const uploadStore = storeUpload();
+  uploadStore.remove(name);
+
+  // Disconnect socket when no more uploads are in progress
+  if (uploadStore.value.length === 0) socket.disconnect();
+}
+
+socket.on("upload:in_progress", ({ name, progress }) => {
+  const uploadStore = storeUpload();
+  uploadStore.update({
+    filename: name,
+    progress,
+  });
+});
+
+// Listen for upload completion events
+socket.on("upload:complete", clearFileFromUploads);
+
 async function uploadRoms({
   platformId,
   romsToUpload,
@@ -18,8 +38,19 @@ async function uploadRoms({
   platformId: number;
   romsToUpload: File[];
 }): Promise<{ data: AddRomsResponse }> {
+  if (!socket.connected) socket.connect();
+  const uploadStore = storeUpload();
+
   const formData = new FormData();
-  romsToUpload.forEach((rom) => formData.append("roms", rom));
+  romsToUpload.forEach((file) => {
+    formData.append("files", file);
+    uploadStore.add(file.name);
+
+    // Clear upload state after 180 seconds in case error/timeout
+    setTimeout(() => {
+      clearFileFromUploads(file);
+    }, 180 * 1000);
+  });
 
   return api.post("/roms", formData, {
     headers: {
diff --git a/frontend/src/stores/upload.ts b/frontend/src/stores/upload.ts
new file mode 100644
index 000000000..024147c0a
--- /dev/null
+++ b/frontend/src/stores/upload.ts
@@ -0,0 +1,29 @@
+import { defineStore } from "pinia";
+
+type UploadingRom = {
+  filename: string;
+  progress: number;
+};
+
+export default defineStore("upload", {
+  state: () => ({
+    value: [] as UploadingRom[],
+  }),
+
+  actions: {
+    add(filename: string) {
+      this.value = [...this.value, { filename, progress: 0 }];
+    },
+    remove(fname: string) {
+      this.value = this.value.filter(({ filename }) => fname !== filename);
+    },
+    update({ filename, progress }: { filename: string; progress: number }) {
+      this.value = this.value.map((rom) =>
+        rom.filename === filename ? { ...rom, progress } : rom,
+      );
+    },
+    clear() {
+      this.value = [] as UploadingRom[];
+    },
+  },
+});

From e9c09b46aab79fc8c8b19536d20b2b5d7b54ab73 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Fri, 16 Aug 2024 20:07:04 -0400
Subject: [PATCH 02/11] better upload progress state

---
 backend/endpoints/rom.py                      |  4 +-
 .../common/Game/Dialog/UploadRom.vue          |  9 ++---
 .../components/common/UploadInProgress.vue    | 40 ++++++++++++++-----
 frontend/src/services/api/rom.ts              | 26 +++++-------
 frontend/src/stores/upload.ts                 |  9 ++---
 5 files changed, 50 insertions(+), 38 deletions(-)

diff --git a/backend/endpoints/rom.py b/backend/endpoints/rom.py
index 939fd7790..af5a10cc1 100644
--- a/backend/endpoints/rom.py
+++ b/backend/endpoints/rom.py
@@ -102,7 +102,7 @@ async def add_roms(
                 await socket_handler.socket_server.emit(
                     "upload:in_progress",
                     {
-                        "name": file.filename,
+                        "filename": file.filename,
                         "progress": progress,
                     },
                 )
@@ -112,7 +112,7 @@ async def add_roms(
         await socket_handler.socket_server.emit(
             "upload:complete",
             {
-                "name": file.filename,
+                "filename": file.filename,
             },
         )
 
diff --git a/frontend/src/components/common/Game/Dialog/UploadRom.vue b/frontend/src/components/common/Game/Dialog/UploadRom.vue
index b24d6fd0d..052711e8d 100644
--- a/frontend/src/components/common/Game/Dialog/UploadRom.vue
+++ b/frontend/src/components/common/Game/Dialog/UploadRom.vue
@@ -6,6 +6,7 @@ import romApi from "@/services/api/rom";
 import socket from "@/services/socket";
 import storeHeartbeat from "@/stores/heartbeat";
 import { type Platform } from "@/stores/platforms";
+import storeUpload from "@/stores/upload";
 import storeScanning from "@/stores/scanning";
 import type { Events } from "@/types/emitter";
 import { formatBytes } from "@/utils";
@@ -21,6 +22,7 @@ const scanningStore = storeScanning();
 const selectedPlatform = ref<Platform | null>(null);
 const supportedPlatforms = ref<Platform[]>();
 const heartbeat = storeHeartbeat();
+const uploadStore = storeUpload();
 const HEADERS = [
   {
     title: "Name",
@@ -93,11 +95,6 @@ async function uploadRoms() {
   }
 
   const platformId = selectedPlatform.value.id;
-  // emitter?.emit("snackbarShow", {
-  //   msg: `Uploading ${romsToUpload.value.length} roms to ${selectedPlatform.value.name}...`,
-  //   icon: "mdi-loading mdi-spin",
-  //   color: "romm-accent-1",
-  // });
 
   await romApi
     .uploadRoms({
@@ -123,6 +120,8 @@ async function uploadRoms() {
         timeout: 2000,
       });
 
+      uploadStore.clear();
+
       if (!socket.connected) socket.connect();
       setTimeout(() => {
         socket.emit("scan", {
diff --git a/frontend/src/components/common/UploadInProgress.vue b/frontend/src/components/common/UploadInProgress.vue
index 13b62dc7d..32fea7ac1 100644
--- a/frontend/src/components/common/UploadInProgress.vue
+++ b/frontend/src/components/common/UploadInProgress.vue
@@ -16,21 +16,43 @@ watch(romsList, (newList) => {
 
 <template>
   <v-snackbar
+    id="upload-in-progress"
     v-model="show"
     transition="scroll-y-transition"
     :timeout="100000000000"
     absolute
     :location="xs ? 'bottom' : 'bottom right'"
+    class="mb-4 mr-4"
     color="tooltip"
   >
-    <template v-for="rom in romsList">
-      <v-icon icon="mdi-upload" color="white" class="mx-2" />
-      Uploading {{ rom.filename }}
-      <v-progress-linear
-        v-model="rom.progress"
-        height="2"
-        color="romm-accent-1"
-      />
-    </template>
+    <v-list>
+      <v-list-item
+        v-for="rom in romsList"
+        class="py-2 px-4"
+        :disabled="rom.finished"
+      >
+        <v-list-item-title class="d-flex">
+          <v-icon
+            :icon="rom.finished ? `mdi-check` : `mdi-loading mdi-spin`"
+            :color="rom.finished ? `green` : `white`"
+            class="mx-2"
+          />
+          {{ rom.filename }}...
+        </v-list-item-title>
+        <v-progress-linear
+          v-if="!rom.finished"
+          v-model="rom.progress"
+          height="4"
+          color="white"
+          class="mt-2"
+        />
+      </v-list-item>
+    </v-list>
   </v-snackbar>
 </template>
+
+<style>
+#upload-in-progress .v-snackbar__content {
+  padding: 0;
+}
+</style>
diff --git a/frontend/src/services/api/rom.ts b/frontend/src/services/api/rom.ts
index 19f52d1ee..693b392f0 100644
--- a/frontend/src/services/api/rom.ts
+++ b/frontend/src/services/api/rom.ts
@@ -12,24 +12,21 @@ import { getDownloadLink } from "@/utils";
 
 export const romApi = api;
 
-function clearFileFromUploads({ name }: { name: string }) {
-  const uploadStore = storeUpload();
-  uploadStore.remove(name);
-
-  // Disconnect socket when no more uploads are in progress
-  if (uploadStore.value.length === 0) socket.disconnect();
-}
-
-socket.on("upload:in_progress", ({ name, progress }) => {
+socket.on("upload:in_progress", ({ filename, progress }) => {
   const uploadStore = storeUpload();
   uploadStore.update({
-    filename: name,
+    filename,
     progress,
   });
 });
 
-// Listen for upload completion events
-socket.on("upload:complete", clearFileFromUploads);
+socket.on("upload:complete", ({ filename }) => {
+  const uploadStore = storeUpload();
+  uploadStore.update({
+    filename,
+    progress: 100,
+  });
+});
 
 async function uploadRoms({
   platformId,
@@ -45,11 +42,6 @@ async function uploadRoms({
   romsToUpload.forEach((file) => {
     formData.append("files", file);
     uploadStore.add(file.name);
-
-    // Clear upload state after 180 seconds in case error/timeout
-    setTimeout(() => {
-      clearFileFromUploads(file);
-    }, 180 * 1000);
   });
 
   return api.post("/roms", formData, {
diff --git a/frontend/src/stores/upload.ts b/frontend/src/stores/upload.ts
index 024147c0a..5fff52fc8 100644
--- a/frontend/src/stores/upload.ts
+++ b/frontend/src/stores/upload.ts
@@ -3,23 +3,22 @@ import { defineStore } from "pinia";
 type UploadingRom = {
   filename: string;
   progress: number;
+  finished?: boolean;
 };
 
 export default defineStore("upload", {
   state: () => ({
     value: [] as UploadingRom[],
   }),
-
   actions: {
     add(filename: string) {
       this.value = [...this.value, { filename, progress: 0 }];
     },
-    remove(fname: string) {
-      this.value = this.value.filter(({ filename }) => fname !== filename);
-    },
     update({ filename, progress }: { filename: string; progress: number }) {
       this.value = this.value.map((rom) =>
-        rom.filename === filename ? { ...rom, progress } : rom,
+        rom.filename === filename
+          ? { ...rom, progress, finished: Math.ceil(progress) === 100 }
+          : rom,
       );
     },
     clear() {

From 4fb19b3b59e8e7226e053af986eaafcf6affea98 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Fri, 16 Aug 2024 20:11:26 -0400
Subject: [PATCH 03/11] fix uploading dups

---
 .trunk/trunk.yaml                                      | 10 +++++-----
 backend/endpoints/rom.py                               |  2 +-
 .../src/components/common/Game/Dialog/UploadRom.vue    |  8 ++++----
 frontend/src/components/common/UploadInProgress.vue    |  2 +-
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/.trunk/trunk.yaml b/.trunk/trunk.yaml
index 0f939ce01..ff49302e9 100644
--- a/.trunk/trunk.yaml
+++ b/.trunk/trunk.yaml
@@ -2,7 +2,7 @@
 # To learn more about the format of this file, see https://docs.trunk.io/reference/trunk-yaml
 version: 0.1
 cli:
-  version: 1.22.2
+  version: 1.22.3
 # Trunk provides extensibility via plugins. (https://docs.trunk.io/plugins)
 plugins:
   sources:
@@ -19,24 +19,24 @@ runtimes:
 lint:
   enabled:
     - markdownlint@0.41.0
-    - eslint@9.8.0
+    - eslint@9.9.0
     - actionlint@1.7.1
     - bandit@1.7.9
     - black@24.8.0
-    - checkov@3.2.219
+    - checkov@3.2.228
     - git-diff-check
     - isort@5.13.2
     - mypy@1.11.1
     - osv-scanner@1.8.3
     - oxipng@9.1.2
     - prettier@3.3.3
-    - ruff@0.5.7
+    - ruff@0.6.0
     - shellcheck@0.10.0
     - shfmt@3.6.0
     - svgo@3.3.2
     - taplo@0.9.3
     - trivy@0.54.1
-    - trufflehog@3.81.7
+    - trufflehog@3.81.9
     - yamllint@1.35.1
   ignore:
     - linters: [ALL]
diff --git a/backend/endpoints/rom.py b/backend/endpoints/rom.py
index af5a10cc1..b40e5f6f5 100644
--- a/backend/endpoints/rom.py
+++ b/backend/endpoints/rom.py
@@ -81,7 +81,7 @@ async def add_roms(
     skipped_files = []
 
     for file in files:
-        if fs_rom_handler.file_exists(roms_path, file.filename):
+        if bool(os.path.exists(f"{roms_path}/{file.filename}")):
             skipped_files.append(file.filename)
             continue
 
diff --git a/frontend/src/components/common/Game/Dialog/UploadRom.vue b/frontend/src/components/common/Game/Dialog/UploadRom.vue
index 052711e8d..084962250 100644
--- a/frontend/src/components/common/Game/Dialog/UploadRom.vue
+++ b/frontend/src/components/common/Game/Dialog/UploadRom.vue
@@ -102,6 +102,8 @@ async function uploadRoms() {
       platformId: platformId,
     })
     .then(({ data }) => {
+      uploadStore.clear();
+
       const { uploaded_files, skipped_files } = data;
 
       if (uploaded_files.length == 0) {
@@ -109,7 +111,7 @@ async function uploadRoms() {
           msg: `All files skipped, nothing to upload.`,
           icon: "mdi-close-circle",
           color: "orange",
-          timeout: 2000,
+          timeout: 5000,
         });
       }
 
@@ -117,11 +119,9 @@ async function uploadRoms() {
         msg: `${uploaded_files.length} files uploaded successfully (and ${skipped_files.length} skipped). Starting scan...`,
         icon: "mdi-check-bold",
         color: "green",
-        timeout: 2000,
+        timeout: 3000,
       });
 
-      uploadStore.clear();
-
       if (!socket.connected) socket.connect();
       setTimeout(() => {
         socket.emit("scan", {
diff --git a/frontend/src/components/common/UploadInProgress.vue b/frontend/src/components/common/UploadInProgress.vue
index 32fea7ac1..7bc541f62 100644
--- a/frontend/src/components/common/UploadInProgress.vue
+++ b/frontend/src/components/common/UploadInProgress.vue
@@ -37,7 +37,7 @@ watch(romsList, (newList) => {
             :color="rom.finished ? `green` : `white`"
             class="mx-2"
           />
-          {{ rom.filename }}...
+          {{ rom.filename }}
         </v-list-item-title>
         <v-progress-linear
           v-if="!rom.finished"

From 6c2f221b52a8f3c41c82734a1762a69e6975d1d4 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Fri, 16 Aug 2024 20:49:12 -0400
Subject: [PATCH 04/11] better progress up with speeds

---
 backend/endpoints/rom.py                      |  8 ++-
 .../components/common/UploadInProgress.vue    | 32 +++++++----
 frontend/src/services/api/rom.ts              | 23 ++++----
 frontend/src/stores/upload.ts                 | 53 ++++++++++++++++---
 4 files changed, 86 insertions(+), 30 deletions(-)

diff --git a/backend/endpoints/rom.py b/backend/endpoints/rom.py
index b40e5f6f5..59f4a9400 100644
--- a/backend/endpoints/rom.py
+++ b/backend/endpoints/rom.py
@@ -89,6 +89,7 @@ async def add_roms(
         file_location = f"{roms_path}/{file.filename}"
         file_size = os.fstat(file.file.fileno()).st_size
         uploaded_size = 0
+        start_time = datetime.now().timestamp()
 
         async with await open_file(file_location, "wb+") as f:
             while True:
@@ -98,12 +99,15 @@ async def add_roms(
                 await f.write(chunk)
 
                 uploaded_size += len(chunk)
-                progress = (uploaded_size / file_size) * 100
                 await socket_handler.socket_server.emit(
                     "upload:in_progress",
                     {
                         "filename": file.filename,
-                        "progress": progress,
+                        "file_size": file_size,
+                        "uploaded_size": uploaded_size,
+                        "upload_speed": round(
+                            uploaded_size / (datetime.now().timestamp() - start_time)
+                        ),
                     },
                 )
 
diff --git a/frontend/src/components/common/UploadInProgress.vue b/frontend/src/components/common/UploadInProgress.vue
index 7bc541f62..d7f98da22 100644
--- a/frontend/src/components/common/UploadInProgress.vue
+++ b/frontend/src/components/common/UploadInProgress.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import storeUpload from "@/stores/upload";
+import { formatBytes } from "@/utils";
 import { ref, watch } from "vue";
 import { useDisplay } from "vuetify";
 import { storeToRefs } from "pinia";
@@ -31,21 +32,30 @@ watch(romsList, (newList) => {
         class="py-2 px-4"
         :disabled="rom.finished"
       >
-        <v-list-item-title class="d-flex">
+        <v-list-item-title class="d-flex justify-space-between">
+          {{ rom.filename }}
           <v-icon
             :icon="rom.finished ? `mdi-check` : `mdi-loading mdi-spin`"
             :color="rom.finished ? `green` : `white`"
             class="mx-2"
           />
-          {{ rom.filename }}
         </v-list-item-title>
-        <v-progress-linear
-          v-if="!rom.finished"
-          v-model="rom.progress"
-          height="4"
-          color="white"
-          class="mt-2"
-        />
+        <template v-if="rom.progress > 0">
+          <v-progress-linear
+            v-if="!rom.finished"
+            v-model="rom.progress"
+            height="4"
+            color="white"
+            class="mt-2"
+          />
+          <div class="upload-speeds d-flex justify-space-between mt-1">
+            <div>{{ formatBytes(rom.upload_speed) }}/s</div>
+            <div>
+              {{ formatBytes(rom.uploaded_size) }} /
+              {{ formatBytes(rom.file_size) }}
+            </div>
+          </div>
+        </template>
       </v-list-item>
     </v-list>
   </v-snackbar>
@@ -55,4 +65,8 @@ watch(romsList, (newList) => {
 #upload-in-progress .v-snackbar__content {
   padding: 0;
 }
+
+.upload-speeds {
+  font-size: 10px;
+}
 </style>
diff --git a/frontend/src/services/api/rom.ts b/frontend/src/services/api/rom.ts
index 693b392f0..eddb266be 100644
--- a/frontend/src/services/api/rom.ts
+++ b/frontend/src/services/api/rom.ts
@@ -12,20 +12,21 @@ import { getDownloadLink } from "@/utils";
 
 export const romApi = api;
 
-socket.on("upload:in_progress", ({ filename, progress }) => {
-  const uploadStore = storeUpload();
-  uploadStore.update({
-    filename,
-    progress,
-  });
-});
+socket.on(
+  "upload:in_progress",
+  ({ filename, file_size, uploaded_size, upload_speed }) => {
+    const uploadStore = storeUpload();
+    uploadStore.update(filename, {
+      file_size,
+      uploaded_size,
+      upload_speed,
+    });
+  },
+);
 
 socket.on("upload:complete", ({ filename }) => {
   const uploadStore = storeUpload();
-  uploadStore.update({
-    filename,
-    progress: 100,
-  });
+  uploadStore.markComplete(filename);
 });
 
 async function uploadRoms({
diff --git a/frontend/src/stores/upload.ts b/frontend/src/stores/upload.ts
index 5fff52fc8..3750d9384 100644
--- a/frontend/src/stores/upload.ts
+++ b/frontend/src/stores/upload.ts
@@ -1,10 +1,17 @@
 import { defineStore } from "pinia";
 
-type UploadingRom = {
-  filename: string;
-  progress: number;
-  finished?: boolean;
-};
+class UploadingRom {
+  filename = "";
+  progress = 0;
+  file_size = 0;
+  uploaded_size = 0;
+  upload_speed = 0;
+  finished = false;
+
+  constructor(data: Partial<UploadingRom>) {
+    Object.assign(this, data);
+  }
+}
 
 export default defineStore("upload", {
   state: () => ({
@@ -12,12 +19,42 @@ export default defineStore("upload", {
   }),
   actions: {
     add(filename: string) {
-      this.value = [...this.value, { filename, progress: 0 }];
+      this.value = [...this.value, new UploadingRom({ filename })];
+    },
+    update(
+      filename: string,
+      {
+        file_size,
+        uploaded_size,
+        upload_speed,
+      }: {
+        file_size: number;
+        uploaded_size: number;
+        upload_speed: number;
+      },
+    ) {
+      this.value = this.value.map((rom) =>
+        rom.filename === filename
+          ? {
+              ...rom,
+              file_size,
+              uploaded_size,
+              upload_speed,
+              progress: (uploaded_size / file_size) * 100,
+              finished: uploaded_size === file_size,
+            }
+          : rom,
+      );
     },
-    update({ filename, progress }: { filename: string; progress: number }) {
+    markComplete(filename: string) {
       this.value = this.value.map((rom) =>
         rom.filename === filename
-          ? { ...rom, progress, finished: Math.ceil(progress) === 100 }
+          ? {
+              ...rom,
+              progress: 100,
+              upload_speed: 0,
+              finished: true,
+            }
           : rom,
       );
     },

From 65ffa44b8a058fe6011f50d414f19f98a6a1a244 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Fri, 16 Aug 2024 21:01:11 -0400
Subject: [PATCH 05/11] tweaks

---
 frontend/src/components/common/UploadInProgress.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/common/UploadInProgress.vue b/frontend/src/components/common/UploadInProgress.vue
index d7f98da22..d649d25ef 100644
--- a/frontend/src/components/common/UploadInProgress.vue
+++ b/frontend/src/components/common/UploadInProgress.vue
@@ -40,13 +40,12 @@ watch(romsList, (newList) => {
             class="mx-2"
           />
         </v-list-item-title>
-        <template v-if="rom.progress > 0">
+        <template v-if="rom.progress > 0 && !rom.finished">
           <v-progress-linear
-            v-if="!rom.finished"
             v-model="rom.progress"
             height="4"
             color="white"
-            class="mt-2"
+            class="mt-1"
           />
           <div class="upload-speeds d-flex justify-space-between mt-1">
             <div>{{ formatBytes(rom.upload_speed) }}/s</div>

From 2d727699f83fe95e8dfeabb719a3f57b7580d81d Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Fri, 16 Aug 2024 23:54:31 -0400
Subject: [PATCH 06/11] speed improvements

---
 backend/endpoints/rom.py                      | 35 +++++++++++--------
 .../models/Body_add_roms_api_roms_post.ts     |  2 +-
 poetry.lock                                   |  1 -
 3 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/backend/endpoints/rom.py b/backend/endpoints/rom.py
index 73fc1d249..4915cc00b 100644
--- a/backend/endpoints/rom.py
+++ b/backend/endpoints/rom.py
@@ -81,12 +81,14 @@ async def add_roms(
     skipped_files = []
 
     for file in files:
-        if bool(os.path.exists(f"{roms_path}/{file.filename}")):
+        file_location = f"{roms_path}/{file.filename}"
+
+        if await Path(file_location).exists():
+            log.warning(f" - Skipping {file.filename} since the file already exists")
             skipped_files.append(file.filename)
             continue
 
         log.info(f" - Uploading {file.filename}")
-        file_location = f"{roms_path}/{file.filename}"
         file_size = os.fstat(file.file.fileno()).st_size
         uploaded_size = 0
         start_time = datetime.now().timestamp()
@@ -97,22 +99,25 @@ async def add_roms(
                 if not chunk:
                     break
                 await f.write(chunk)
-
                 uploaded_size += len(chunk)
-                await socket_handler.socket_server.emit(
-                    "upload:in_progress",
-                    {
-                        "filename": file.filename,
-                        "file_size": file_size,
-                        "uploaded_size": uploaded_size,
-                        "upload_speed": round(
-                            uploaded_size / (datetime.now().timestamp() - start_time)
-                        ),
-                    },
-                )
 
-        uploaded_files.append(file.filename)
+                # Emit progress update roughly every 1 MB uploaded
+                if uploaded_size % (1024 * 1024 * 1) == 0 or uploaded_size == file_size:
+                    elapsed_time = datetime.now().timestamp() - start_time
+                    upload_speed = (
+                        round(uploaded_size / elapsed_time) if elapsed_time > 0 else 0
+                    )
+                    await socket_handler.socket_server.emit(
+                        "upload:in_progress",
+                        {
+                            "filename": file.filename,
+                            "file_size": file_size,
+                            "uploaded_size": uploaded_size,
+                            "upload_speed": upload_speed,
+                        },
+                    )
 
+        uploaded_files.append(file.filename)
         await socket_handler.socket_server.emit(
             "upload:complete",
             {
diff --git a/frontend/src/__generated__/models/Body_add_roms_api_roms_post.ts b/frontend/src/__generated__/models/Body_add_roms_api_roms_post.ts
index 084f97f00..78f972609 100644
--- a/frontend/src/__generated__/models/Body_add_roms_api_roms_post.ts
+++ b/frontend/src/__generated__/models/Body_add_roms_api_roms_post.ts
@@ -4,6 +4,6 @@
 /* eslint-disable */
 
 export type Body_add_roms_api_roms_post = {
-    roms: Array<Blob>;
+    files: Array<Blob>;
 };
 
diff --git a/poetry.lock b/poetry.lock
index 61cfd2f60..9926bc1aa 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -2189,7 +2189,6 @@ files = [
     {file = "PyYAML-6.0.1-cp311-cp311-win_amd64.whl", hash = "sha256:bf07ee2fef7014951eeb99f56f39c9bb4af143d8aa3c21b1677805985307da34"},
     {file = "PyYAML-6.0.1-cp312-cp312-macosx_10_9_x86_64.whl", hash = "sha256:855fb52b0dc35af121542a76b9a84f8d1cd886ea97c84703eaa6d88e37a2ad28"},
     {file = "PyYAML-6.0.1-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:40df9b996c2b73138957fe23a16a4f0ba614f4c0efce1e9406a184b6d07fa3a9"},
-    {file = "PyYAML-6.0.1-cp312-cp312-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:a08c6f0fe150303c1c6b71ebcd7213c2858041a7e01975da3a99aed1e7a378ef"},
     {file = "PyYAML-6.0.1-cp312-cp312-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:6c22bec3fbe2524cde73d7ada88f6566758a8f7227bfbf93a408a9d86bcc12a0"},
     {file = "PyYAML-6.0.1-cp312-cp312-musllinux_1_1_x86_64.whl", hash = "sha256:8d4e9c88387b0f5c7d5f281e55304de64cf7f9c0021a3525bd3b1c542da3b0e4"},
     {file = "PyYAML-6.0.1-cp312-cp312-win32.whl", hash = "sha256:d483d2cdf104e7c9fa60c544d92981f12ad66a457afae824d146093b8c294c54"},

From a071c0a487678e5f74f745480b5a211cd18c8574 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Sat, 17 Aug 2024 11:50:14 -0400
Subject: [PATCH 07/11] actual real upload streaming

---
 backend/endpoints/responses/rom.py            |   2 +-
 backend/endpoints/rom.py                      | 132 ++++++++----------
 frontend/src/__generated__/index.ts           |   3 +-
 .../models/Body_add_roms_api_roms_post.ts     |   9 --
 ...dRomsResponse.ts => UploadRomsResponse.ts} |   2 +-
 .../components/common/UploadInProgress.vue    |  50 ++++---
 frontend/src/services/api/rom.ts              |  38 ++---
 frontend/src/stores/upload.ts                 |  77 ++++------
 poetry.lock                                   |  68 ++++++++-
 pyproject.toml                                |   1 +
 10 files changed, 200 insertions(+), 182 deletions(-)
 delete mode 100644 frontend/src/__generated__/models/Body_add_roms_api_roms_post.ts
 rename frontend/src/__generated__/models/{AddRomsResponse.ts => UploadRomsResponse.ts} (85%)

diff --git a/backend/endpoints/responses/rom.py b/backend/endpoints/responses/rom.py
index 352af85f1..a8180174c 100644
--- a/backend/endpoints/responses/rom.py
+++ b/backend/endpoints/responses/rom.py
@@ -186,7 +186,7 @@ class UserNotesSchema(TypedDict):
     note_raw_markdown: str
 
 
-class AddRomsResponse(TypedDict):
+class UploadRomsResponse(TypedDict):
     uploaded_files: list[str]
     skipped_files: list[str]
 
diff --git a/backend/endpoints/rom.py b/backend/endpoints/rom.py
index 4915cc00b..15f702056 100644
--- a/backend/endpoints/rom.py
+++ b/backend/endpoints/rom.py
@@ -1,4 +1,3 @@
-import os
 from collections.abc import AsyncIterator
 from datetime import datetime
 from shutil import rmtree
@@ -15,31 +14,25 @@
 from decorators.auth import protected_route
 from endpoints.responses import MessageResponse
 from endpoints.responses.rom import (
-    AddRomsResponse,
     CustomStreamingResponse,
     DetailedRomSchema,
     RomUserSchema,
     SimpleRomSchema,
+    UploadRomsResponse,
 )
 from exceptions.endpoint_exceptions import RomNotFoundInDatabaseException
 from exceptions.fs_exceptions import RomAlreadyExistsException
-from fastapi import (
-    BackgroundTasks,
-    File,
-    HTTPException,
-    Query,
-    Request,
-    UploadFile,
-    status,
-)
-from fastapi.responses import Response
+from fastapi import HTTPException, Query, Request, UploadFile, status
+from fastapi.responses import JSONResponse, Response
 from handler.database import db_platform_handler, db_rom_handler
 from handler.filesystem import fs_resource_handler, fs_rom_handler
 from handler.filesystem.base_handler import CoverSize
 from handler.metadata import meta_igdb_handler, meta_moby_handler
-from handler.socket_handler import socket_handler
 from logger.logger import log
+from starlette.requests import ClientDisconnect
 from stream_zip import NO_COMPRESSION_64, ZIP_AUTO, AsyncMemberFile, async_stream_zip
+from streaming_form_data import StreamingFormDataParser
+from streaming_form_data.targets import FileTarget, NullTarget
 from utils.router import APIRouter
 
 router = APIRouter()
@@ -48,87 +41,82 @@
 @protected_route(router.post, "/roms", ["roms.write"])
 async def add_roms(
     request: Request,
-    platform_id: int,
-    background_tasks: BackgroundTasks,
-    files: list[UploadFile] = File(...),  # noqa: B008
-) -> AddRomsResponse:
+) -> UploadRomsResponse:
     """Upload roms endpoint (one or more at the same time)
 
     Args:
         request (Request): Fastapi Request object
-        platform_slug (str): Slug of the platform where to upload the roms
-        roms (list[UploadFile], optional): List of files to upload. Defaults to File(...).
 
     Raises:
         HTTPException: No files were uploaded
 
     Returns:
-        AddRomsResponse: Standard message response
+        UploadRomsResponse: Standard message response
     """
+    platform_id = int(request.headers.get("x-upload-platform", None))
+    if not platform_id:
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail="No platform ID provided",
+        )
 
     platform_fs_slug = db_platform_handler.get_platform(platform_id).fs_slug
     roms_path = fs_rom_handler.build_upload_file_path(platform_fs_slug)
-
     log.info(f"Uploading roms to {platform_fs_slug}")
-    if not files:
-        log.error("No roms were uploaded")
-        raise HTTPException(
-            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
-            detail="No roms were uploaded",
-        )
 
-    uploaded_files = []
-    skipped_files = []
+    parser = StreamingFormDataParser(headers=request.headers)
+    parser.register("x-upload-platform", NullTarget())
+    parser.register("x-upload-filenames", NullTarget())
 
-    for file in files:
-        file_location = f"{roms_path}/{file.filename}"
+    skipped_files = []
+    uploaded_files = []
 
+    filenames = request.headers.get("x-upload-filenames", "").split(",")
+    for name in filenames:
+        file_location = f"{roms_path}/{name}"
         if await Path(file_location).exists():
-            log.warning(f" - Skipping {file.filename} since the file already exists")
-            skipped_files.append(file.filename)
+            log.warning(f" - Skipping {name} since the file already exists")
+            skipped_files.append(name)
             continue
+        else:
+            uploaded_files.append(name)
 
-        log.info(f" - Uploading {file.filename}")
-        file_size = os.fstat(file.file.fileno()).st_size
-        uploaded_size = 0
-        start_time = datetime.now().timestamp()
-
-        async with await open_file(file_location, "wb+") as f:
-            while True:
-                chunk = file.file.read(65536)
-                if not chunk:
-                    break
-                await f.write(chunk)
-                uploaded_size += len(chunk)
-
-                # Emit progress update roughly every 1 MB uploaded
-                if uploaded_size % (1024 * 1024 * 1) == 0 or uploaded_size == file_size:
-                    elapsed_time = datetime.now().timestamp() - start_time
-                    upload_speed = (
-                        round(uploaded_size / elapsed_time) if elapsed_time > 0 else 0
-                    )
-                    await socket_handler.socket_server.emit(
-                        "upload:in_progress",
-                        {
-                            "filename": file.filename,
-                            "file_size": file_size,
-                            "uploaded_size": uploaded_size,
-                            "upload_speed": upload_speed,
-                        },
-                    )
-
-        uploaded_files.append(file.filename)
-        await socket_handler.socket_server.emit(
-            "upload:complete",
-            {
-                "filename": file.filename,
-            },
+        parser.register(name, FileTarget(f"{roms_path}/{name}"))
+
+    if not filenames:
+        log.error("No files were uploaded")
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail="No files were uploaded",
         )
 
-    return {
-        "uploaded_files": uploaded_files,
-        "skipped_files": skipped_files,
-    }
+    async def cleanup_partial_files():
+        for name in filenames:
+            file_location = f"{roms_path}/{name}"
+            if await Path(file_location).exists():
+                await Path(file_location).unlink()
+
+    try:
+        async for chunk in request.stream():
+            parser.data_received(chunk)
+    except ClientDisconnect:
+        log.error("Client disconnected during upload")
+        await cleanup_partial_files()
+    except Exception as exc:
+        log.error("Error uploading files", exc_info=exc)
+        await cleanup_partial_files()
+
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail="There was an error uploading the file(s)",
+        )
+
+    return JSONResponse(
+        {
+            "uploaded_files": uploaded_files,
+            "skipped_files": skipped_files,
+        }
+    )
 
 
 @protected_route(router.get, "/roms", ["roms.read"])
diff --git a/frontend/src/__generated__/index.ts b/frontend/src/__generated__/index.ts
index 72f0f2efa..0d6c8a583 100644
--- a/frontend/src/__generated__/index.ts
+++ b/frontend/src/__generated__/index.ts
@@ -4,10 +4,8 @@
 /* eslint-disable */
 
 export type { AddFirmwareResponse } from './models/AddFirmwareResponse';
-export type { AddRomsResponse } from './models/AddRomsResponse';
 export type { Body_add_collection_api_collections_post } from './models/Body_add_collection_api_collections_post';
 export type { Body_add_firmware_api_firmware_post } from './models/Body_add_firmware_api_firmware_post';
-export type { Body_add_roms_api_roms_post } from './models/Body_add_roms_api_roms_post';
 export type { Body_add_saves_api_saves_post } from './models/Body_add_saves_api_saves_post';
 export type { Body_add_screenshots_api_screenshots_post } from './models/Body_add_screenshots_api_screenshots_post';
 export type { Body_add_states_api_states_post } from './models/Body_add_states_api_states_post';
@@ -48,6 +46,7 @@ export type { TokenResponse } from './models/TokenResponse';
 export type { UploadedSavesResponse } from './models/UploadedSavesResponse';
 export type { UploadedScreenshotsResponse } from './models/UploadedScreenshotsResponse';
 export type { UploadedStatesResponse } from './models/UploadedStatesResponse';
+export type { UploadRomsResponse } from './models/UploadRomsResponse';
 export type { UserNotesSchema } from './models/UserNotesSchema';
 export type { UserSchema } from './models/UserSchema';
 export type { ValidationError } from './models/ValidationError';
diff --git a/frontend/src/__generated__/models/Body_add_roms_api_roms_post.ts b/frontend/src/__generated__/models/Body_add_roms_api_roms_post.ts
deleted file mode 100644
index 78f972609..000000000
--- a/frontend/src/__generated__/models/Body_add_roms_api_roms_post.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/* generated using openapi-typescript-codegen -- do no edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-
-export type Body_add_roms_api_roms_post = {
-    files: Array<Blob>;
-};
-
diff --git a/frontend/src/__generated__/models/AddRomsResponse.ts b/frontend/src/__generated__/models/UploadRomsResponse.ts
similarity index 85%
rename from frontend/src/__generated__/models/AddRomsResponse.ts
rename to frontend/src/__generated__/models/UploadRomsResponse.ts
index a6569b784..a8d0cc439 100644
--- a/frontend/src/__generated__/models/AddRomsResponse.ts
+++ b/frontend/src/__generated__/models/UploadRomsResponse.ts
@@ -3,7 +3,7 @@
 /* tslint:disable */
 /* eslint-disable */
 
-export type AddRomsResponse = {
+export type UploadRomsResponse = {
     uploaded_files: Array<string>;
     skipped_files: Array<string>;
 };
diff --git a/frontend/src/components/common/UploadInProgress.vue b/frontend/src/components/common/UploadInProgress.vue
index d649d25ef..2c5bc3162 100644
--- a/frontend/src/components/common/UploadInProgress.vue
+++ b/frontend/src/components/common/UploadInProgress.vue
@@ -7,11 +7,12 @@ import { storeToRefs } from "pinia";
 
 const { xs } = useDisplay();
 const uploadStore = storeUpload();
-const { value: romsList } = storeToRefs(uploadStore);
+const { filenames, progress, total, loaded, rate, finished } =
+  storeToRefs(uploadStore);
 const show = ref(false);
 
-watch(romsList, (newList) => {
-  show.value = newList.length > 0;
+watch(filenames, (fns) => {
+  show.value = fns.length > 0;
 });
 </script>
 
@@ -27,31 +28,38 @@ watch(romsList, (newList) => {
     color="tooltip"
   >
     <v-list>
-      <v-list-item
-        v-for="rom in romsList"
-        class="py-2 px-4"
-        :disabled="rom.finished"
-      >
-        <v-list-item-title class="d-flex justify-space-between">
-          {{ rom.filename }}
-          <v-icon
-            :icon="rom.finished ? `mdi-check` : `mdi-loading mdi-spin`"
-            :color="rom.finished ? `green` : `white`"
-            class="mx-2"
-          />
+        <v-list-item-title  class="py-2 px-4 d-flex justify-space-between">
+          Uploading {{ filenames.length }} files...
+          <v-icon icon="mdi-loading mdi-spin" color="white" class="mx-2"/>
+        </v-list-item-title>
+      <v-list-item class="py-1 px-4">
+        <v-list-item-title v-for="filename in filenames" class="d-flex justify-space-between">
+          <div class="upload-speeds">
+            • {{ filename }}
+          </div>
         </v-list-item-title>
-        <template v-if="rom.progress > 0 && !rom.finished">
+      </v-list-item>
+      <v-list-item class="py-0 px-4">
+        <template v-if="progress > 0 && !finished">
           <v-progress-linear
-            v-model="rom.progress"
+            v-model="progress"
             height="4"
             color="white"
             class="mt-1"
           />
           <div class="upload-speeds d-flex justify-space-between mt-1">
-            <div>{{ formatBytes(rom.upload_speed) }}/s</div>
+            <div>{{ formatBytes(rate) }}/s</div>
+            <div>
+              {{ formatBytes(loaded) }} /
+              {{ formatBytes(total) }}
+            </div>
+          </div>
+        </template>
+        <template v-if="finished">
+          <div class="upload-speeds d-flex justify-space-between mt-1">
+            <div />
             <div>
-              {{ formatBytes(rom.uploaded_size) }} /
-              {{ formatBytes(rom.file_size) }}
+              {{ formatBytes(total) }}
             </div>
           </div>
         </template>
@@ -66,6 +74,6 @@ watch(romsList, (newList) => {
 }
 
 .upload-speeds {
-  font-size: 10px;
+  font-size: 12px;
 }
 </style>
diff --git a/frontend/src/services/api/rom.ts b/frontend/src/services/api/rom.ts
index eddb266be..217e3bc37 100644
--- a/frontend/src/services/api/rom.ts
+++ b/frontend/src/services/api/rom.ts
@@ -1,5 +1,5 @@
 import type {
-  AddRomsResponse,
+  UploadRomsResponse,
   MessageResponse,
   SearchRomSchema,
 } from "@/__generated__";
@@ -9,47 +9,39 @@ import storeDownload from "@/stores/download";
 import storeUpload from "@/stores/upload";
 import type { DetailedRom, SimpleRom } from "@/stores/roms";
 import { getDownloadLink } from "@/utils";
+import type { AxiosProgressEvent } from "axios";
 
 export const romApi = api;
 
-socket.on(
-  "upload:in_progress",
-  ({ filename, file_size, uploaded_size, upload_speed }) => {
-    const uploadStore = storeUpload();
-    uploadStore.update(filename, {
-      file_size,
-      uploaded_size,
-      upload_speed,
-    });
-  },
-);
-
-socket.on("upload:complete", ({ filename }) => {
-  const uploadStore = storeUpload();
-  uploadStore.markComplete(filename);
-});
-
 async function uploadRoms({
   platformId,
   romsToUpload,
 }: {
   platformId: number;
   romsToUpload: File[];
-}): Promise<{ data: AddRomsResponse }> {
+}): Promise<{ data: UploadRomsResponse }> {
   if (!socket.connected) socket.connect();
   const uploadStore = storeUpload();
 
   const formData = new FormData();
+  const fileNames: string[] = [];
   romsToUpload.forEach((file) => {
-    formData.append("files", file);
-    uploadStore.add(file.name);
+    formData.append(file.name, file);
+    fileNames.push(file.name);
   });
 
+  uploadStore.start(fileNames);
+
   return api.post("/roms", formData, {
     headers: {
-      "Content-Type": "multipart/form-data",
+      "Content-Type": "multipart/form-data; boundary=boundary",
+      "X-Upload-Platform": platformId.toString(),
+      "X-Upload-Filenames": fileNames.join(","),
+    },
+    params: {},
+    onUploadProgress: (progressEvent: AxiosProgressEvent) => {
+      uploadStore.update(progressEvent);
     },
-    params: { platform_id: platformId },
   });
 }
 
diff --git a/frontend/src/stores/upload.ts b/frontend/src/stores/upload.ts
index 3750d9384..e6099e876 100644
--- a/frontend/src/stores/upload.ts
+++ b/frontend/src/stores/upload.ts
@@ -1,65 +1,38 @@
+import type { AxiosProgressEvent } from "axios";
 import { defineStore } from "pinia";
 
-class UploadingRom {
-  filename = "";
-  progress = 0;
-  file_size = 0;
-  uploaded_size = 0;
-  upload_speed = 0;
-  finished = false;
-
-  constructor(data: Partial<UploadingRom>) {
-    Object.assign(this, data);
-  }
-}
-
 export default defineStore("upload", {
   state: () => ({
-    value: [] as UploadingRom[],
+    filenames: [] as string[],
+    progress: 0,
+    total: 0,
+    loaded: 0,
+    rate: 0,
+    finished: false,
   }),
   actions: {
-    add(filename: string) {
-      this.value = [...this.value, new UploadingRom({ filename })];
+    start(filenames: string[]) {
+      this.filenames = filenames;
+      this.finished = false;
+      this.reset();
     },
-    update(
-      filename: string,
-      {
-        file_size,
-        uploaded_size,
-        upload_speed,
-      }: {
-        file_size: number;
-        uploaded_size: number;
-        upload_speed: number;
-      },
-    ) {
-      this.value = this.value.map((rom) =>
-        rom.filename === filename
-          ? {
-              ...rom,
-              file_size,
-              uploaded_size,
-              upload_speed,
-              progress: (uploaded_size / file_size) * 100,
-              finished: uploaded_size === file_size,
-            }
-          : rom,
-      );
+    update(progressEvent: AxiosProgressEvent) {
+      this.progress = progressEvent.progress || this.progress;
+      this.total = progressEvent.total || this.total;
+      this.loaded = progressEvent.loaded;
+      this.rate = progressEvent.rate || this.rate;
+      this.finished = progressEvent.loaded === progressEvent.total;
     },
-    markComplete(filename: string) {
-      this.value = this.value.map((rom) =>
-        rom.filename === filename
-          ? {
-              ...rom,
-              progress: 100,
-              upload_speed: 0,
-              finished: true,
-            }
-          : rom,
-      );
+    reset() {
+      this.progress = 0;
+      this.total = 0;
+      this.loaded = 0;
+      this.rate = 0;
     },
     clear() {
-      this.value = [] as UploadingRom[];
+      this.reset();
+      this.filenames = [];
+      this.finished = true;
     },
   },
 });
diff --git a/poetry.lock b/poetry.lock
index 9926bc1aa..deb8f3a6d 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -2496,6 +2496,31 @@ files = [
     {file = "six-1.16.0.tar.gz", hash = "sha256:1e61c37477a1626458e36f7b1d82aa5c9b094fa4802892072e49de9c60c4c926"},
 ]
 
+[[package]]
+name = "smart-open"
+version = "7.0.4"
+description = "Utils for streaming large files (S3, HDFS, GCS, Azure Blob Storage, gzip, bz2...)"
+optional = false
+python-versions = "<4.0,>=3.7"
+files = [
+    {file = "smart_open-7.0.4-py3-none-any.whl", hash = "sha256:4e98489932b3372595cddc075e6033194775165702887216b65eba760dfd8d47"},
+    {file = "smart_open-7.0.4.tar.gz", hash = "sha256:62b65852bdd1d1d516839fcb1f6bc50cd0f16e05b4ec44b52f43d38bcb838524"},
+]
+
+[package.dependencies]
+wrapt = "*"
+
+[package.extras]
+all = ["azure-common", "azure-core", "azure-storage-blob", "boto3", "google-cloud-storage (>=2.6.0)", "paramiko", "requests", "zstandard"]
+azure = ["azure-common", "azure-core", "azure-storage-blob"]
+gcs = ["google-cloud-storage (>=2.6.0)"]
+http = ["requests"]
+s3 = ["boto3"]
+ssh = ["paramiko"]
+test = ["azure-common", "azure-core", "azure-storage-blob", "boto3", "google-cloud-storage (>=2.6.0)", "moto[server]", "paramiko", "pytest", "pytest-rerunfailures", "requests", "responses", "zstandard"]
+webhdfs = ["requests"]
+zst = ["zstandard"]
+
 [[package]]
 name = "sniffio"
 version = "1.3.1"
@@ -2691,6 +2716,47 @@ pycryptodome = ">=3.10.1"
 ci = ["coverage (==6.2)", "mypy (==0.971)", "pycryptodome (==3.10.1)", "pytest (==7.0.1)", "pytest-cov (==3.0.0)", "pyzipper (==0.3.6)", "stream-unzip (==0.0.86)", "types-contextvars (==2.4.7.3)"]
 dev = ["coverage (>=6.2)", "mypy (>=0.971)", "pytest (>=7.0.1)", "pytest-cov (>=3.0.0)", "pyzipper (>=0.3.6)", "stream-unzip (>=0.0.86)", "types-contextvars (>=2.4.7.3)"]
 
+[[package]]
+name = "streaming-form-data"
+version = "1.16.0"
+description = "Streaming parser for multipart/form-data"
+optional = false
+python-versions = ">=3.8"
+files = [
+    {file = "streaming-form-data-1.16.0.tar.gz", hash = "sha256:cd95cde7a1e362c0f2b6e8bf2bcaf7339df1d4727b06de29968d010fcbbb9f5c"},
+    {file = "streaming_form_data-1.16.0-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:68657763f5b9147d1cc54729ccc972af33097a405ee6b72607b7949c4eeecec8"},
+    {file = "streaming_form_data-1.16.0-cp310-cp310-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:5b14be1adb391a2021a25b238ec48cefd20b34f85952b990996d6ffd0abfe0d8"},
+    {file = "streaming_form_data-1.16.0-cp310-cp310-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:fb3b54af8d170d58dfd36d6418352c105c43a1a0b85e36772f23f0134bd8a741"},
+    {file = "streaming_form_data-1.16.0-cp310-cp310-musllinux_1_1_i686.whl", hash = "sha256:a96f8a8013f6a209262592eedebf773de3316c22286ed3f1ef5ff39a19f1db9e"},
+    {file = "streaming_form_data-1.16.0-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:929b7c69460b5516e65551b76333de1831cab8cc44fb0c5fc200847f3bd28538"},
+    {file = "streaming_form_data-1.16.0-cp310-cp310-win32.whl", hash = "sha256:945c642f3d7fbee36cc4682124487ab2c3ee8f6b669c5bff07257ce89625b20c"},
+    {file = "streaming_form_data-1.16.0-cp310-cp310-win_amd64.whl", hash = "sha256:a5b598d1a36ea619aa26a14dff9a5b83baa6368d1d79f56e8132b72d2070f413"},
+    {file = "streaming_form_data-1.16.0-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:36e337fe1639fcb67161464e4f18389c288d0d57fa8a65b1f4bbd3f21af58d94"},
+    {file = "streaming_form_data-1.16.0-cp311-cp311-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:d0aa082e2944d5305c41e0acb60c3d2261126c181a3330ff787aeac13d7cf1ce"},
+    {file = "streaming_form_data-1.16.0-cp311-cp311-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:13f2f293e0591ff26efe31197929c4f46614a48e2cdbe46e051fef3258499886"},
+    {file = "streaming_form_data-1.16.0-cp311-cp311-musllinux_1_1_i686.whl", hash = "sha256:df9b6e16ccfd92137c59a0c59d0ccdfd641e6fd10564404ef3387d84e1aebc5e"},
+    {file = "streaming_form_data-1.16.0-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:4d401b337659404babecbad6ddc157f593568f861ecb0be71cbe7b6e5a38dca8"},
+    {file = "streaming_form_data-1.16.0-cp311-cp311-win32.whl", hash = "sha256:90690e80f206fa42736599ec9cd88bd2ba85d4645dd048c301472502110be911"},
+    {file = "streaming_form_data-1.16.0-cp311-cp311-win_amd64.whl", hash = "sha256:6edb1e379fad699522492a21d3e91ab1ee1b1df34e0a147498251673b7cbbc00"},
+    {file = "streaming_form_data-1.16.0-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:ef7b63d02f4243251a5a6e7dc62bb5dda0d9342e141c724fb196410b04191508"},
+    {file = "streaming_form_data-1.16.0-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:b61d097ad8a673272222acfa504cee9a745881d5a091dcb4e7ca39ed8e0edcb9"},
+    {file = "streaming_form_data-1.16.0-cp38-cp38-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:1c6d920e03146d652ceea0b46682e8ca4d7ff9017cb09ec24a1687c809c1582c"},
+    {file = "streaming_form_data-1.16.0-cp38-cp38-musllinux_1_1_i686.whl", hash = "sha256:1bcdfccf7b3885f74ec78c86c5a74f2f4b766341c209b344459a1f42b9581f80"},
+    {file = "streaming_form_data-1.16.0-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:79debb41691c669e1b7b254f41120c24ab27889dbc543861660df4472471e4ce"},
+    {file = "streaming_form_data-1.16.0-cp38-cp38-win32.whl", hash = "sha256:16399b9dc231e856cfd2138356ab7017f43025a1c994371deb7fbd31bd73b411"},
+    {file = "streaming_form_data-1.16.0-cp38-cp38-win_amd64.whl", hash = "sha256:d561e216501356b1142232d3a5f3a41ea435c50120e01996c853b2779ef3626b"},
+    {file = "streaming_form_data-1.16.0-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:9d2540acfb7f8db7ab94d893f42d5b2fcf0145a25cd795e53bc841c001ded4f9"},
+    {file = "streaming_form_data-1.16.0-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:cbcfa5bf257c4e6539df01e96d52d9e0f49085a58c5b8efdc98c9e88a3a39595"},
+    {file = "streaming_form_data-1.16.0-cp39-cp39-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:decf1af5fad98a938acd93fba413312630a9ca9a03972bc55ff903f6ce4247d4"},
+    {file = "streaming_form_data-1.16.0-cp39-cp39-musllinux_1_1_i686.whl", hash = "sha256:391fb3ff03113ffa71a0067ab88ca622d0a1a085913c4e21962afae61e366871"},
+    {file = "streaming_form_data-1.16.0-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:e530661137aa3c38bbd2a98ec4bced7aa15ed8d8a61be6d98abe071e5a8dfc7b"},
+    {file = "streaming_form_data-1.16.0-cp39-cp39-win32.whl", hash = "sha256:ba7430f542e9d8359b5f9b1445fd2d20b81930e031100e4e76cb7f064208811d"},
+    {file = "streaming_form_data-1.16.0-cp39-cp39-win_amd64.whl", hash = "sha256:f90d142755e8d60764e4ef883af9cc5fc5d103606fa27adcbbf986d17bff102a"},
+]
+
+[package.dependencies]
+smart-open = ">=6.0"
+
 [[package]]
 name = "texttable"
 version = "1.7.0"
@@ -3224,4 +3290,4 @@ multidict = ">=4.0"
 [metadata]
 lock-version = "2.0"
 python-versions = "^3.12"
-content-hash = "05c76acc85421bab1fc3f9f28f9291bce64c5e99154b8ee72dc809a26d9804e2"
+content-hash = "fb58ed11d1fd6dc414d7c2c5f16c9d578a07160128bd6d5d09cbd885a2804141"
diff --git a/pyproject.toml b/pyproject.toml
index 9d68ec470..5112c69a5 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -43,6 +43,7 @@ pillow = "^10.3.0"
 certifi = "2024.07.04"
 python-magic = "^0.4.27"
 py7zr = "^0.21.1"
+streaming-form-data = "^1.16.0"
 
 [tool.poetry.group.test.dependencies]
 fakeredis = "^2.21.3"

From 83b4f32a56b13aabf56cd9ec89f392f7f0e32ca6 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Sat, 17 Aug 2024 12:08:00 -0400
Subject: [PATCH 08/11] mult progress by 100

---
 frontend/src/stores/upload.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/stores/upload.ts b/frontend/src/stores/upload.ts
index e6099e876..4dbeefc60 100644
--- a/frontend/src/stores/upload.ts
+++ b/frontend/src/stores/upload.ts
@@ -17,7 +17,9 @@ export default defineStore("upload", {
       this.reset();
     },
     update(progressEvent: AxiosProgressEvent) {
-      this.progress = progressEvent.progress || this.progress;
+      this.progress = progressEvent.progress
+        ? progressEvent.progress * 100
+        : this.progress;
       this.total = progressEvent.total || this.total;
       this.loaded = progressEvent.loaded;
       this.rate = progressEvent.rate || this.rate;

From 716114e39449956c81f2d590eaf586a7b41668c3 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Sat, 17 Aug 2024 12:35:45 -0400
Subject: [PATCH 09/11] parallel upload

---
 backend/endpoints/responses/rom.py            |  5 --
 backend/endpoints/rom.py                      | 58 +++++--------------
 frontend/src/__generated__/index.ts           |  1 -
 .../models/UploadRomsResponse.ts              | 10 ----
 .../common/Game/Dialog/UploadRom.vue          | 38 +++++++-----
 .../components/common/UploadInProgress.vue    | 46 +++++++--------
 frontend/src/services/api/rom.ts              | 54 +++++++++--------
 frontend/src/stores/upload.ts                 | 58 ++++++++++---------
 8 files changed, 122 insertions(+), 148 deletions(-)
 delete mode 100644 frontend/src/__generated__/models/UploadRomsResponse.ts

diff --git a/backend/endpoints/responses/rom.py b/backend/endpoints/responses/rom.py
index a8180174c..fcf79e84f 100644
--- a/backend/endpoints/responses/rom.py
+++ b/backend/endpoints/responses/rom.py
@@ -186,11 +186,6 @@ class UserNotesSchema(TypedDict):
     note_raw_markdown: str
 
 
-class UploadRomsResponse(TypedDict):
-    uploaded_files: list[str]
-    skipped_files: list[str]
-
-
 class CustomStreamingResponse(StreamingResponse):
     def __init__(self, *args, **kwargs) -> None:
         self.emit_body = kwargs.pop("emit_body", None)
diff --git a/backend/endpoints/rom.py b/backend/endpoints/rom.py
index 15f702056..65d94a97e 100644
--- a/backend/endpoints/rom.py
+++ b/backend/endpoints/rom.py
@@ -18,12 +18,11 @@
     DetailedRomSchema,
     RomUserSchema,
     SimpleRomSchema,
-    UploadRomsResponse,
 )
 from exceptions.endpoint_exceptions import RomNotFoundInDatabaseException
 from exceptions.fs_exceptions import RomAlreadyExistsException
 from fastapi import HTTPException, Query, Request, UploadFile, status
-from fastapi.responses import JSONResponse, Response
+from fastapi.responses import Response
 from handler.database import db_platform_handler, db_rom_handler
 from handler.filesystem import fs_resource_handler, fs_rom_handler
 from handler.filesystem.base_handler import CoverSize
@@ -39,22 +38,18 @@
 
 
 @protected_route(router.post, "/roms", ["roms.write"])
-async def add_roms(
-    request: Request,
-) -> UploadRomsResponse:
-    """Upload roms endpoint (one or more at the same time)
+async def add_rom(request: Request):
+    """Upload single rom endpoint
 
     Args:
         request (Request): Fastapi Request object
 
     Raises:
         HTTPException: No files were uploaded
-
-    Returns:
-        UploadRomsResponse: Standard message response
     """
     platform_id = int(request.headers.get("x-upload-platform", None))
-    if not platform_id:
+    filename = request.headers.get("x-upload-filename", None)
+    if not platform_id or not filename:
         raise HTTPException(
             status_code=status.HTTP_400_BAD_REQUEST,
             detail="No platform ID provided",
@@ -64,59 +59,38 @@ async def add_roms(
     roms_path = fs_rom_handler.build_upload_file_path(platform_fs_slug)
     log.info(f"Uploading roms to {platform_fs_slug}")
 
+    file_location = f"{roms_path}/{filename}"
     parser = StreamingFormDataParser(headers=request.headers)
     parser.register("x-upload-platform", NullTarget())
-    parser.register("x-upload-filenames", NullTarget())
-
-    skipped_files = []
-    uploaded_files = []
-
-    filenames = request.headers.get("x-upload-filenames", "").split(",")
-    for name in filenames:
-        file_location = f"{roms_path}/{name}"
-        if await Path(file_location).exists():
-            log.warning(f" - Skipping {name} since the file already exists")
-            skipped_files.append(name)
-            continue
-        else:
-            uploaded_files.append(name)
-
-        parser.register(name, FileTarget(f"{roms_path}/{name}"))
+    parser.register(filename, FileTarget(file_location))
 
-    if not filenames:
-        log.error("No files were uploaded")
+    if await Path(file_location).exists():
+        log.warning(f" - Skipping {filename} since the file already exists")
         raise HTTPException(
             status_code=status.HTTP_400_BAD_REQUEST,
-            detail="No files were uploaded",
+            detail=f"File {filename} already exists",
         )
 
-    async def cleanup_partial_files():
-        for name in filenames:
-            file_location = f"{roms_path}/{name}"
-            if await Path(file_location).exists():
-                await Path(file_location).unlink()
+    async def cleanup_partial_file():
+        if await Path(file_location).exists():
+            await Path(file_location).unlink()
 
     try:
         async for chunk in request.stream():
             parser.data_received(chunk)
     except ClientDisconnect:
         log.error("Client disconnected during upload")
-        await cleanup_partial_files()
+        await cleanup_partial_file()
     except Exception as exc:
         log.error("Error uploading files", exc_info=exc)
-        await cleanup_partial_files()
+        await cleanup_partial_file()
 
         raise HTTPException(
             status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
             detail="There was an error uploading the file(s)",
         )
 
-    return JSONResponse(
-        {
-            "uploaded_files": uploaded_files,
-            "skipped_files": skipped_files,
-        }
-    )
+    return Response(status_code=status.HTTP_201_CREATED)
 
 
 @protected_route(router.get, "/roms", ["roms.read"])
diff --git a/frontend/src/__generated__/index.ts b/frontend/src/__generated__/index.ts
index 0d6c8a583..4ba37aea8 100644
--- a/frontend/src/__generated__/index.ts
+++ b/frontend/src/__generated__/index.ts
@@ -46,7 +46,6 @@ export type { TokenResponse } from './models/TokenResponse';
 export type { UploadedSavesResponse } from './models/UploadedSavesResponse';
 export type { UploadedScreenshotsResponse } from './models/UploadedScreenshotsResponse';
 export type { UploadedStatesResponse } from './models/UploadedStatesResponse';
-export type { UploadRomsResponse } from './models/UploadRomsResponse';
 export type { UserNotesSchema } from './models/UserNotesSchema';
 export type { UserSchema } from './models/UserSchema';
 export type { ValidationError } from './models/ValidationError';
diff --git a/frontend/src/__generated__/models/UploadRomsResponse.ts b/frontend/src/__generated__/models/UploadRomsResponse.ts
deleted file mode 100644
index a8d0cc439..000000000
--- a/frontend/src/__generated__/models/UploadRomsResponse.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/* generated using openapi-typescript-codegen -- do no edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-
-export type UploadRomsResponse = {
-    uploaded_files: Array<string>;
-    skipped_files: Array<string>;
-};
-
diff --git a/frontend/src/components/common/Game/Dialog/UploadRom.vue b/frontend/src/components/common/Game/Dialog/UploadRom.vue
index 084962250..43e73c53b 100644
--- a/frontend/src/components/common/Game/Dialog/UploadRom.vue
+++ b/frontend/src/components/common/Game/Dialog/UploadRom.vue
@@ -17,7 +17,7 @@ import { useDisplay } from "vuetify";
 // Props
 const { xs, mdAndUp, smAndUp } = useDisplay();
 const show = ref(false);
-const romsToUpload = ref<File[]>([]);
+const filesToUpload = ref<File[]>([]);
 const scanningStore = storeScanning();
 const selectedPlatform = ref<Platform | null>(null);
 const supportedPlatforms = ref<Platform[]>();
@@ -66,7 +66,6 @@ emitter?.on("showUploadRomDialog", (platformWhereUpload) => {
 async function uploadRoms() {
   if (!selectedPlatform.value) return;
   show.value = false;
-  scanningStore.set(true);
 
   if (selectedPlatform.value.id == -1) {
     await platformApi
@@ -98,15 +97,18 @@ async function uploadRoms() {
 
   await romApi
     .uploadRoms({
-      romsToUpload: romsToUpload.value,
+      filesToUpload: filesToUpload.value,
       platformId: platformId,
     })
-    .then(({ data }) => {
+    .then((responses: PromiseSettledResult<unknown>[]) => {
       uploadStore.clear();
 
-      const { uploaded_files, skipped_files } = data;
+      const successfulUploads = responses.filter(
+        (d) => d.status == "fulfilled"
+      );
+      const failedUploads = responses.filter((d) => d.status == "rejected");
 
-      if (uploaded_files.length == 0) {
+      if (successfulUploads.length == 0) {
         return emitter?.emit("snackbarShow", {
           msg: `All files skipped, nothing to upload.`,
           icon: "mdi-close-circle",
@@ -116,12 +118,14 @@ async function uploadRoms() {
       }
 
       emitter?.emit("snackbarShow", {
-        msg: `${uploaded_files.length} files uploaded successfully (and ${skipped_files.length} skipped). Starting scan...`,
+        msg: `${successfulUploads.length} files uploaded successfully (and ${failedUploads.length} skipped/failed). Starting scan...`,
         icon: "mdi-check-bold",
         color: "green",
         timeout: 3000,
       });
 
+      scanningStore.set(true);
+
       if (!socket.connected) socket.connect();
       setTimeout(() => {
         socket.emit("scan", {
@@ -141,7 +145,7 @@ async function uploadRoms() {
         timeout: 4000,
       });
     });
-  romsToUpload.value = [];
+  filesToUpload.value = [];
   selectedPlatform.value = null;
 }
 
@@ -151,17 +155,19 @@ function triggerFileInput() {
 }
 
 function removeRomFromList(romName: string) {
-  romsToUpload.value = romsToUpload.value.filter((rom) => rom.name !== romName);
+  filesToUpload.value = filesToUpload.value.filter(
+    (rom) => rom.name !== romName
+  );
 }
 
 function closeDialog() {
   show.value = false;
-  romsToUpload.value = [];
+  filesToUpload.value = [];
   selectedPlatform.value = null;
 }
 
 function updateDataTablePages() {
-  pageCount.value = Math.ceil(romsToUpload.value.length / itemsPerPage.value);
+  pageCount.value = Math.ceil(filesToUpload.value.length / itemsPerPage.value);
 }
 watch(itemsPerPage, async () => {
   updateDataTablePages();
@@ -233,7 +239,7 @@ watch(itemsPerPage, async () => {
           </v-btn>
           <v-file-input
             id="file-input"
-            v-model="romsToUpload"
+            v-model="filesToUpload"
             @update:model-value="updateDataTablePages"
             class="file-input"
             multiple
@@ -244,9 +250,9 @@ watch(itemsPerPage, async () => {
     </template>
     <template #content>
       <v-data-table
-        v-if="romsToUpload.length > 0"
+        v-if="filesToUpload.length > 0"
         :item-value="(item) => item.name"
-        :items="romsToUpload"
+        :items="filesToUpload"
         :width="mdAndUp ? '60vw' : '95vw'"
         :items-per-page="itemsPerPage"
         :items-per-page-options="PER_PAGE_OPTIONS"
@@ -315,9 +321,9 @@ watch(itemsPerPage, async () => {
           <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
           <v-btn
             class="bg-terciary text-romm-green"
-            :disabled="romsToUpload.length == 0 || selectedPlatform == null"
+            :disabled="filesToUpload.length == 0 || selectedPlatform == null"
             :variant="
-              romsToUpload.length == 0 || selectedPlatform == null
+              filesToUpload.length == 0 || selectedPlatform == null
                 ? 'plain'
                 : 'flat'
             "
diff --git a/frontend/src/components/common/UploadInProgress.vue b/frontend/src/components/common/UploadInProgress.vue
index 2c5bc3162..c851a9cf4 100644
--- a/frontend/src/components/common/UploadInProgress.vue
+++ b/frontend/src/components/common/UploadInProgress.vue
@@ -7,12 +7,11 @@ import { storeToRefs } from "pinia";
 
 const { xs } = useDisplay();
 const uploadStore = storeUpload();
-const { filenames, progress, total, loaded, rate, finished } =
-  storeToRefs(uploadStore);
+const { files } = storeToRefs(uploadStore);
 const show = ref(false);
 
-watch(filenames, (fns) => {
-  show.value = fns.length > 0;
+watch(files, (newList) => {
+  show.value = newList.length > 0;
 });
 </script>
 
@@ -28,38 +27,39 @@ watch(filenames, (fns) => {
     color="tooltip"
   >
     <v-list>
-        <v-list-item-title  class="py-2 px-4 d-flex justify-space-between">
-          Uploading {{ filenames.length }} files...
-          <v-icon icon="mdi-loading mdi-spin" color="white" class="mx-2"/>
-        </v-list-item-title>
-      <v-list-item class="py-1 px-4">
-        <v-list-item-title v-for="filename in filenames" class="d-flex justify-space-between">
-          <div class="upload-speeds">
-            • {{ filename }}
-          </div>
+      <v-list-item
+        v-for="file in files"
+        class="py-2 px-4"
+        :disabled="file.finished"
+      >
+        <v-list-item-title class="d-flex justify-space-between">
+          {{ file.filename }}
+          <v-icon
+            :icon="file.finished ? `mdi-check` : `mdi-loading mdi-spin`"
+            :color="file.finished ? `green` : `white`"
+            class="mx-2"
+          />
         </v-list-item-title>
-      </v-list-item>
-      <v-list-item class="py-0 px-4">
-        <template v-if="progress > 0 && !finished">
+        <template v-if="file.progress > 0 && !file.finished">
           <v-progress-linear
-            v-model="progress"
+            v-model="file.progress"
             height="4"
             color="white"
             class="mt-1"
           />
           <div class="upload-speeds d-flex justify-space-between mt-1">
-            <div>{{ formatBytes(rate) }}/s</div>
+            <div>{{ formatBytes(file.rate) }}/s</div>
             <div>
-              {{ formatBytes(loaded) }} /
-              {{ formatBytes(total) }}
+              {{ formatBytes(file.loaded) }} /
+              {{ formatBytes(file.total) }}
             </div>
           </div>
         </template>
-        <template v-if="finished">
+        <template v-if="file.finished">
           <div class="upload-speeds d-flex justify-space-between mt-1">
             <div />
             <div>
-              {{ formatBytes(total) }}
+              {{ formatBytes(file.total) }}
             </div>
           </div>
         </template>
@@ -74,6 +74,6 @@ watch(filenames, (fns) => {
 }
 
 .upload-speeds {
-  font-size: 12px;
+  font-size: 10px;
 }
 </style>
diff --git a/frontend/src/services/api/rom.ts b/frontend/src/services/api/rom.ts
index 217e3bc37..736720955 100644
--- a/frontend/src/services/api/rom.ts
+++ b/frontend/src/services/api/rom.ts
@@ -1,8 +1,4 @@
-import type {
-  UploadRomsResponse,
-  MessageResponse,
-  SearchRomSchema,
-} from "@/__generated__";
+import type { MessageResponse, SearchRomSchema } from "@/__generated__";
 import api from "@/services/api/index";
 import socket from "@/services/socket";
 import storeDownload from "@/stores/download";
@@ -15,34 +11,42 @@ export const romApi = api;
 
 async function uploadRoms({
   platformId,
-  romsToUpload,
+  filesToUpload,
 }: {
   platformId: number;
-  romsToUpload: File[];
-}): Promise<{ data: UploadRomsResponse }> {
+  filesToUpload: File[];
+}): Promise<PromiseSettledResult<unknown>[]> {
   if (!socket.connected) socket.connect();
   const uploadStore = storeUpload();
 
-  const formData = new FormData();
-  const fileNames: string[] = [];
-  romsToUpload.forEach((file) => {
+  const promises = filesToUpload.map((file) => {
+    const formData = new FormData();
     formData.append(file.name, file);
-    fileNames.push(file.name);
-  });
-
-  uploadStore.start(fileNames);
 
-  return api.post("/roms", formData, {
-    headers: {
-      "Content-Type": "multipart/form-data; boundary=boundary",
-      "X-Upload-Platform": platformId.toString(),
-      "X-Upload-Filenames": fileNames.join(","),
-    },
-    params: {},
-    onUploadProgress: (progressEvent: AxiosProgressEvent) => {
-      uploadStore.update(progressEvent);
-    },
+    uploadStore.start(file.name);
+
+    return new Promise((resolve, reject) => {
+      api
+        .post("/roms", formData, {
+          headers: {
+            "Content-Type": "multipart/form-data; boundary=boundary",
+            "X-Upload-Platform": platformId.toString(),
+            "X-Upload-Filename": file.name,
+          },
+          params: {},
+          onUploadProgress: (progressEvent: AxiosProgressEvent) => {
+            uploadStore.update(file.name, progressEvent);
+          },
+        })
+        .then(resolve)
+        .catch((error) => {
+          console.error("Failed to upload file", file.name, error);
+          reject(error);
+        });
+    });
   });
+
+  return Promise.allSettled(promises);
 }
 
 async function getRoms({
diff --git a/frontend/src/stores/upload.ts b/frontend/src/stores/upload.ts
index 4dbeefc60..f25bf4d7f 100644
--- a/frontend/src/stores/upload.ts
+++ b/frontend/src/stores/upload.ts
@@ -1,40 +1,46 @@
 import type { AxiosProgressEvent } from "axios";
 import { defineStore } from "pinia";
 
+class UploadingFile {
+  filename: string;
+  progress: number;
+  total: number;
+  loaded: number;
+  rate: number;
+  finished: boolean;
+
+  constructor(filename: string) {
+    this.filename = filename;
+    this.progress = 0;
+    this.total = 0;
+    this.loaded = 0;
+    this.rate = 0;
+    this.finished = false;
+  }
+}
+
 export default defineStore("upload", {
   state: () => ({
-    filenames: [] as string[],
-    progress: 0,
-    total: 0,
-    loaded: 0,
-    rate: 0,
-    finished: false,
+    files: [] as UploadingFile[],
   }),
   actions: {
-    start(filenames: string[]) {
-      this.filenames = filenames;
-      this.finished = false;
-      this.reset();
+    start(filename: string) {
+      this.files = [...this.files, new UploadingFile(filename)];
     },
-    update(progressEvent: AxiosProgressEvent) {
-      this.progress = progressEvent.progress
+    update(filename: string, progressEvent: AxiosProgressEvent) {
+      const file = this.files.find((f) => f.filename === filename);
+      if (!file) return;
+
+      file.progress = progressEvent.progress
         ? progressEvent.progress * 100
-        : this.progress;
-      this.total = progressEvent.total || this.total;
-      this.loaded = progressEvent.loaded;
-      this.rate = progressEvent.rate || this.rate;
-      this.finished = progressEvent.loaded === progressEvent.total;
-    },
-    reset() {
-      this.progress = 0;
-      this.total = 0;
-      this.loaded = 0;
-      this.rate = 0;
+        : file.progress;
+      file.total = progressEvent.total || file.total;
+      file.loaded = progressEvent.loaded;
+      file.rate = progressEvent.rate || file.rate;
+      file.finished = progressEvent.loaded === progressEvent.total;
     },
     clear() {
-      this.reset();
-      this.filenames = [];
-      this.finished = true;
+      this.files = [];
     },
   },
 });

From faba97da5aec018e630095118fd1855d98f39f61 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Sat, 17 Aug 2024 13:20:17 -0400
Subject: [PATCH 10/11] changes from self reivew

---
 backend/endpoints/rom.py | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/backend/endpoints/rom.py b/backend/endpoints/rom.py
index 65d94a97e..5267357d7 100644
--- a/backend/endpoints/rom.py
+++ b/backend/endpoints/rom.py
@@ -47,24 +47,24 @@ async def add_rom(request: Request):
     Raises:
         HTTPException: No files were uploaded
     """
-    platform_id = int(request.headers.get("x-upload-platform", None))
-    filename = request.headers.get("x-upload-filename", None)
+    platform_id = request.headers.get("x-upload-platform")
+    filename = request.headers.get("x-upload-filename")
     if not platform_id or not filename:
         raise HTTPException(
             status_code=status.HTTP_400_BAD_REQUEST,
-            detail="No platform ID provided",
+            detail="No platform ID or filename provided",
         )
 
-    platform_fs_slug = db_platform_handler.get_platform(platform_id).fs_slug
+    platform_fs_slug = db_platform_handler.get_platform(int(platform_id)).fs_slug
     roms_path = fs_rom_handler.build_upload_file_path(platform_fs_slug)
-    log.info(f"Uploading roms to {platform_fs_slug}")
+    log.info(f"Uploading file to {platform_fs_slug}")
 
-    file_location = f"{roms_path}/{filename}"
+    file_location = Path(f"{roms_path}/{filename}")
     parser = StreamingFormDataParser(headers=request.headers)
     parser.register("x-upload-platform", NullTarget())
-    parser.register(filename, FileTarget(file_location))
+    parser.register(filename, FileTarget(str(file_location)))
 
-    if await Path(file_location).exists():
+    if await file_location.exists():
         log.warning(f" - Skipping {filename} since the file already exists")
         raise HTTPException(
             status_code=status.HTTP_400_BAD_REQUEST,
@@ -72,8 +72,8 @@ async def add_rom(request: Request):
         )
 
     async def cleanup_partial_file():
-        if await Path(file_location).exists():
-            await Path(file_location).unlink()
+        if await file_location.exists():
+            await file_location.unlink()
 
     try:
         async for chunk in request.stream():
@@ -84,7 +84,6 @@ async def cleanup_partial_file():
     except Exception as exc:
         log.error("Error uploading files", exc_info=exc)
         await cleanup_partial_file()
-
         raise HTTPException(
             status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
             detail="There was an error uploading the file(s)",

From d384195c7f59ef9a95d3d0a607f30a5659285a39 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Sat, 17 Aug 2024 22:47:50 -0400
Subject: [PATCH 11/11] fixup trunk

---
 backend/endpoints/rom.py | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/backend/endpoints/rom.py b/backend/endpoints/rom.py
index 5267357d7..a4f38e0b7 100644
--- a/backend/endpoints/rom.py
+++ b/backend/endpoints/rom.py
@@ -53,7 +53,7 @@ async def add_rom(request: Request):
         raise HTTPException(
             status_code=status.HTTP_400_BAD_REQUEST,
             detail="No platform ID or filename provided",
-        )
+        ) from None
 
     platform_fs_slug = db_platform_handler.get_platform(int(platform_id)).fs_slug
     roms_path = fs_rom_handler.build_upload_file_path(platform_fs_slug)
@@ -69,7 +69,7 @@ async def add_rom(request: Request):
         raise HTTPException(
             status_code=status.HTTP_400_BAD_REQUEST,
             detail=f"File {filename} already exists",
-        )
+        ) from None
 
     async def cleanup_partial_file():
         if await file_location.exists():
@@ -87,7 +87,7 @@ async def cleanup_partial_file():
         raise HTTPException(
             status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
             detail="There was an error uploading the file(s)",
-        )
+        ) from exc
 
     return Response(status_code=status.HTTP_201_CREATED)