chunzhi/comfyui-deploy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: download url

Browse Source
This commit is contained in:
BennyKok 2023-12-29 16:23:45 +08:00
parent d54ed35755
commit 62f8ba2c70
4 changed files with 45 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/.env.example
View File

@ -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=

27
web/src/components/DownloadButton.tsx Normal file
View File

@ -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>
);
}

46
web/src/components/OutputRender.tsx
View File

@ -1,40 +1,22 @@
"use client";
import { Button } from "@/components/ui/button";
import { DownloadButton } from "./DownloadButton";
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 (
<img
className="max-w-[200px]"
alt={props.filename}
src={`/api/view?file=${encodeURIComponent(
`outputs/runs/${props.run_id}/${props.filename}`
)}`}
/>
const url = await getFileDownloadUrl(
`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");
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>
return <img className="max-w-[200px]" alt={props.filename} src={url} />;
} else {
const url = await getFileDownloadUrl(
`outputs/runs/${props.run_id}/${props.filename}`
);
console.log(url);
return <DownloadButton filename={props.filename} href={url} />;
}
}

3
web/src/server/replaceCDNUrl.ts
View File

@ -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(