file upload functions Done

Author: pronazmul

app.js

@@ -24,7 +24,7 @@ mongoose
  useUnifiedTopology: true,
  })
  .then(() => console.log("Successfully Connected To Database!"))
- .catch((error) => console.log(err));
+ .catch((error) => console.log(error));
 
 // Request Parser
 app.use(express.json());

controller/userController.js

@@ -1,7 +1,48 @@
+// External Imports:
+const bcrypt = require("bcrypt");
+
+// Internal Modules:
+const User = require("../models/People");
+
 // Get User Page page
 const getUsers = (req, res, next) => {
  res.render("users");
 };
 
+// Add User
+const addUser = async (req, res, next) => {
+ let newUser;
+ const hashedPassword = await bcrypt.hash(req.body.password, 10);
+
+ if (req.files && req.files.length > 0) {
+ newUser = new User({
+ ...req.body,
+ avatar: req.files[0].filename,
+ password: hashedPassword,
+ });
+ } else {
+ newUser = new User({
+ ...req.body,
+ password: hashedPassword,
+ });
+ }
+
+ // Save User || Handle User Saving Error
+ try {
+ const result = await newUser.save();
+ res.status(200).json({
+ message: "User Was Added Successfully!",
+ });
+ } catch (error) {
+ res.status(500).json({
+ errors: {
+ common: {
+ msg: "Unknown error occured!",
+ },
+ },
+ });
+ }
+};
+
 // Module Export
-module.exports = { getUsers };
+module.exports = { getUsers, addUser };

middlewares/common/errorHandler.js

@@ -14,7 +14,7 @@ const errorHandler = (error, req, res, next) => {
  res.status(error.status || 500);
 
  // Conditional Html || Json Resposne
- if (!res.locals.html) {
+ if (res.locals.html) {
  res.render("errorPage", {
  title: "Error Page",
  });

middlewares/users/avatarUpload.js

@@ -10,7 +10,7 @@ const avatarUpload = (req, res, next) => {
  "Only .jpg, jpeg or .png format allowed!"
  );
 
- //  Call The Multer Upload MiddleWare Function To Handle Error:
+ // Call The Multer Upload MiddleWare Function To Handle Error:
  upload.any()(req, res, (error) => {
  if (error) {
  res.status(500).json({

middlewares/users/userValidator.js

@@ -0,0 +1,83 @@
+// External Imports:
+const { check, validationResult } = require("express-validator");
+const createError = require("http-errors");
+const path = require("path");
+const { unlink } = require("fs");
+
+// internal Imports:
+const User = require("../../models/People");
+
+// Validate User Data
+const addUserValidators = [
+ check("name")
+ .isLength({ min: 1 })
+ .withMessage("Name is required!")
+ .isAlpha("en-US", { ignore: " -" })
+ .withMessage("Name must not contain anyting other than alphabet")
+ .trim(),
+ check("email")
+ .isEmail()
+ .withMessage("Invalid Email Address")
+ .trim()
+ .custom(async (value) => {
+ try {
+ const user = await User.findOne({ email: value });
+ if (user) {
+ throw createError("Email already in use!");
+ }
+ } catch (error) {
+ throw createError(error.message);
+ }
+ }),
+ check("mobile")
+ .isMobilePhone("bn-BD", { strictMode: true })
+ .withMessage("Mobile number must be a valid Bangladeshi mobile number")
+ .custom(async (value) => {
+ try {
+ const user = await User.findOne({ mobile: value });
+ if (user) {
+ throw createError("Mobile number is already use!");
+ }
+ } catch (error) {
+ throw createError(error.message);
+ }
+ }),
+ check("password")
+ .isStrongPassword()
+ .withMessage(
+ "Password must be at least 8 character long & should contain at least 1 lowercase, 1 uppercase, 1 number & 1 symbol"
+ ),
+];
+
+// Handle Form Data Validation Error if occured Unlink Uploaded image:
+const addUserValidationHandler = (req, res, next) => {
+ // Get complex validation Errors
+ const errors = validationResult(req);
+ // Syncronise Validation Errors
+ const mappedErrors = errors.mapped();
+
+ if (Object.keys(mappedErrors).length === 0) {
+ next();
+ } else {
+ // Remove Uploaded File
+ if (req.files.length > 0) {
+ const { filename } = req.files[0];
+ unlink(
+ path.join(`${__dirname}/../public/uploads/avatars/${filename}`),
+ (err) => {
+ if (err) console.log(err);
+ }
+ );
+ }
+
+ // Response The Errors To User:
+ res.status(500).json({
+ errors: mappedErrors,
+ });
+ }
+};
+// Module Exports:
+module.exports = {
+ addUserValidators,
+ addUserValidationHandler,
+};

router/userRouter.js

@@ -3,11 +3,25 @@ const express = require("express");
 const router = express.Router();
 
 // Internal Modules
-const { getUsers } = require("../controller/userController");
+const { getUsers, addUser } = require("../controller/userController");
 const decorateHtmlResponse = require("../middlewares/common/decorateHtmlResponse");
+const avatarUpload = require("../middlewares/users/avatarUpload");
+const {
+ addUserValidators,
+ addUserValidationHandler,
+} = require("../middlewares/users/userValidator");
 
 // Get User Page
 router.get("/", decorateHtmlResponse("User"), getUsers);
 
+// Add User With Avatar {Rest API}
+router.post(
+ "/",
+ avatarUpload,
+ addUserValidators,
+ addUserValidationHandler,
+ addUser
+);
+
 // Module Export:
 module.exports = router;

views/errorPage.ejs

@@ -8,8 +8,5 @@
 </head>
 <body>
  <p><%= error.message %></p>
- <p><%= error.status %></p>
- <p><%= error %></p>
-
 </body>
 </html>

views/partials/add_user_modal.ejs

@@ -0,0 +1,105 @@
+
+<div class="modal-wrapper" id="add-user-modal">
+ <div class="modal">
+ <a href="#" onclick="closeModal()" class="modal-close">+</a>
+ <div class="modal-title">
+ <h2>Create New User</h2>
+ </div>
+ <div class="modal-body">
+ <form
+ method="post"
+ action="/users"
+ enctype="multipart/form-data"
+ id="add-user-form">
+ <input type="text" placeholder="enter name" name="name" />
+ <p class="error name-error">This is error</p>
+ <input type="text" placeholder="enter email" name="email" />
+ <p class="error email-error">This is error</p>
+ <input type="text" placeholder="enter mobile" name="mobile" />
+ <p class="error mobile-error">This is error</p>
+ <input
+ type="password"
+ placeholder="enter password"
+ name="password"
+ />
+ <p class="error password-error">This is error</p>
+ <input type="file" name="avatar" />
+ <p class="error avatar-error">This is error</p>
+
+ <p class="error common-error">This is error</p>
+
+ <input type="submit" value="Submit" />
+ </form>
+ </div>
+ </div>
+ </div>
+ <script>
+ const modal = document.querySelector("#add-user-modal");
+ const form = document.querySelector("#add-user-form");
+
+ const closeModal=()=> modal.style.display = "none";
+ const openModal=()=> modal.style.display = "block";
+
+ // Success Toast
+ const successToast = Toastify({
+ text:"User Added Successfully! Reloding the list...",
+ duration:1000
+ })
+
+ // Form submit Handler: 
+ form.onsubmit = async function(event){
+ event.preventDefault()
+
+ // Clear Field Errors First: 
+ const errorPlaceHolders = document.querySelectorAll("p.error");
+ for(let i=0; i<errorPlaceHolders.length; i++){
+ errorPlaceHolders[i].style.display="none";
+ }
+
+ const inputErrors = document.querySelectorAll("input.error");
+ if(inputErrors.length>0){
+ for (let j=0; j<inputErrors.length; j++){
+ inputErrors[j].classList.remove("error");
+ }
+ }
+
+ // Prepare Form Data: 
+ const formData = new FormData(form);
+
+ // Send the request to the server
+ let response = await fetch("/users",{
+ method:"POST",
+ body: formData
+ })
+
+ // Get Response From Server: 
+ let result = await response.json();
+
+ // Handle Errors and response: 
+ if(result.errors){
+ // Errors
+ Object.keys(result.errors).forEach((fieldName)=>{
+ // Add error calss to all inputs
+ form[fieldname].classList.add("error");
+
+ // Set all error placeholders (p tag) textContent
+ const errorPlaceHolders = document.querySelector(`.${fieldName}-error`);
+ errorPlaceHolders.textContent = result.errors[fieldName].msg;
+
+ // Make all PlaceHolders Visible
+ errorPlaceHolders.style.display= "block";
+ });
+ }else{
+ // Success
+ successToast.showToast();
+ closeModal();
+ document.querySelector("p.error").style.display= "none";
+
+ // Reload the page after 1 second
+ setTimeout(()=>{
+ location.reload();
+ },1000)
+ }
+ };
+
+ </script>

views/users.ejs

@@ -33,38 +33,6 @@
  </table>
  </div>
  </div>
-
- <div class="modal-wrapper" id="add-user-modal">
- <div class="modal">
- <a href="#" onclick="closeModal()" class="modal-close">+</a>
- <div class="modal-title">
- <h2>Create New User</h2>
- </div>
- <div class="modal-body">
- <form id="add-user-form">
- <input type="text" placeholder="enter name" name="name" />
- <p class="error show">This is error</p>
- <input type="text" placeholder="enter email" name="email" />
- <input type="text" placeholder="enter mobile" name="mobile" />
- <input
- type="password"
- placeholder="enter password"
- name="password"
- />
- <input type="file" name="avatar" />
- <input type="submit" value="Submit" />
- </form>
- </div>
- </div>
- </div>
- <script>
- const modal = document.querySelector("#add-user-modal");
- function closeModal() {
- modal.style.display = "none";
- }
- function openModal() {
- modal.style.display = "block";
- }
- </script>
+ <%- include('./partials/add_user_modal.ejs') %>
  </body>
 </html>