Download files with more descriptive file name.

Author: robinjhuang

README.md

@@ -45,3 +45,10 @@ This generates react queries that you can use in your Components.
 #### Production
 
 Make a PR to the `main` branch. Once merged, Vercel will deploy to https://comfyregistry.org
+
+
+### CORS
+
+To enable CORS on the google cloud storage bucket, reference the `cors.json` file. More info [here](https://cloud.google.com/storage/docs/cross-origin#cors-components).
+
+`gcloud storage buckets update gs://comfy-registry --cors-file=cors.json`

components/nodes/NodeDetails.tsx

@@ -1,6 +1,9 @@
 import Image from 'next/image'
 import { useRouter } from 'next/router'
 import React, { useState } from 'react'
+import axios from 'axios'
+import download from 'downloadjs'
+import fileDownload from 'js-file-download'
 import { Button, Spinner } from 'flowbite-react'
 import nodesLogo from '../../public/images/nodesLogo.svg'
 import NodeVDrawer from './NodeVDrawer'
@@ -40,6 +43,17 @@ export function formatRelativeDate(dateString: string) {
     }
 }
 
+const downloadFile = async (url: string, filename: string) => {
+    try {
+        console.log('downloading file from:', url)
+        const response = await fetch(url)
+        const blob = await response.blob()
+        download(blob, filename, 'application/gzip')
+    } catch (error) {
+        console.error('Error downloading file:', error)
+    }
+}
+
 const NodeDetails = () => {
     const router = useRouter()
     const { publisherId, nodeId } = router.query
@@ -300,15 +314,26 @@ const NodeDetails = () => {
                         {data.latest_version?.downloadUrl && (
                             <Button
                                 className="flex-shrink-0 px-4 text-white bg-blue-500 rounded whitespace-nowrap text-[16px]"
-                                onClick={() =>
+                                onClick={(
+                                    e: React.MouseEvent<HTMLButtonElement>
+                                ) => {
+                                    e.preventDefault()
+                                    console.log('clicked download')
+                                    if (
+                                        data &&
+                                        data.latest_version?.downloadUrl
+                                    ) {
+                                        downloadFile(
+                                            data.latest_version?.downloadUrl,
+                                            `${data.name}_${data.latest_version.version}.zip`
+                                        )
+                                    }
                                     analytic.track(
                                         'Download Latest Node Version'
                                     )
-                                }
+                                }}
                             >
-                                <Link href={data.latest_version?.downloadUrl}>
-                                    Download Latest
-                                </Link>
+                                <a>Download Latest</a>
                             </Button>
                         )}
                     </div>

cors.json

@@ -0,0 +1,8 @@
+[
+    {
+      "origin": ["*"],
+      "method": ["GET", "HEAD"],
+      "responseHeader": ["*"],
+      "maxAgeSeconds": 3000
+    }
+]

package.json

@@ -21,6 +21,7 @@
     "@next/mdx": "12.3.1",
     "@tanstack/react-query": "^5.17.19",
     "axios": "^1.6.5",
+    "downloadjs": "^1.4.7",
     "firebase": "^10.11.1",
     "flowbite": "^2.3.0",
     "flowbite-react": "0.7.5",
@@ -41,6 +42,7 @@
     "@babel/core": "7.19.3",
     "@mdx-js/react": "2.1.4",
     "@types/async-busboy": "^1.1.1",
+    "@types/downloadjs": "^1.4.6",
     "@types/mixpanel-browser": "^2.49.0",
     "@types/node": "18.8.3",
     "@types/qs": "^6.9.15",