Profile image upload frontend and backend finished

functions/handlers/users.js

@@ -53,6 +53,8 @@ exports.signup = (req, res) => {
     return res.status(400).json(errors);
   }
 
+  const noImg = 'no-img.png';
+
   let token, userId;
 
   db.doc(`/users/${newUser.handle}`)
@@ -77,6 +79,7 @@ exports.signup = (req, res) => {
         email: newUser.email,
         handle: newUser.handle,
         createdAt: newUser.createdAt,
+        imageUrl: `https://firebasestorage.googleapis.com/v0/b/${config.storageBucket}/o/${noImg}?alt=media`,
         userId
       };
       handle2Email.set(userCred.handle, userCred.email);
@@ -207,7 +210,7 @@ exports.updateProfileInfo = (req, res) => {
   // Update the database entry for this user
   db.collection("users")
     .doc(req.user.handle)
-    .set(profileData, { merge: true })
+    .set(profileData)
     .then(() => {
       console.log(`${req.user.handle}'s profile info has been updated.`);
       return res
@@ -241,6 +244,7 @@ exports.getUserDetails = (req, res) => {
     });
 };
 
+// Returns all data stored for a user
 exports.getAuthenticatedUser = (req, res) => {
   let credentials = {};
   db.doc(`/users/${req.user.handle}`)
@@ -258,4 +262,51 @@ exports.getAuthenticatedUser = (req, res) => {
     });
 };
 
+// Uploads a profile image
+exports.uploadProfileImage = (req, res) => {
+  const BusBoy = require("busboy");
+  const path = require("path");
+  const os = require("os");
+  const fs = require("fs");
 
+  const busboy = new BusBoy({ headers: req.headers });
+
+  let imageFileName;
+  let imageToBeUploaded = {};
+
+  busboy.on("file", (fieldname, file, filename, encoding, mimetype) => {
+    if (mimetype !== 'image/jpeg' && mimetype !== 'image/png') {
+      return res.status(400).json({ error: "Wrong filetype submitted" });
+    }
+    // console.log(fieldname);
+    // console.log(filename);
+    // console.log(mimetype);
+    const imageExtension = filename.split(".")[filename.split(".").length - 1];       // Get the image file extension
+    imageFileName = `${Math.round(Math.random() * 100000000000)}.${imageExtension}`;  // Get a random filename
+    const filepath = path.join(os.tmpdir(), imageFileName);
+    imageToBeUploaded = { filepath, mimetype };
+    file.pipe(fs.createWriteStream(filepath));
+  });
+  busboy.on("finish", () => {
+    admin.storage().bucket().upload(imageToBeUploaded.filepath, {
+      resumable: false,
+      metadata: {
+        metadata: {
+          contentType: imageToBeUploaded.mimetype
+        }
+      }
+    })
+    .then(() => {
+      const imageUrl = `https://firebasestorage.googleapis.com/v0/b/${config.storageBucket}/o/${imageFileName}?alt=media`;
+      return db.doc(`/users/${req.user.handle}`).update({ imageUrl });
+    })
+    .then(() => {
+      return res.status(201).json({ message: "Image uploaded successfully"});
+    })
+    .catch((err) => {
+      console.error(err);
+      return res.status(500).json({ error: err.code})
+    })
+  });
+  busboy.end(req.rawBody);
+}

functions/index.js

@@ -16,7 +16,8 @@ const {
   login,
   signup,
   deleteUser,
-  updateProfileInfo
+  updateProfileInfo,
+  uploadProfileImage
 } = require("./handlers/users");
 
 // Adds a user to the database and registers them in firebase with
@@ -39,8 +40,13 @@ app.get("/getProfileInfo", fbAuth, getProfileInfo);
 // Updates the currently logged in user's profile information
 app.post("/updateProfileInfo", fbAuth, updateProfileInfo);
 
+// Returns all user data for the logged in user.
+// Used when setting the state in Redux.
 app.get("/user", fbAuth, getAuthenticatedUser);
 
+// Uploads a profile image
+app.post("/user/image", fbAuth, uploadProfileImage);
+
 /*------------------------------------------------------------------*
  *  handlers/post.js                                                *
  *------------------------------------------------------------------*/

functions/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "axios": "^0.19.0",
+    "busboy": "^0.3.1",
     "firebase": "^6.6.2",
     "firebase-admin": "^8.6.0",
     "firebase-functions": "^3.1.0"

functions/util/fbAuth.js

@@ -4,12 +4,12 @@ const { admin, db } = require('./admin');
 // The function will only execute if the user is logged in, or rather, they have
 // a valid token
 module.exports = (req, res, next) => {
-    console.log(req);
-    console.log(req.body);
-    console.log(req.headers);
-    console.log(req.headers.authorization);
-    console.log(JSON.stringify(req.body));
-    console.log(JSON.stringify(req.header));
+    // console.log(req);
+    // console.log(req.body);
+    // console.log(req.headers);
+    // console.log(req.headers.authorization);
+    // console.log(JSON.stringify(req.body));
+    // console.log(JSON.stringify(req.header));
 
     let idToken;