add profile picture upload feature. drag and drop allowed.

package.json

@@ -5,10 +5,12 @@
   "dependencies": {
     "@testing-library/user-event": "^13.2.1",
     "axios": "^1.7.2",
+    "dropzone": "^6.0.0-beta.2",
     "eslint": "^8.40.0",
     "eslint-plugin-react": "^7.32.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.24.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.0"
   },

src/components/personal-info.jsx

@@ -1,4 +1,5 @@
 import React, {useState} from "react";
+import axios from 'axios';
 
 function PersonalInfo() {
   const [userInfo, setUserInfo] = useState({
@@ -18,7 +19,7 @@ const handleSubmit = async (e) => {
       const response = await axios.post("/resume/personal", //update the route after it's implemented in the backend
       ...userInfo);
       console.log(`user info added with ID: ${response.data.id}`);
-      navigateTo("mainMenu");
+      //navigateTo("mainMenu");
     } catch (error) {
       console.error("Error adding user info:", error);
       alert("Failed to add user info.");
@@ -40,6 +41,10 @@ const handleSubmit = async (e) => {
 
         <label for="email">Enter your email address: </label>
         <input type="tel" name="number"></input>
+
+        <label for="profile-pic">Upload you profile picture here: </label>
+        <input type="file" name="file" onChange={handleChange}/>
+
         <button type="submit">Save</button>
       </form>
   );