Profile pictures

app.js

@@ -1,10 +1,8 @@
 const express = require('express');
 const mongoose = require("mongoose");
 const configKeys = require("./config/keys");
-
 const hostname = 'localhost';
 const port = 8080;
-
 const index = require('./routes/index');
 const program_index = require('./routes/program_index');
 const student = require('./routes/student');
@@ -41,7 +39,48 @@ app.get('/filter/:grade', index.filter);
 app.get('/view/:id', student.viewStudentPage);
 app.post('/add', student.addStudent);
 app.post('/edit/:id', student.editStudent);
+app.post('/addImage',async(req, res, next) => {
+  const {img} = req.body;
+  const Student = new Student();
+  saveImage(Student, img);
+  try{
+    const newStudent = await Student.save();
+    res.redirect('/')
+  } catch(err) {
+    console.log(err);
+  }
+});
+function saveImage(Student, imgEncoded) {
+  if (imgEncoded == null) return;
+
+  const img = JSON.parse(imgEncoded);
+
+  if (img != null && imageMimeTypes.includes(img.type)) {
+    Student.img = new Buffer.from(img.data, 'base64');
+    Student.imgType = img.type;
+  }
+}
+app.post('/addImage',async(req, res, next) => {
+  const {img} = req.body;
+  const Student = new Student();
+  saveImage(Student, img);
+  try{
+    const newStudent = await Student.save();
+    res.redirect('/')
+  } catch(err) {
+    console.log(err);
+  }
+});
+function saveImage(Student, imgEncoded) {
+  if (imgEncoded == null) return;
+
+  const img = JSON.parse(imgEncoded);
 
+  if (img != null && imageMimeTypes.includes(img.type)) {
+    Student.img = new Buffer.from(img.data, 'base64');
+    Student.imgType = img.type;
+  }
+}
 app.get('/program_delete/:id', program.deleteProgram);
 app.get('/program_reactivate/:id', program.reactivateProgram);
 app.get('/program', program_index.getProgramPage);
@@ -53,5 +92,4 @@ app.post('/program_edit/:id', program.editProgram);
 function listenCallback() {
 	console.log(`Server Running on http://${hostname}:${port}`);
 }
-
-app.listen(port, hostname, listenCallback);
+app.listen(port, hostname, listenCallback);

routes/index.js

@@ -53,14 +53,12 @@ module.exports = {
 				activeStudents.push(studentList[i]);
 			}
 		}
-
 		let filteredStudents = [];
 		for (let i = 0; i < activeStudents.length; i++) {
 			if (activeStudents[i].grade == filteredGrade) {
 				filteredStudents.push(activeStudents[i]);
 			}
 		}
-
 		filteredStudents.sort( (a, b) => a.first_name.localeCompare(b.first_name, 'fr', {
 			ignorePunctuation: true
 		}));
@@ -69,7 +67,6 @@ module.exports = {
 			path: filteredGrade,
 			students: filteredStudents
 		}
-
 		response.render('index', renderData);
 	}
 };

views/edit-student.ejs

@@ -69,11 +69,36 @@
 				<label for="id_number">Student ID</label>
 				<input type="text" class="form-control" name="id_number" value="<%=student.id_number%>" readonly required>
 			</div>
+			<button type="submit" class="btn btn-success float-right"><%= add ? 'Add' : 'Update' %> Student</button>
+		<div class="ui-container">
+			<form action="/<%= add ? "/addImage" : `edit/${student.id}` %>" class ="ui-form" method = "POST">
+				<div class="ui-field">
+					<label for="img">Upload Image Of Yourself</label>
+					<br><br>
+					<input type="file" name="img">
+				</div>
+				<div class="ui-field">
+				</div>
+				<button type="submit" class="btn btn-success float-right"><%= add ? 'Add' : 'Update' %> Student</button>
+		<div class="ui container">
+			<form action="/addImage" class ="ui form" method = "POST">
+				<div class="ui field">
+		<div class="ui-container">
+			<form action="/<%= add ? "/addImage" : `edit/${student.id}` %>" class ="ui-form" method = "POST">
+				<div class="ui-field">
+					<label for="img">Upload Image Of Yourself</label>
+					<br><br>
+					<input type="file" name="img" value="<%= student.img %>">
+				</div>
+				<div class="ui-field">
+				</div>
+				<button type="submit" class="btn btn-success float-right"><%= add ? 'Add' : 'Update' %> Student</button>
+			</form>
+		</div>	
+		</form>
 		</div>
-	</div>
-	<% if (!view) { %>
+	  </div>
 		<button type="submit" class="btn btn-success float-right"><%= add ? 'Add' : 'Update' %> Student</button>
-	<% } %>
 	</form>
 	<% if (student.status == "inactive") { %>
 		<a class="float-right" href="/reactivate/<%= student.id %>" class="btn btn-info float-left">Reactivate</a>