Upload page (#7)

* initial setup for upload page

* wip: uploading pdfs

* wip: connecting front end and server

* Finals changes before merge

* Fix: added each file separately to formData

---------

Co-authored-by: isabe <[email protected]>

Author: ConnerWithAnE

server/src/gpt-controller.ts

@@ -3,7 +3,14 @@ import { GPTModel } from "./enums";
 import { FileObject } from "openai/resources";
 import path, { resolve } from "path";
 import fs from "fs";
-import { AssistantBody, GPTResponse, ThreadMessage, GPTData, Testing, TestLocation } from "./types";
+import {
+  AssistantBody,
+  GPTResponse,
+  ThreadMessage,
+  GPTData,
+  Testing,
+  TestLocation,
+} from "./types";
 import { prompt, questions } from "./prompts.data";
 import { threadId } from "worker_threads";
 
@@ -49,7 +56,7 @@ export class GPTController {
       const loopPromises = Array.from({ length: 3 }, async (_) => {
         const assistant = await this.createAssistant(assistantParams);
         const thread = await this.createThread(threadMessage);
-        
+
         // Run the assistant on the thread and get the prompt results
         let run = await GPTController.client.beta.threads.runs.createAndPoll(
           thread.id,
@@ -65,17 +72,23 @@ export class GPTController {
           // console.log("Tokens used: ", run.usage)
           var n = 1;
           for (const message of messages.data.reverse()) {
-            if (message.content[0].type == "text") {          // Need to check if the message content is text before parsing it
+            if (message.content[0].type == "text") {
+              // Need to check if the message content is text before parsing it
               var result = message.content[0].text.value;
               //console.log("Result: ", result)                                 // FOR DEBUGGING
-              if(n % 2 == 0) {                                // Every second message has the data values
+              if (n % 2 == 0) {
+                // Every second message has the data values
                 // console.log(`${message.role} > ${result}`);                  // FOR DEBUGGING
-                let preres = result.split("ø").map((s) => s.replace("\n", "") && s.replace(/^\s+/g, ""));   // Trimming each string
-                console.log("After split: ", preres)
-                var resvalues: GPTData =  {
+                let preres = result
+                  .split("ø")
+                  .map((s) => s.replace("\n", "") && s.replace(/^\s+/g, "")); // Trimming each string
+                console.log("After split: ", preres);
+                var resvalues: GPTData = {
                   paper_name: preres[0],
                   year: parseInt(preres[1]),
-                  author: preres[2].split("¶").map((s) => s.replace(/^\s+/g, "")),
+                  author: preres[2]
+                    .split("¶")
+                    .map((s) => s.replace(/^\s+/g, "")),
                   part_no: preres[3],
                   type: preres[4],
                   manufacturer: preres[5],
@@ -84,9 +97,9 @@ export class GPTController {
                   testing_type: <Testing>preres[7],
                   // TODO: preres[7] is a list ("TID, TID, DD") if the paper has more than one testing type, so the cast may fail
                   //       Produces weird output: "SEE【4:0†source】"
-                  data_type: 0                          // TODO: Need to be removed hear, from the defined data types and in db controller
+                  data_type: 0, // TODO: Need to be removed hear, from the defined data types and in db controller
                 };
-                console.log(resvalues)
+                console.log(resvalues);
                 threadResults.push(resvalues);
               }
               n++;

server/src/routes/admin-router.ts

@@ -43,11 +43,13 @@ export default function adminRouter(
     authenticateJWT,
     upload.array("pdfs"),
     (req: Request, res: Response) => {
+      
       try {
-        // TODO
-        parsePapers(req.files, gptController).then((result: GPTResponse[]) => {
-          res.send(responseToJSON(result));
-        });
+        console.log(req.files);
+       // TODO
+       // parsePapers(req.files, gptController).then((result: GPTResponse[]) => {
+        //  res.send(responseToJSON(result));
+        //});
       } catch (error) {
         console.error(`${error}`);
       }

web/src/App.tsx

@@ -50,7 +50,6 @@ function App() {
             </Routes>
         </BrowserRouter>
     );
-
 }
 
 export default App;

web/src/pages/UploadPage.tsx

@@ -1,7 +1,72 @@
-import "../App.css"
+import { ChangeEvent, useState } from "react";
+import "../App.css";
+import { Button, Input } from "@nextui-org/react";
 
 export default function UploadPage() {
+  const [files, setFiles] = useState<File[]>([]);
+
+  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const selectedFiles = Array.from(event.target.files ?? []); // Convert FileList to an array
+    const validFiles = selectedFiles.filter(
+      (file) => file?.type === "application/pdf"
+    );
+
+    if (validFiles.length === 0) {
+      console.log("not valid files");
+      return;
+    } else {
+      setFiles((prevFiles) => [...prevFiles, ...validFiles]);
+    }
+  };
+
+  async function submitPapers() {
+    const token = localStorage.getItem("jwtToken");
+
+    const formData = new FormData();
+    for (let i = 0; i < files.length; i++) {
+      formData.append(files[i].name, files[i]);
+    }
+  
+    try {
+      const response = await fetch(
+        "http://localhost:3000/api/adminRequest/parseRequest",
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+          body: formData,
+        }
+      );
+      if (response.ok) {
+        const result = await response.json();
+        console.log(result);
+      } else {
+        console.error(`Failed to fetch papers: ${response.status}`);
+      }
+    } catch (error) {
+      console.error(`Error fetching papers: ${error}`);
+      throw error;
+    }
+  }
+
   return (
-    <div>Upload Page</div>
-  )
-}
+    <div>
+      <div>Upload Page</div>
+      <Input
+        type="file"
+        accept="application/pdf"
+        multiple
+        onChange={handleFileChange}
+      />
+      <Button
+        className="bg-usask-green text-[#DADADA]"
+        type="submit"
+        onClick={submitPapers}
+      >
+        Upload
+      </Button>
+    </div>
+  );
+}