Simplify and print new location

DSACMS · Feb 1, 2024 · fd1c8bb · fd1c8bb
1 parent 757dc8f
commit fd1c8bb
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 58 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "build": "next build",
-    "dev": "next dev",
+    "dev": "NODE_OPTIONS='--inspect' next dev",
     "format": "prettier --write '**/*.{js,json,md,mdx,ts,tsx,scss,yaml,yml}'",
     "format-check": "prettier --check '**/*.{js,json,md,mdx,ts,tsx,scss,yaml,yml}'",
     "lint": "next lint --dir src --dir stories --dir .storybook --dir tests --dir scripts --dir app --dir lib --dir types",
@@ -22,7 +22,7 @@
     "@storybook/addon-links": "^6.0.0",
     "@trussworks/react-uswds": "^5.0.0",
     "@uswds/uswds": "3.1.0",
-    "busboy": "^1.6.0",
+    "formidable": "^3.5.1",
     "i18next": "^22.4.12",
     "next": "^12.1.2",
     "next-i18next": "^13.2.2",
@@ -39,7 +39,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
-    "@types/busboy": "^1.5.3",
+    "@types/formidable": "^3.4.5",
     "@types/jest-axe": "^3.5.5",
     "@types/node": "^18.15.3",
     "@types/react": "^17.0.2",

diff --git a/app/src/pages/api/upload.ts b/app/src/pages/api/upload.ts
@@ -1,10 +1,8 @@
-import Busboy from "busboy";
+import formidable from "formidable";
 import fs from "fs";
 import type { NextApiRequest, NextApiResponse } from "next";
 import os from "os";
 import path from "path";
-import { inspect } from "util";
-import type { Busboy as BusboyClass, FileInfo } from 'busboy';
 
 export const config = {
   api: {
@@ -16,57 +14,24 @@ type ResponseData = {
   message: string;
 };
 
-async function r(req: NextApiRequest) {
-  return new Promise((resolve) => {
-    const busboy = Busboy({ headers: req.headers });
-
-    // From example: https://gist.github.com/konojunya/b337a4e048b5dac4f9385b5a0cfd7c62
-    busboy.on(
-      "file",
-      (
-        fieldname: string,
-        file: BusboyClass,
-        filename: FileInfo,
-        encoding: string,
-        mimetype: string
-      ): void => {
-        console.log(
-          "File [" +
-            fieldname +
-            "]: filename: " +
-            inspect(filename) +
-            ", encoding: " +
-            encoding +
-            ", mimetype: " +
-            mimetype
-        );
-        file.on("data", (data: string) => {
-          console.log(`File  ["${fieldname}'] got ${data.length} bytes`);
-        });
-        file.on("end", () => {
-          console.log("File [" + fieldname + "] Finished");
-          console.log(`File [${fieldname}] Written to ${saveTo}`);
-        });
-
-        const saveTo = path.join(os.tmpdir(), filename.filename);
-        file.pipe(fs.createWriteStream(saveTo));
-      }
-    );
-    busboy.on("finish", () => {
-      console.log("Done parsing form!");
-
-      resolve(1);
-    });
-    req.pipe(busboy);
-  });
-}
-
 export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse<ResponseData>
 ) {
   if (req.method === "POST") {
-    await r(req);
+    const form = formidable({});
+    const [, files] = await form.parse(req);
+
+    Object.values(files).forEach((filelist = []) => {
+      const [file] = filelist;
+      if (file) {
+        const saveTo = path.join(os.tmpdir(), file.originalFilename || "");
+        fs.writeFileSync(saveTo, fs.readFileSync(file.filepath));
+        console.log(saveTo);
+      }
+    });
+
+    // todo: handle failure scenario!
     res.status(200).json({ message: "Success!" });
   }
 }
diff --git a/app/src/pages/upload/index.tsx b/app/src/pages/upload/index.tsx
@@ -35,14 +35,17 @@ const Home = (props: { onSubmit?: () => void }) => {
     }
 
     const target = e.target as typeof e.target & {
-      fileInputMultiple: { files: string };
+      fileInputMultiple: { files: FileList };
     };
     const fileInput = target.fileInputMultiple;
 
     if (fileInput) {
-      const [file] = fileInput.files;
+      const { files } = fileInput;
       const body = new FormData();
-      body.append("file", file);
+
+      Object.values(files).forEach((file) => {
+        body.append(file.name, file);
+      });
 
       fetch("/api/upload/", {
         method: "POST",