Skip to content

Commit 59c33ad

Browse files
harshedabdullaharshedabdulla
committed
upload page
1 parent 9154d4f commit 59c33ad

File tree

4 files changed

+328
-7
lines changed

4 files changed

+328
-7
lines changed

‎client/src/App.jsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ import About from "./components/About";
1111
import Team from "./components/Team";
1212
import Studyplanner from "./components/Studyplanner";
1313
import Features from "./components/Features";
14-
14+
import Upload from "./components/Upload";
15+
import Uploadpyq from "./components/Uploadpyq";
16+
import Uploadsyllabus from "./components/Uploadsyllabus";
1517
function App() {
1618
return (
1719
<div className="container">
@@ -29,7 +31,9 @@ function App() {
2931
<Route path="/studyplanner" element={<Studyplanner/>} />
3032
<Route path="/features" element={<Features/>} />
3133
<Route path="/login" element={<Login/>} />
32-
34+
<Route path="/upload" element={<Upload/>} />
35+
<Route path="/uploadpyq" element={<Uploadpyq/>} />
36+
<Route path="/uploadsyllabus" element={<Uploadsyllabus/>} />
3337
</Routes>
3438
</BrowserRouter>
3539
</div>

‎client/src/components/Upload.jsx‎

Lines changed: 96 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,100 @@
1-
import React from 'react'
1+
import React, { useState } from 'react';
2+
import { Link } from 'react-router-dom';
3+
4+
function Upload() {
5+
const [numModules, setNumModules] = useState(0);
6+
const [numPYQs, setNumPYQs] = useState(0);
7+
8+
const handleModuleUpload = (moduleNumber) => {
9+
// Handle module upload logic here
10+
console.log(`Upload module ${moduleNumber} PDF`);
11+
};
12+
13+
const handlePYQUpload = (pyqNumber) => {
14+
// Handle PYQ upload logic here
15+
console.log(`Upload PYQ ${pyqNumber} PDF`);
16+
};
17+
18+
const handleSyllabusUpload = () => {
19+
// Handle syllabus upload logic here
20+
console.log('Upload syllabus');
21+
};
22+
23+
const handleNumModulesChange = (event) => {
24+
setNumModules(parseInt(event.target.value, 10));
25+
};
26+
27+
const handleNumPYQsChange = (event) => {
28+
setNumPYQs(parseInt(event.target.value, 10));
29+
};
30+
31+
const renderModuleUploadButtons = () => {
32+
const buttons = [];
33+
34+
for (let i = 1; i <= numModules; i++) {
35+
buttons.push(
36+
<div key={`module-${i}`}>
37+
<label>Upload Module {i} PDF:</label>
38+
<Link to="/uploadnotes">
39+
<button onClick={() => handleModuleUpload(i)}>Upload</button>
40+
</Link>
41+
</div>
42+
);
43+
}
44+
45+
return buttons;
46+
};
47+
48+
const renderPYQUploadButtons = () => {
49+
const buttons = [];
50+
51+
for (let i = 1; i <= numPYQs; i++) {
52+
buttons.push(
53+
<div key={`pyq-${i}`}>
54+
<label>Upload PYQ {i} PDF:</label>
55+
<Link to="/uploadsyllabus">
56+
<button onClick={() => handlePYQUpload(i)}>Upload</button>
57+
</Link>
58+
</div>
59+
);
60+
}
61+
62+
return buttons;
63+
};
264

3-
const Upload = () => {
465
return (
5-
<div>Upload</div>
6-
)
66+
<div>
67+
<h2>Upload Notes</h2>
68+
<label htmlFor="num-modules">Number of Modules:</label>
69+
<input
70+
type="number"
71+
id="num-modules"
72+
min={0}
73+
value={numModules}
74+
onChange={handleNumModulesChange}
75+
/>
76+
{renderModuleUploadButtons()}
77+
78+
<h2>Upload PYQs</h2>
79+
<label htmlFor="num-pyqs">Number of PYQs:</label>
80+
<input
81+
type="number"
82+
id="num-pyqs"
83+
min={0}
84+
value={numPYQs}
85+
onChange={handleNumPYQsChange}
86+
/>
87+
{renderPYQUploadButtons()}
88+
89+
<h2>Upload Syllabus</h2>
90+
<div>
91+
<label>Upload Syllabus PDF:</label>
92+
<Link to="/uploadsyllabus">
93+
<button onClick={handleSyllabusUpload}>Upload</button>
94+
</Link>
95+
</div>
96+
</div>
97+
);
798
}
899

9-
export default Upload
100+
export default Upload;

‎client/src/components/Uploadpyq.jsx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import React, { useState } from 'react';
2+
import { motion } from 'framer-motion';
3+
import Lottie from 'lottie-react';
4+
import animationData from '../assets/95241-uploading.json';
5+
6+
function Uploadpyq() {
7+
const [selectedFile, setSelectedFile] = useState(null);
8+
const [uploading, setUploading] = useState(false);
9+
const [uploadSuccess, setUploadSuccess] = useState(false);
10+
11+
const handleFileChange = (event) => {
12+
setSelectedFile(event.target.files[0]);
13+
setUploadSuccess(false); // Reset upload success status when a new file is selected
14+
};
15+
16+
const handleUpload = () => {
17+
if (!selectedFile) {
18+
return;
19+
}
20+
21+
setUploading(true);
22+
23+
const reader = new FileReader();
24+
25+
reader.onload = () => {
26+
// Get the file contents
27+
const fileContents = reader.result;
28+
29+
// Create a Blob from the file contents
30+
const blob = new Blob([fileContents], { type: selectedFile.type });
31+
32+
// Create a file path within the Local_Storage/notes_pdf folder
33+
const filePath = `Local_Storage/notes_pdf/${selectedFile.name}`;
34+
35+
// Save the file locally
36+
saveFileLocally(filePath, blob)
37+
.then(() => {
38+
setUploadSuccess(true);
39+
})
40+
.catch((error) => {
41+
console.error('Error saving file:', error);
42+
})
43+
.finally(() => {
44+
setUploading(false);
45+
});
46+
};
47+
48+
reader.readAsArrayBuffer(selectedFile);
49+
};
50+
51+
const saveFileLocally = (filePath, file) => {
52+
return new Promise((resolve, reject) => {
53+
const virtualLink = document.createElement('a');
54+
virtualLink.href = URL.createObjectURL(file);
55+
virtualLink.download = filePath;
56+
virtualLink.addEventListener('load', () => {
57+
URL.revokeObjectURL(virtualLink.href);
58+
resolve();
59+
});
60+
virtualLink.addEventListener('error', (error) => {
61+
reject(error);
62+
});
63+
document.body.appendChild(virtualLink);
64+
virtualLink.click();
65+
document.body.removeChild(virtualLink);
66+
});
67+
};
68+
69+
return (
70+
<div className="flex flex-col items-center justify-center h-screen text-center">
71+
<motion.div
72+
className="bg-blue-500 text-white py-6 px-6 rounded-lg shadow-lg"
73+
initial={{ scale: 0 }}
74+
animate={{ scale: 1 }}
75+
transition={{ duration: 0.5 }}
76+
>
77+
<Lottie animationData={animationData} style={{ width: 400, height: 300 }} />
78+
<h1 className="text-3xl font-bold mb-4">Upload PYQ</h1>
79+
{!uploadSuccess ? (
80+
<>
81+
<input
82+
type="file"
83+
accept="application/pdf"
84+
className="mb-4"
85+
onChange={handleFileChange}
86+
/>
87+
<motion.button
88+
className={`bg-green-500 text-white py-2 px-6 rounded-lg ${
89+
uploading ? 'opacity-50 cursor-not-allowed' : ''
90+
}`}
91+
disabled={uploading || !selectedFile}
92+
onClick={handleUpload}
93+
whileHover={!uploading ? { scale: 1.05 } : {}}
94+
whileTap={!uploading ? { scale: 0.95 } : {}}
95+
>
96+
{uploading ? 'Uploaded' : 'Upload'}
97+
</motion.button>
98+
</>
99+
) : (
100+
<motion.div
101+
className="text-xl"
102+
initial={{ opacity: 0 }}
103+
animate={{ opacity: 1 }}
104+
>
105+
Upload successful!
106+
</motion.div>
107+
)}
108+
</motion.div>
109+
</div>
110+
);
111+
}
112+
113+
export default Uploadpyq;

‎client/src/components/Uploadsyllabus.jsx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import React, { useState } from 'react';
2+
import { motion } from 'framer-motion';
3+
import Lottie from 'lottie-react';
4+
import animationData from '../assets/95241-uploading.json';
5+
6+
function Uploadsyllabus() {
7+
const [selectedFile, setSelectedFile] = useState(null);
8+
const [uploading, setUploading] = useState(false);
9+
const [uploadSuccess, setUploadSuccess] = useState(false);
10+
11+
const handleFileChange = (event) => {
12+
setSelectedFile(event.target.files[0]);
13+
setUploadSuccess(false); // Reset upload success status when a new file is selected
14+
};
15+
16+
const handleUpload = () => {
17+
if (!selectedFile) {
18+
return;
19+
}
20+
21+
setUploading(true);
22+
23+
const reader = new FileReader();
24+
25+
reader.onload = () => {
26+
// Get the file contents
27+
const fileContents = reader.result;
28+
29+
// Create a Blob from the file contents
30+
const blob = new Blob([fileContents], { type: selectedFile.type });
31+
32+
// Create a file path within the Local_Storage/notes_pdf folder
33+
const filePath = `Local_Storage/notes_pdf/${selectedFile.name}`;
34+
35+
// Save the file locally
36+
saveFileLocally(filePath, blob)
37+
.then(() => {
38+
setUploadSuccess(true);
39+
})
40+
.catch((error) => {
41+
console.error('Error saving file:', error);
42+
})
43+
.finally(() => {
44+
setUploading(false);
45+
});
46+
};
47+
48+
reader.readAsArrayBuffer(selectedFile);
49+
};
50+
51+
const saveFileLocally = (filePath, file) => {
52+
return new Promise((resolve, reject) => {
53+
const virtualLink = document.createElement('a');
54+
virtualLink.href = URL.createObjectURL(file);
55+
virtualLink.download = filePath;
56+
virtualLink.addEventListener('load', () => {
57+
URL.revokeObjectURL(virtualLink.href);
58+
resolve();
59+
});
60+
virtualLink.addEventListener('error', (error) => {
61+
reject(error);
62+
});
63+
document.body.appendChild(virtualLink);
64+
virtualLink.click();
65+
document.body.removeChild(virtualLink);
66+
});
67+
};
68+
69+
return (
70+
<div className="flex flex-col items-center justify-center h-screen text-center">
71+
<motion.div
72+
className="bg-blue-500 text-white py-6 px-6 rounded-lg shadow-lg"
73+
initial={{ scale: 0 }}
74+
animate={{ scale: 1 }}
75+
transition={{ duration: 0.5 }}
76+
>
77+
<Lottie animationData={animationData} style={{ width: 400, height: 300 }} />
78+
<h1 className="text-3xl font-bold mb-4">Upload Syllabus</h1>
79+
{!uploadSuccess ? (
80+
<>
81+
<input
82+
type="file"
83+
accept="application/pdf"
84+
className="mb-4"
85+
onChange={handleFileChange}
86+
/>
87+
<motion.button
88+
className={`bg-green-500 text-white py-2 px-6 rounded-lg ${
89+
uploading ? 'opacity-50 cursor-not-allowed' : ''
90+
}`}
91+
disabled={uploading || !selectedFile}
92+
onClick={handleUpload}
93+
whileHover={!uploading ? { scale: 1.05 } : {}}
94+
whileTap={!uploading ? { scale: 0.95 } : {}}
95+
>
96+
{uploading ? 'Uploaded' : 'Upload'}
97+
</motion.button>
98+
</>
99+
) : (
100+
<motion.div
101+
className="text-xl"
102+
initial={{ opacity: 0 }}
103+
animate={{ opacity: 1 }}
104+
>
105+
Upload successful!
106+
</motion.div>
107+
)}
108+
</motion.div>
109+
</div>
110+
);
111+
}
112+
113+
export default Uploadsyllabus;

0 commit comments

Comments
 (0)