Add file upload functionality

frontend/src/App.tsx

@@ -1,7 +1,8 @@
 // import Gamefield from './components/Gamefield';
 // import Homepage from './components/Homepage';
 // import Homepage2 from './components/Homepage2';
-import SocketIO from './components/SocketIO';
+// import SocketIO from './components/SocketIO';
+import Upload from './components/Upload';
 import './styles/App.scss';
 
 function App() {
@@ -13,7 +14,8 @@ function App() {
         {/* <Gamefield/> */}
         {/* <Homepage/> */}
         {/* <Homepage2/> */}
-        <SocketIO/>
+        {/* <SocketIO/> */}
+        <Upload />
       </header>
     </div>
   );

frontend/src/components/Upload.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+
+function Upload() {
+    const [file, setFile] = useState('');
+    const [filename, setFilename] = useState('');
+
+    // function handleChange
+    function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+        console.log(e.target.files);
+        if (!e.target.files?.length)
+            return
+        const file = e.target.files[0]
+        console.log(URL.createObjectURL(e.target.files[0]))
+        setFile(URL.createObjectURL(e.target.files[0]));
+        setFilename(e.target.files[0].name);
+
+
+        const url = 'http://localhost:5000/api/upload';
+        const formData = new FormData();
+        formData.append('filetoupload', file);
+
+        console.log(file)
+
+        const config = {
+            method: 'POST',
+            body: formData
+        };
+
+        fetch(url, config)
+            .then((response) => {
+                console.log(response.body)
+            })
+            .catch(error => console.log(error))
+    }
+    return (
+        <div>
+            <h2>Add Image:</h2>
+            <input type="file" className='inputt' onChange={handleChange} />
+            <img src={file} alt={filename || 'No selection'} />
+        </div>
+    )
+}
+
+export default Upload

frontend/src/styles/App.scss

@@ -186,4 +186,11 @@
       grid-area: 4 / 4 / -4 / -4;
     }
   }
+}
+
+.inputt {
+  background-color: #61dafb;
+  &:hover {
+    background-color: red;
+  }
 }