added tar creation when using Download All

bun.lock

@@ -10,6 +10,7 @@
         "@kitajs/html": "^4.2.9",
         "elysia": "^1.3.4",
         "sanitize-filename": "^1.6.3",
+        "tar": "^7.4.3",
       },
       "devDependencies": {
         "@eslint/js": "^9.28.0",

package.json

@@ -20,7 +20,8 @@
     "@elysiajs/static": "^1.3.0",
     "@kitajs/html": "^4.2.9",
     "elysia": "^1.3.4",
-    "sanitize-filename": "^1.6.3"
+    "sanitize-filename": "^1.6.3",
+    "tar": "^7.4.3"
   },
   "module": "src/index.tsx",
   "type": "module",

public/results.js

@@ -1,18 +1,4 @@
 const webroot = document.querySelector("meta[name='webroot']").content;
-
-window.downloadAll = function () {
-  // Get all download links
-  const downloadLinks = document.querySelectorAll("a[download]");
-
-  // Trigger download for each link
-  downloadLinks.forEach((link, index) => {
-    // We add a delay for each download to prevent them from starting at the same time
-    setTimeout(() => {
-      const event = new MouseEvent("click");
-      link.dispatchEvent(event);
-    }, index * 100);
-  });
-};
 const jobId = window.location.pathname.split("/").pop();
 const main = document.querySelector("main");
 let progressElem = document.querySelector("progress");

src/pages/download.tsx

@@ -4,6 +4,8 @@ import { outputDir } from "..";
 import db from "../db/db";
 import { WEBROOT } from "../helpers/env";
 import { userService } from "./user";
+import path from "node:path";
+import * as tar from "tar";
 
 export const download = new Elysia()
   .use(userService)
@@ -35,8 +37,7 @@ export const download = new Elysia()
       return Bun.file(filePath);
     },
   )
-  .get("/zip/:userId/:jobId", async ({ params, jwt, redirect, cookie: { auth } }) => {
+  .get("/archive/:userId/:jobId", async ({ params, jwt, redirect, cookie: { auth } }) => {
-    // TODO: Implement zip download
     if (!auth?.value) {
       return redirect(`${WEBROOT}/login`, 302);
     }
@@ -54,9 +55,11 @@ export const download = new Elysia()
       return redirect(`${WEBROOT}/results`, 302);
     }
 
-    // const userId = decodeURIComponent(params.userId);
+    const userId = decodeURIComponent(params.userId);
-    // const jobId = decodeURIComponent(params.jobId);
+    const jobId = decodeURIComponent(params.jobId);
-    // const outputPath = `${outputDir}${userId}/`{jobId}/);
+    const outputPath = `${outputDir}${userId}/${jobId}`;
+    const outputTar = path.join(outputPath, `converted_files_${jobId}.tar`)
 
-    // return Bun.zip(outputPath);
+    await tar.create({file: outputTar, cwd: outputPath, filter: (path) => { return path.match(".*\\.tar") ? false : true; }}, ["."]);
+    return Bun.file(outputTar);
   });

src/pages/results.tsx

@@ -6,12 +6,17 @@ import db from "../db/db";
 import { Filename, Jobs } from "../db/types";
 import { ALLOW_UNAUTHENTICATED, WEBROOT } from "../helpers/env";
 import { userService } from "./user";
+import { JWTPayloadSpec } from "@elysiajs/jwt";
 
 function ResultsArticle({
+  user,
   job,
   files,
   outputPath,
 }: {
+  user: {
+    id: string;
+  } & JWTPayloadSpec;
   job: Jobs;
   files: Filename[];
   outputPath: string;
@@ -21,14 +26,19 @@ function ResultsArticle({
       <div class="mb-4 flex items-center justify-between">
         <h1 class="text-xl">Results</h1>
         <div>
-          <button
+          <a  
-            type="button"
+            style={files.length !== job.num_files ? "pointer-events: none;" : ""}
-            class="float-right w-40 btn-primary"
+            href={`${WEBROOT}/archive/${user.id}/${job.id}`}
-            onclick="downloadAll()"
+            download={`converted_files_${job.id}.tar`}
-            {...(files.length !== job.num_files ? { disabled: true, "aria-busy": "true" } : "")}
           >
-            {files.length === job.num_files ? "Download All" : "Converting..."}
+            <button
-          </button>
+              type="button"
+              class="float-right w-40 btn-primary"
+              {...(files.length !== job.num_files ? { disabled: true, "aria-busy": "true" } : "")}
+              >
+              {files.length === job.num_files ? "Download All" : "Converting..."}
+            </button>
+          </a>
         </div>
       </div>
       <progress
@@ -170,7 +180,7 @@ export const results = new Elysia()
               sm:px-4
             `}
           >
-            <ResultsArticle job={job} files={files} outputPath={outputPath} />
+            <ResultsArticle user={user} job={job} files={files} outputPath={outputPath} />
           </main>
           <script src={`${WEBROOT}/results.js`} defer />
         </>
@@ -211,5 +221,5 @@ export const results = new Elysia()
       .as(Filename)
       .all(params.jobId);
 
-    return <ResultsArticle job={job} files={files} outputPath={outputPath} />;
+    return <ResultsArticle user={user} job={job} files={files} outputPath={outputPath} />;
   });