Skip to content

Commit 857989d

Browse files
harshedabdullaharshedabdulla
committed
upload page 2
1 parent 59c33ad commit 857989d

File tree

10 files changed

+217
-70
lines changed

10 files changed

+217
-70
lines changed

‎Local_Storage/pyqs_text/1.pdf‎

985 KB
Binary file not shown.

‎Local_Storage/pyqs_text/2.pdf‎

985 KB
Binary file not shown.

‎Local_Storage/pyqs_text/3.pdf‎

985 KB
Binary file not shown.

‎Local_Storage/pyqs_text/4.pdf‎

985 KB
Binary file not shown.

‎Local_Storage/pyqs_text/5.pdf‎

985 KB
Binary file not shown.

‎client/package-lock.json‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"lottie-react": "^2.4.0",
2121
"react": "^18.2.0",
2222
"react-dom": "^18.2.0",
23+
"react-file-upload": "^0.0.4",
2324
"react-router-dom": "^6.11.2",
2425
"reactstrap": "^9.1.10",
2526
"recharts": "^2.6.2"

‎client/src/components/Upload.jsx‎

Lines changed: 27 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
11
import React, { useState } from 'react';
2-
import { Link } from 'react-router-dom';
2+
import UploadNotes from './UploadNotes';
3+
import UploadPYQ from './Uploadpyq';
4+
import UploadSyllabus from './Uploadsyllabus';
35

46
function Upload() {
57
const [numModules, setNumModules] = useState(0);
68
const [numPYQs, setNumPYQs] = useState(0);
9+
const [activeComponent, setActiveComponent] = useState(null);
710

811
const handleModuleUpload = (moduleNumber) => {
9-
// Handle module upload logic here
10-
console.log(`Upload module ${moduleNumber} PDF`);
12+
setActiveComponent(() => <UploadNotes moduleNumber={moduleNumber} />);
1113
};
12-
14+
1315
const handlePYQUpload = (pyqNumber) => {
1416
// Handle PYQ upload logic here
15-
console.log(`Upload PYQ ${pyqNumber} PDF`);
17+
setActiveComponent(<UploadPYQ pyqNumber={pyqNumber} />);
1618
};
1719

1820
const handleSyllabusUpload = () => {
1921
// Handle syllabus upload logic here
20-
console.log('Upload syllabus');
22+
setActiveComponent(<UploadSyllabus />);
2123
};
2224

2325
const handleNumModulesChange = (event) => {
@@ -30,37 +32,34 @@ function Upload() {
3032

3133
const renderModuleUploadButtons = () => {
3234
const buttons = [];
33-
35+
3436
for (let i = 1; i <= numModules; i++) {
3537
buttons.push(
3638
<div key={`module-${i}`}>
3739
<label>Upload Module {i} PDF:</label>
38-
<Link to="/uploadnotes">
39-
<button onClick={() => handleModuleUpload(i)}>Upload</button>
40-
</Link>
40+
<button onClick={() => handleModuleUpload(i)}>Upload</button>
4141
</div>
4242
);
4343
}
44-
44+
4545
return buttons;
4646
};
47-
47+
4848
const renderPYQUploadButtons = () => {
4949
const buttons = [];
50-
50+
5151
for (let i = 1; i <= numPYQs; i++) {
5252
buttons.push(
5353
<div key={`pyq-${i}`}>
5454
<label>Upload PYQ {i} PDF:</label>
55-
<Link to="/uploadsyllabus">
56-
<button onClick={() => handlePYQUpload(i)}>Upload</button>
57-
</Link>
55+
<button onClick={() => handlePYQUpload(i)}>Upload</button>
5856
</div>
5957
);
6058
}
61-
59+
6260
return buttons;
6361
};
62+
6463

6564
return (
6665
<div>
@@ -89,9 +88,17 @@ function Upload() {
8988
<h2>Upload Syllabus</h2>
9089
<div>
9190
<label>Upload Syllabus PDF:</label>
92-
<Link to="/uploadsyllabus">
93-
<button onClick={handleSyllabusUpload}>Upload</button>
94-
</Link>
91+
<button onClick={handleSyllabusUpload}>Upload</button>
92+
</div>
93+
94+
<div className="upload-container">
95+
<div className="left-side">
96+
{/* Display the active component on the left side */}
97+
{activeComponent}
98+
</div>
99+
<div className="right-side">
100+
{/* You can place any other content or components on the right side */}
101+
</div>
95102
</div>
96103
</div>
97104
);

‎client/src/components/UploadNotes.jsx‎

Lines changed: 62 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,16 @@ import { motion } from 'framer-motion';
33
import Lottie from 'lottie-react';
44
import animationData from '../assets/95241-uploading.json';
55

6-
function UploadNotes() {
6+
function UploadNotes({ moduleNumber }) {
77
const [selectedFile, setSelectedFile] = useState(null);
88
const [uploading, setUploading] = useState(false);
99
const [uploadSuccess, setUploadSuccess] = useState(false);
10+
const [showSuccessMessage, setShowSuccessMessage] = useState(false);
11+
const [fadeOut, setFadeOut] = useState(false); // New state to control fading out
1012

1113
const handleFileChange = (event) => {
1214
setSelectedFile(event.target.files[0]);
13-
setUploadSuccess(false); // Reset upload success status when a new file is selected
15+
setUploadSuccess(false);
1416
};
1517

1618
const handleUpload = () => {
@@ -23,24 +25,22 @@ function UploadNotes() {
2325
const reader = new FileReader();
2426

2527
reader.onload = () => {
26-
// Get the file contents
2728
const fileContents = reader.result;
28-
29-
// Create a Blob from the file contents
3029
const blob = new Blob([fileContents], { type: selectedFile.type });
30+
const filePath = `Local_Storage/notes_pdf/module_${moduleNumber}/${selectedFile.name}`;
3131

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
3632
saveFileLocally(filePath, blob)
3733
.then(() => {
3834
setUploadSuccess(true);
35+
setUploading(false);
36+
setShowSuccessMessage(true);
37+
setTimeout(() => {
38+
setShowSuccessMessage(false);
39+
setFadeOut(true); // Set fadeOut state to true after the success message
40+
}, 10000); // Set timeout for 10 seconds
3941
})
4042
.catch((error) => {
4143
console.error('Error saving file:', error);
42-
})
43-
.finally(() => {
4444
setUploading(false);
4545
});
4646
};
@@ -67,45 +67,57 @@ function UploadNotes() {
6767
};
6868

6969
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 Notes</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>
70+
<div className="flex flex-col items-center justify-center text-center">
71+
{!fadeOut && ( // Render the component if fadeOut state is false
72+
<motion.div
73+
className="bg-blue-500 text-white py-6 px-6 rounded-lg shadow-lg"
74+
initial={{ scale: 0 }}
75+
animate={{ scale: 1 }}
76+
transition={{ duration: 0.5 }}
77+
>
78+
<Lottie animationData={animationData} style={{ width: 400, height: 300 }} />
79+
<h1 className="text-3xl font-bold mb-4">Upload Notes - Module {moduleNumber}</h1>
80+
{!uploadSuccess ? (
81+
<>
82+
<input
83+
type="file"
84+
accept="application/pdf"
85+
className="mb-4"
86+
onChange={handleFileChange}
87+
/>
88+
<motion.button
89+
className={`bg-green-500 text-white py-2 px-6 rounded-lg ${
90+
uploading ? 'opacity-50 cursor-not-allowed' : ''
91+
}`}
92+
disabled={uploading || !selectedFile}
93+
onClick={handleUpload}
94+
whileHover={!uploading ? { scale: 1.05 } : {}}
95+
whileTap={!uploading ? { scale: 0.95 } : {}}
96+
>
97+
{uploading ? 'Uploaded' : 'Upload'}
98+
</motion.button>
99+
</>
100+
) : (
101+
<>
102+
{showSuccessMessage ? (
103+
<motion.div
104+
className="text-xl"
105+
initial={{ opacity: 0 }}
106+
animate={{ opacity: 1 }}
107+
>
108+
Successfully Uploaded!
109+
</motion.div>
110+
) : null}
111+
<motion.button
112+
className="bg-green-500 text-white py-2 px-6 rounded-lg mt-4"
113+
onClick={() => setUploadSuccess(false)}
114+
>
115+
Upload Again
116+
</motion.button>
117+
</>
118+
)}
119+
</motion.div>
120+
)}
109121
</div>
110122
);
111123
}

‎client/src/components/Uploadmn1.jsx‎

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

0 commit comments

Comments
 (0)