Wmg write upload

.github/workflows/ci-app.yml

@@ -106,18 +106,3 @@ jobs:
 
       - run: npm ci
       - run: npm run build -- --no-lint
-
-  # Confirms Storybook still builds successfully
-  check-storybook-builds:
-    name: Build check - Storybook
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          cache-dependency-path: ${{ env.LOCKFILE_PATH }}
-          cache: ${{ env.PACKAGE_MANAGER }}
-      - run: npm ci
-      - run: npm run storybook-build

app/.eslintrc.js

@@ -37,14 +37,6 @@ module.exports = {
         "@typescript-eslint/no-unused-vars": "error",
         // The usage of `any` defeats the purpose of typescript. Consider using `unknown` type instead instead.
         "@typescript-eslint/no-explicit-any": "error",
-        "@typescript-eslint/no-misused-promises": [
-          2,
-          {
-            checksVoidReturn: {
-              attributes: false,
-            },
-          },
-        ],
       },
     },
   ],

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,6 +22,7 @@
     "@storybook/addon-links": "^6.0.0",
     "@trussworks/react-uswds": "^5.0.0",
     "@uswds/uswds": "3.1.0",
+    "formidable": "^3.5.1",
     "i18next": "^22.4.12",
     "next": "^12.1.2",
     "next-i18next": "^13.2.2",
@@ -38,6 +39,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
+    "@types/formidable": "^3.4.5",
     "@types/jest-axe": "^3.5.5",
     "@types/node": "^18.15.3",
     "@types/react": "^17.0.2",

app/src/pages/api/upload.ts

@@ -1,22 +1,37 @@
+import formidable from "formidable";
+import fs from "fs";
 import type { NextApiRequest, NextApiResponse } from "next";
+import os from "os";
+import path from "path";
 
 export const config = {
   api: {
-    bodyParser: {
-      sizeLimit: "10mb",
-    },
+    bodyParser: false,
   },
 };
 
 type ResponseData = {
   message: string;
 };
 
-export default function handler(
+export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse<ResponseData>
 ) {
   if (req.method === "POST") {
+    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!" });
   }
 }

app/src/pages/upload/index.tsx

@@ -22,11 +22,11 @@ const Home = (props: { onSubmit?: () => void }) => {
     }
   }, []);
 
-  const onFileChange = async (/* e: ChangeEvent */) => {
+  const onFileChange = (/* e: ChangeEvent */) => {
     // check bluriness as part of the preview process?
   };
 
-  const onSubmit = async (e: SyntheticEvent): Promise<void> => {
+  const onSubmit = (e: SyntheticEvent): void => {
     e.preventDefault();
 
     if (props.onSubmit) {
@@ -35,25 +35,22 @@ 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);
-
-      try {
-        await fetch("/api/upload/", {
-          method: "POST",
-          body,
-        });
-      } catch (e) {
-        console.log(e);
-      } finally {
-        console.log("finished");
-      }
+
+      Object.values(files).forEach((file) => {
+        body.append(file.name, file);
+      });
+
+      fetch("/api/upload/", {
+        method: "POST",
+        body,
+      }).catch(console.error);
     }
 
     router.push("/upload/confirmation").catch(console.error);