fix: download url

web/.env.example

@@ -10,6 +10,8 @@ SPACES_REGION="nyc3"
 SPACES_BUCKET="comfyui-deploy"
 SPACES_KEY="xyz"
 SPACES_SECRET="aaa"
+SPACES_CDN_DONT_INCLUDE_BUCKET="false"
+SPACES_CDN_FORCE_PATH_STYLE="true"
 
 JWT_SECRET="openssl rand -hex 32"
 PLAUSIBLE_DOMAIN=

web/src/components/DownloadButton.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Download } from "lucide-react";
+
+export function DownloadButton(props: { href: string; filename: string }) {
+  return (
+    <Button
+      className="gap-2"
+      onClick={async () => {
+        const url = props.href;
+
+        console.log(url);
+
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = props.filename;
+        a.target = "_blank"; // Add this line
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+      }}
+    >
+      Download <Download size={14} />
+    </Button>
+  );
+}

web/src/components/OutputRender.tsx

@@ -1,40 +1,22 @@
-"use client";
+import { DownloadButton } from "./DownloadButton";
-
-import { Button } from "@/components/ui/button";
 import { getFileDownloadUrl } from "@/server/getFileDownloadUrl";
-import { Download } from "lucide-react";
 
-export function OutputRender(props: { run_id: string; filename: string }) {
+export async function OutputRender(props: {
+  run_id: string;
+  filename: string;
+}) {
   if (props.filename.endsWith(".png")) {
-    return (
+    const url = await getFileDownloadUrl(
-      <img
+      `outputs/runs/${props.run_id}/${props.filename}`
-        className="max-w-[200px]"
-        alt={props.filename}
-        src={`/api/view?file=${encodeURIComponent(
-          `outputs/runs/${props.run_id}/${props.filename}`
-        )}`}
-      />
     );
-  } else {
-    return (
-      <Button
-        className="gap-2"
-        onClick={async () => {
-          const url = await getFileDownloadUrl(
-            `outputs/runs/${props.run_id}/${props.filename}`
-          );
 
-          const a = document.createElement("a");
+    return <img className="max-w-[200px]" alt={props.filename} src={url} />;
-          a.href = url;
+  } else {
-          a.download = props.filename;
+    const url = await getFileDownloadUrl(
-          a.target = "_blank"; // Add this line
+      `outputs/runs/${props.run_id}/${props.filename}`
-          document.body.appendChild(a);
-          a.click();
-          document.body.removeChild(a);
-        }}
-      >
-        Download <Download size={14} />
-      </Button>
     );
+    console.log(url);
+
+    return <DownloadButton filename={props.filename} href={url} />;
   }
 }

web/src/server/replaceCDNUrl.ts

@@ -7,9 +7,10 @@ export function replaceCDNUrl(url: string) {
     );
     // When using digital ocean, we need to use the bucket name in the URL
   } else if (process.env.SPACES_CDN_FORCE_PATH_STYLE === "false") {
+    const cdnUrl = new URL(process.env.SPACES_ENDPOINT_CDN!);
     url = url.replace(
       `${process.env.SPACES_ENDPOINT}/${process.env.SPACES_BUCKET}`,
-      `${process.env.SPACES_BUCKET}.${process.env.SPACES_ENDPOINT_CDN}}`
+      `${cdnUrl.protocol}//${process.env.SPACES_BUCKET}.${cdnUrl.host}`
     );
   } else {
     url = url.replace(