Merge pull request #65 from amosproj/feat/upload-of-pdf-documents

Feat/upload of pdf documents

Author: nikolas-rauscher

Project/frontend/.env.development

@@ -0,0 +1 @@
+VITE_BACKEND_HOST= 'http://localhost:8000'

Project/frontend/.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.vite/*
+

Project/frontend/package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "frontend",
+  "name": "Graph Masters frontend",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -10,10 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "filepond-plugin-file-validate-type": "^1.2.9",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-filepond": "^7.1.2"
   },
   "devDependencies": {
+    "@types/node": "^20.12.12",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",

Project/frontend/package.json

@@ -14,4 +14,11 @@ body {
 .logo {
   height: 300px;
   padding: 1.5em;
+}
+
+.main_wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
 }

Project/frontend/src/components/App/index.css

@@ -1,15 +1,19 @@
 import logo from "../../assets/team-logo.svg";
+import Upload from "../Upload";
+
 
 import "./index.css";
 
 function App() {
   return (
-    <>
+    <main className="main_wrapper">
+
       <header>
         <h2>AMOS Project SS24 - Knowledge Graph Extractor</h2>
       </header>
       <img className="logo" src={logo} alt="" />
-    </>
+      <Upload />
+    </main>
   );
 }
 

Project/frontend/src/components/App/index.tsx

@@ -0,0 +1,3 @@
+.upload_wrapper {
+  width: 500px;
+}

Project/frontend/src/components/Upload/index.css

@@ -0,0 +1,24 @@
+
+import { FilePond, registerPlugin } from 'react-filepond'
+
+import 'filepond/dist/filepond.min.css'
+import "./index.css";
+import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
+// Register the plugin
+registerPlugin(FilePondPluginFileValidateType);
+
+
+function Upload() {
+  return <section className="upload_wrapper">
+    <FilePond
+      allowMultiple={false}
+      server={`${import.meta.env.VITE_BACKEND_HOST}/api/upload`}
+      name="file"
+      labelIdle='Drag & Drop your files or <span class="filepond--label-action">Browse</span>'
+      acceptedFileTypes={["application/pdf"]}
+      credits={false}
+    />
+  </section>
+}
+
+export default Upload;