From 54a207d5eb80a669bf353abad177616df2ab80a2 Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Sat, 15 Nov 2025 12:52:19 -0300
Subject: [PATCH] fix: download buttons for png and svg

---
 src/components/AssetDownload/index.tsx | 47 ++++++++++++++++++++++----
 1 file changed, 40 insertions(+), 7 deletions(-)

diff --git a/src/components/AssetDownload/index.tsx b/src/components/AssetDownload/index.tsx
index 7e110988e4d..ba9518ed5e4 100644
--- a/src/components/AssetDownload/index.tsx
+++ b/src/components/AssetDownload/index.tsx
@@ -5,13 +5,12 @@ import type { ImageProps, StaticImageData } from "next/image"
 
 import AssetDownloadArtist from "@/components/AssetDownload/AssetDownloadArtist"
 import AssetDownloadImage from "@/components/AssetDownload/AssetDownloadImage"
+import { Button } from "@/components/ui/buttons/Button"
+import { Flex, Stack } from "@/components/ui/flex"
 
 import { cn } from "@/lib/utils/cn"
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
-import { ButtonLink } from "../ui/buttons/Button"
-import { Flex, Stack } from "../ui/flex"
-
 import { useTranslation } from "@/hooks/useTranslation"
 
 type AssetDownloadProps = {
@@ -41,6 +40,40 @@ const AssetDownload = ({
       eventName: title,
     })
   }
+
+  const handleDownload = async (url: string, fileExtension: string) => {
+    if (!url) return
+
+    matomoHandler()
+
+    try {
+      const response = await fetch(url)
+      const blob = await response.blob()
+      const blobUrl = window.URL.createObjectURL(blob)
+      const link = document.createElement("a")
+      link.href = blobUrl
+      link.download = `${title.replace(/\s+/g, "-").toLowerCase()}.${fileExtension}`
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+      window.URL.revokeObjectURL(blobUrl)
+    } catch (error) {
+      console.error("Failed to download file:", error)
+    }
+  }
+
+  const handleSvgDownload = () => {
+    if (!svgUrl) return
+    handleDownload(svgUrl, "svg")
+  }
+
+  const handleImageDownload = () => {
+    const imgSrc = (image as StaticImageData).src
+    if (!imgSrc) return
+    const fileExt = extname(imgSrc).slice(1)
+    handleDownload(imgSrc, fileExt)
+  }
+
   const imgSrc = (image as StaticImageData).src
 
   return (
@@ -56,14 +89,14 @@ const AssetDownload = ({
         )}
       </div>
       <Flex className="mt-4 gap-5">
-        <ButtonLink href={imgSrc} onClick={matomoHandler} target="_blank">
+        <Button onClick={handleImageDownload}>
           {t("page-assets-download-download")} (
           {extname(imgSrc).slice(1).toUpperCase()})
-        </ButtonLink>
+        </Button>
         {svgUrl && (
-          <ButtonLink href={svgUrl} onClick={matomoHandler} target="_blank">
+          <Button onClick={handleSvgDownload}>
             {t("page-assets-download-download")} (SVG)
-          </ButtonLink>
+          </Button>
         )}
       </Flex>
     </Stack>