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;