From 7caabc066ac128163ba921127ef3ce4b94ca6d7a Mon Sep 17 00:00:00 2001 From: Georges-Antoine Assi Date: Sun, 15 Feb 2026 17:41:17 -0500 Subject: [PATCH 1/2] [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; From 300efdcb28c09977c50d95f326272a610844bc2d Mon Sep 17 00:00:00 2001 From: Georges-Antoine Assi Date: Sun, 15 Feb 2026 17:52:12 -0500 Subject: [PATCH 2/2] cleanup --- .../Gallery/AppBar/Collection/CollectionInfoDrawer.vue | 4 ++-- .../components/common/Collection/Dialog/CreateCollection.vue | 4 ++-- frontend/src/components/common/Game/Dialog/EditRom.vue | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue b/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue index e45561f65..c8255f59f 100644 --- a/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue +++ b/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue @@ -82,8 +82,8 @@ function previewImage(event: Event) { imagePreviewUrl.value = reader.result?.toString() || ""; removeCover.value = false; }; - if (input.files[0]) { - reader.readAsDataURL(input.files[0]); + if (updatedCollection.value.artwork) { + reader.readAsDataURL(updatedCollection.value.artwork); } } diff --git a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue index 35f9eccc9..d68753108 100644 --- a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue +++ b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue @@ -59,8 +59,8 @@ function previewImage(event: Event) { imagePreviewUrl.value = reader.result?.toString() || ""; removeCover.value = false; }; - if (input.files[0]) { - reader.readAsDataURL(input.files[0]); + if (collection.value.artwork) { + reader.readAsDataURL(collection.value.artwork); } } diff --git a/frontend/src/components/common/Game/Dialog/EditRom.vue b/frontend/src/components/common/Game/Dialog/EditRom.vue index ba4b2b401..1f6dbdda0 100644 --- a/frontend/src/components/common/Game/Dialog/EditRom.vue +++ b/frontend/src/components/common/Game/Dialog/EditRom.vue @@ -65,8 +65,8 @@ function previewImage(event: Event) { imagePreviewUrl.value = reader.result?.toString() || ""; removeCover.value = false; }; - if (input.files[0]) { - reader.readAsDataURL(input.files[0]); + if (rom.value.artwork) { + reader.readAsDataURL(rom.value.artwork); } }