feat(web): add custom file download button for runs output

2023-12-20 23:14:01 +08:00
parent 8f67a136c3
commit ee68507755
10 changed files with 54 additions and 30 deletions
@@ -0,0 +1,31 @@
+'use client'
+
+import { Download } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { getFileDownloadUrl } from "@/server/getFileDownloadUrl";
+
+
+export 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}`
+        )}`} />
+    );
+  } 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>;
+  }
+}