From 7caabc066ac128163ba921127ef3ce4b94ca6d7a Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Sun, 15 Feb 2026 17:41:17 -0500
Subject: [PATCH] [ROMM-3025] Fix collections with custom art failing

---
 .../AppBar/Collection/CollectionInfoDrawer.vue      | 11 ++++++++---
 .../common/Collection/Dialog/CreateCollection.vue   | 13 +++++++++----
 .../src/components/common/Game/Dialog/EditRom.vue   | 13 ++++++++++---
 3 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue b/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue
index 630572830..e45561f65 100644
--- a/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue
+++ b/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue
@@ -48,7 +48,7 @@ const collectionCoverImage = computed(() =>
 );
 
 emitter?.on("updateUrlCover", (coverUrl) => {
-  setArtwork(coverUrl);
+  setCoverUrl(coverUrl);
 });
 
 function showEditable() {
@@ -73,16 +73,21 @@ function previewImage(event: Event) {
   const input = event.target as HTMLInputElement;
   if (!input.files) return;
 
+  // Set artwork from uploaded file
+  updatedCollection.value.artwork = input.files[0];
+
+  // Display the image preview
   const reader = new FileReader();
   reader.onload = () => {
-    setArtwork(reader.result?.toString() || "");
+    imagePreviewUrl.value = reader.result?.toString() || "";
+    removeCover.value = false;
   };
   if (input.files[0]) {
     reader.readAsDataURL(input.files[0]);
   }
 }
 
-function setArtwork(coverUrl: string) {
+function setCoverUrl(coverUrl: string) {
   if (!coverUrl) return;
   updatedCollection.value.url_cover = coverUrl;
   imagePreviewUrl.value = coverUrl;
diff --git a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
index fb665ee63..35f9eccc9 100644
--- a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
@@ -34,7 +34,7 @@ emitter?.on("showCreateCollectionDialog", () => {
   removeCover.value = false;
 });
 emitter?.on("updateUrlCover", (coverUrl) => {
-  setArtwork(coverUrl);
+  setUrlCover(coverUrl);
 });
 
 const missingCoverImage = computed(() =>
@@ -50,16 +50,21 @@ function previewImage(event: Event) {
   const input = event.target as HTMLInputElement;
   if (!input.files) return;
 
+  // Set artwork from uploaded file
+  collection.value.artwork = input.files[0];
+
+  // Display the image preview
   const reader = new FileReader();
   reader.onload = () => {
-    setArtwork(reader.result?.toString() || "");
+    imagePreviewUrl.value = reader.result?.toString() || "";
+    removeCover.value = false;
   };
   if (input.files[0]) {
     reader.readAsDataURL(input.files[0]);
   }
 }
 
-function setArtwork(coverUrl: string) {
+function setUrlCover(coverUrl: string) {
   if (!coverUrl || !collection.value) return;
   collection.value.url_cover = coverUrl;
   imagePreviewUrl.value = coverUrl;
@@ -78,7 +83,7 @@ async function createCollection() {
 
   try {
     const { data } = await collectionApi.createCollection({
-      collection: collection.value,
+      collection: { ...collection.value },
     });
 
     emitter?.emit("snackbarShow", {
diff --git a/frontend/src/components/common/Game/Dialog/EditRom.vue b/frontend/src/components/common/Game/Dialog/EditRom.vue
index 8b9483252..ba4b2b401 100644
--- a/frontend/src/components/common/Game/Dialog/EditRom.vue
+++ b/frontend/src/components/common/Game/Dialog/EditRom.vue
@@ -38,7 +38,7 @@ emitter?.on("showEditRomDialog", (romToEdit: SimpleRom) => {
 });
 
 emitter?.on("updateUrlCover", (url_cover) => {
-  setArtwork(url_cover);
+  setUrlCover(url_cover);
 });
 
 const missingCoverImage = computed(() =>
@@ -51,19 +51,26 @@ function triggerFileInput(id: string) {
 }
 
 function previewImage(event: Event) {
+  if (!rom.value) return;
+
   const input = event.target as HTMLInputElement;
   if (!input.files) return;
 
+  // Set artwork from uploaded file
+  rom.value.artwork = input.files[0];
+
+  // Display the image preview
   const reader = new FileReader();
   reader.onload = () => {
-    setArtwork(reader.result?.toString() || "");
+    imagePreviewUrl.value = reader.result?.toString() || "";
+    removeCover.value = false;
   };
   if (input.files[0]) {
     reader.readAsDataURL(input.files[0]);
   }
 }
 
-function setArtwork(coverUrl: string) {
+function setUrlCover(coverUrl: string) {
   if (!coverUrl || !rom.value) return;
   rom.value.url_cover = coverUrl;
   imagePreviewUrl.value = coverUrl;