Task 3: Backend

task_3_react/src/client/App.tsx

@@ -1,9 +1,9 @@
-import "./App.css";
+import "./css/App.css";
 import '@fortawesome/fontawesome-free/css/all.css';
 import { readCSV } from './csv';
 import { CSV_Data, fileInfo } from './types';
 
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import Layout from "./Layout";
 import CSVCard from "./components/CSVCard";
 import InfoCard from "./components/InfoCard";
@@ -18,6 +18,8 @@ function App() {
     rowcount: 0
   });
 
+  const formRef = useRef(null);
+
   // This is triggered in CSVCard
   const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>): Promise<void> => {
     const file = e.target.files?.[0];
@@ -33,11 +35,22 @@ function App() {
     }
     setInfo(newFileInfo);
     setData(data);
+
+    if (formRef.current) {
+      // Upload to server
+      const formData = new FormData(formRef.current);
+      const res = await fetch("/upload", {
+        method: "POST",
+        body: formData
+      });
+      const result = await res.json();
+      console.log(result);
+    }
   }
 
   return (
       <Layout>
-        <CSVCard handleChange={handleFileChange}></CSVCard>
+        <CSVCard handleChange={handleFileChange} formRef={formRef}></CSVCard>
         <InfoCard info={info}></InfoCard>
         <DataTable data={data}></DataTable>
       </Layout>