Image upload ,resize using canvas on client side .Send as base64 string

to server side.

.gitignore

@@ -0,0 +1 @@
+node_modules/

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

README.md

@@ -0,0 +1,44 @@
+### Configuration
+- **Platform:** node
+- **Framework**: express
+- **Template Engine**: jade
+- **CSS Framework**: bootstrap
+- **CSS Preprocessor**: css
+- **JavaScript Framework**: 
+- **Build Tool**: none
+- **Unit Testing**: none
+- **Database**: mongodb
+- **Deployment**: none
+
+How to run this project :
+1.Setup mongoose or use mlab to save the user to database.
+2.download this project.
+3.open server.js and add the mongo connection details and the collection name .I have used "Demo" as collection name.
+4.Update and install node packages .use npm install
+5.Launch the project http://localhost:3000.
+6.Give a name , email and choose a photograph to upload.Press the upload button.
+
+When the image file is uploaded ,i resize the file to 200 * 200 px on the client side and then use ajax to upload this file to uploads/pics/xxxxx.extn .This same path is stored in a hidden form element. 
+When the updateProfile button is clicked then a new user is created in collection and the path to the photograph /uploads/pics is stored in the mongodb.
+
+Once new user is created ,the image is read from the path in the mongo, it is in binary format.It is converted to base64 string and sent to the front end.The image is now displayed as a 120 *120 px photo.
+
+A lot of error handling is to be done ,if using this code in production.
+
+From this project ..you will know how to read a photo file .Resize it in client side. 
+Send it using ajax. Then rebuilding the image file from binary to base64 and back to a png/jpeg to be displayed using express and jade.
+
+Good luck!
+
+
+
+
+
+
+
+
+
+
+
+
+

controllers/user.js

@@ -0,0 +1,89 @@
+var async = require("async");
+var User = require("../models/User");
+var mongoose = require("mongoose");
+var fs = require("fs");
+const fileType = require("file-type");
+
+exports.accountGet = function(req, res) {
+
+  User.findOne({ email: req.session.email }, function(err, user) {
+    if (err) {
+      console.log("err" + err);
+      res.render("profile", {
+        title: "My Account"
+      });
+    } else if (user && "picPath" in user) {
+      if (fs.existsSync(req.rootPath + user.picPath)) {
+        let img = fs.readFileSync(req.rootPath + user.picPath);
+        let mime = fileType(img);
+        img = new Buffer(img, "binary").toString("base64");
+
+        res.render("profile", {
+          title: "My Account",
+          mime: mime.mime,
+          img: img,
+          name: user.name,
+          email: user.email
+        });
+      } else {
+        res.render("profile", {
+          title: "My Account",
+          name: user.name,
+          email: user.email
+        });
+      }
+    } else {
+      res.render("profile", {
+        title: "My Account",
+        name: "",
+        email: ""
+      });
+    }
+  });
+};
+exports.uploadPhoto = function(req, res) {
+  var base64Data = req.body.imgBase64.replace(/^data:image\/jpeg;base64,/, "");
+  var path = "." + req.body.fileName;
+  fs.writeFile(path, base64Data, "base64", function(err) {
+    if (err) {
+      console.log(err);
+    } else {
+      res.send("success");
+    }
+  });
+};
+
+exports.accountPut = function(req, res) {
+  User.findOne({ email: req.body.email }, function(err, user) {
+    console.log(JSON.stringify(user));
+    if (err) {
+      console.log("err"+err);
+    } else if (user) {
+      user.email = req.body.email;
+      user.picPath = req.body.picPath;
+
+    } else {
+      var user = new User();
+      user.email = req.body.email;
+      user.name = req.body.name;
+      user.picPath = req.body.picPath;
+      console.log("in else" + req.body.picPath);
+    }
+    user.save(function(err, user) {
+      if (err) {
+        console.log(err);
+      } else {
+
+        req.session.email = req.body.email;
+
+        req.session.save(function(err) {
+          // session saved
+          if (err) {
+            console.log("error while saving sesion");
+          }
+        });
+      }
+    });
+    res.redirect("/");
+  });
+};

models/User.js

@@ -0,0 +1,21 @@
+
+var mongoose = require('mongoose');
+
+
+var schemaOptions = {
+  timestamps: true,
+  toJSON: {
+    virtuals: true
+  },
+  toObject: {
+    virtuals: true
+  }
+};
+
+var userSchema = new mongoose.Schema({
+  name: String,
+  email: { type: String, unique: true},
+  picPath:String,//store the path to profilepic
+  }, schemaOptions);
+var User = mongoose.model('User', userSchema);
+module.exports = User;