From b42a53e99b625a1025256ae3d2a027e87cacf3f4 Mon Sep 17 00:00:00 2001 From: Karan-Salvi Date: Tue, 15 Apr 2025 03:41:16 +0530 Subject: [PATCH] feat:Added upload file functionality --- Frontend/package-lock.json | 109 ++++++++++++++++++++- Frontend/src/components/FileUpload.jsx | 68 +++++++++++++ Frontend/src/pages/UserPages/Dashboard.jsx | 92 ++++++++++++++++- Frontend/src/utils/api.js | 34 +++++++ 4 files changed, 296 insertions(+), 7 deletions(-) create mode 100644 Frontend/src/components/FileUpload.jsx create mode 100644 Frontend/src/utils/api.js diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json index 3a4322a..fa6a50a 100644 --- a/Frontend/package-lock.json +++ b/Frontend/package-lock.json @@ -8,10 +8,13 @@ "name": "drive-thru", "version": "0.0.0", "dependencies": { + "@reduxjs/toolkit": "^2.6.0", "@tailwindcss/vite": "^4.0.9", + "lucide-react": "^0.476.0", "react": "^19.0.0", "react-dom": "^19.0.0", "react-icons": "^5.5.0", + "react-redux": "^9.2.0", "react-router-dom": "^7.2.0" }, "devDependencies": { @@ -921,6 +924,30 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@reduxjs/toolkit": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.6.1.tgz", + "integrity": "sha512-SSlIqZNYhqm/oMkXbtofwZSt9lrncblzo6YcZ9zoX+zLngRBrCOjK4lNLdkNucJF58RHOWrD9txT3bT3piH7Zw==", + "license": "MIT", + "dependencies": { + "immer": "^10.0.3", + "redux": "^5.0.1", + "redux-thunk": "^3.1.0", + "reselect": "^5.1.0" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17.0.0 || ^18 || ^19", + "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-redux": { + "optional": true + } + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.34.8", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.34.8.tgz", @@ -1420,7 +1447,7 @@ "version": "19.0.10", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.10.tgz", "integrity": "sha512-JuRQ9KXLEjaUNjTWpzuR231Z2WpIwczOkBEIvbHNCzQefFIT0L8IqE6NV6ULLyC1SI/i234JnDoMkfg+RjQj2g==", - "dev": true, + "devOptional": true, "dependencies": { "csstype": "^3.0.2" } @@ -1434,6 +1461,12 @@ "@types/react": "^19.0.0" } }, + "node_modules/@types/use-sync-external-store": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz", + "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==", + "license": "MIT" + }, "node_modules/@vitejs/plugin-react": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.4.tgz", @@ -1897,7 +1930,7 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true + "devOptional": true }, "node_modules/data-view-buffer": { "version": "1.0.2", @@ -2847,6 +2880,16 @@ "node": ">= 4" } }, + "node_modules/immer": { + "version": "10.1.1", + "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz", + "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/immer" + } + }, "node_modules/import-fresh": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz", @@ -3624,6 +3667,15 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.476.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.476.0.tgz", + "integrity": "sha512-x6cLTk8gahdUPje0hSgLN1/MgiJH+Xl90Xoxy9bkPAsMPOUiyRSKR4JCDPGVCEpyqnZXH3exFWNItcvra9WzUQ==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/math-intrinsics": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", @@ -3998,6 +4050,29 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "dev": true }, + "node_modules/react-redux": { + "version": "9.2.0", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz", + "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==", + "license": "MIT", + "dependencies": { + "@types/use-sync-external-store": "^0.0.6", + "use-sync-external-store": "^1.4.0" + }, + "peerDependencies": { + "@types/react": "^18.2.25 || ^19", + "react": "^18.0 || ^19", + "redux": "^5.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "redux": { + "optional": true + } + } + }, "node_modules/react-refresh": { "version": "0.14.2", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz", @@ -4045,6 +4120,21 @@ "react-dom": ">=18" } }, + "node_modules/redux": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", + "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==", + "license": "MIT" + }, + "node_modules/redux-thunk": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz", + "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==", + "license": "MIT", + "peerDependencies": { + "redux": "^5.0.0" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz", @@ -4087,6 +4177,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/reselect": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz", + "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==", + "license": "MIT" + }, "node_modules/resolve": { "version": "2.0.0-next.5", "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz", @@ -4658,6 +4754,15 @@ "punycode": "^2.1.0" } }, + "node_modules/use-sync-external-store": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz", + "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==", + "license": "MIT", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/vite": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.0.tgz", diff --git a/Frontend/src/components/FileUpload.jsx b/Frontend/src/components/FileUpload.jsx new file mode 100644 index 0000000..2d017c8 --- /dev/null +++ b/Frontend/src/components/FileUpload.jsx @@ -0,0 +1,68 @@ +import React, { useState } from "react"; +import { uploadFileToHDFS } from "../utils/api"; + +const FileUpload = () => { + const [file, setFile] = useState(null); + const [hdfsPath, setHdfsPath] = useState("/kalas"); + const [uploadedFileName, setUploadedFileName] = useState(""); + const [username, setUsername] = useState("kalas"); + + const handleSubmit = (e) => { + e.preventDefault(); + if (!file || !uploadedFileName) { + return; + } + uploadFileToHDFS(file, hdfsPath, uploadedFileName, username); + }; + + return ( +
+

Upload File Your File

+ + { + setFile(e.target.files[0]); + setUploadedFileName(e.target.files[0]?.name || ""); + }} + className="mb-2" + /> + + {/* setHdfsPath(e.target.value)} + className="border p-2 mb-2 w-full" + /> */} + + {/* setUploadedFileName(e.target.value)} + className="border p-2 mb-2 w-full" + /> */} + + {/* setUsername(e.target.value)} + className="border p-2 mb-2 w-full" + /> */} + + +
+ ); +}; + +export default FileUpload; diff --git a/Frontend/src/pages/UserPages/Dashboard.jsx b/Frontend/src/pages/UserPages/Dashboard.jsx index 887f332..b04bf35 100644 --- a/Frontend/src/pages/UserPages/Dashboard.jsx +++ b/Frontend/src/pages/UserPages/Dashboard.jsx @@ -1,17 +1,99 @@ import React from "react"; import Sidebar from "../../components/Sidebar"; +import FileUpload from "../../components/FileUpload"; +import { FiPlus } from "react-icons/fi"; const Dashboard = () => { + const handlefetch = async () => { + fetch("http://192.168.29.61:8080/api/hdfs/listFiles?hdfsPath=/") + .then((response) => response.json()) + .then((data) => console.log(data)); + }; + + handlefetch(); return ( <> + {/* */} +
-

Dashboard

-

- This is your custom dashboard body. Place your widgets, charts, - stats, or other components here. -

+
+

Dashboard

+ +
+ +
+ {/* */} +
diff --git a/Frontend/src/utils/api.js b/Frontend/src/utils/api.js new file mode 100644 index 0000000..0c47348 --- /dev/null +++ b/Frontend/src/utils/api.js @@ -0,0 +1,34 @@ +// utils/api.js +export const uploadFileToHDFS = async ( + file, + hdfsPath, + uploadedFileName, + username +) => { + const formData = new FormData(); + formData.append("file", file); + formData.append("hdfsPath", "/kalas"); + formData.append("uploadedFileName", uploadedFileName); + formData.append("username", "kalas"); + + try { + const response = await fetch( + "http://192.168.29.61:8080/api/hdfs/uploadFile", + { + method: "POST", + body: formData, + } + ); + + if (response.ok) { + const data = await response.json(); // or response.json() if JSON is returned + + console.log("Response:", data); + } else { + console.error("Upload failed with status:", response.status); + } + } catch (error) { + console.error("Error uploading file:", error); + alert("An error occurred while uploading the file."); + } +};