How To Upload Multiple files to Cloudinary in Nodejs using Promise.all

Olanrewaju A. Olaboye — Sat, 01 May 2021 06:52:01 +0000

It has remained something confusing while perusing Cloudinary documentation on how exactly do you upload multiple images, for most developers what they tend to do is to call the single file upload method on the SDK in a loop, while this seems to work at times it gets buggy when one of the files has to take more time than the other because of the size. To follow along the tutorial you can download the starter boilerplate nodejs with express code from Github .

We need to add multer configuration to our server.js file, then use this to create an. upload middleware function.

First Acts

//clone the repo
git clone https://github.com/wonderfulolanrewaju/multi-file-uploader/blob/master/package.json

//cd into the project
cd multi-file-uploader

//install all dependencies
yarn install

//install nodemon for server restart on save
yarn add -D nodemon

//install new dependencies
yarn add dotenv

Second Acts

//Add the following object to your package.json
//What this does is allow us to make our server restart on save and run our js file with Esm module so we can use import syntax

 "scripts": {
    "start": "node -r esm server.js",
    "dev: "nodemon -r esm server.js"
  },

Third Acts: Change the top part of server.js

import express from "express";
import cloudinary from "cloudinary";
import multer from "multer";
import dotenv from "dotenv";
dotenv.config();
const app = express();
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
const {
  NODE_ENV,
  PORT: productionPort,
  IP: productionIP,
  cloudinaryName,
  cloudinaryApiKey,
  cloudinaryApiSecret,
} = process.env;
const storage = multer.diskStorage({
  filename: function (req, file, cb) {
    cb(null, file.fieldname + "-" + Date.now());
  },
});

cloudinary.v2.config({
  cloud_name: cloudinaryName,
  api_key: cloudinaryApiKey,
  api_secret: cloudinaryApiSecret,
});

const upload = multer({ storage });

app.get("/", (req, res) => {
  return res.status(200).json({
    message: "Multiple uploader api",
  });
});

...
if (NODE_ENV === "production") {
...

Acts Four
What we do next is used the upload middleware function created from multer, this middleware's array method : "upload.array(nameOfFilesFields, maxCount)" takes the name we want to call the file field and the maximum number of images it should allow for upload.

app.post("/images", upload.array("pictures", 10), async (req, res) => {
  try {
    let pictureFiles = req.files;
    //Check if files exist
    if (!pictureFiles)
      return res.status(400).json({ message: "No picture attached!" });
    //map through images and create a promise array using cloudinary upload function
    let multiplePicturePromise = pictureFiles.map((picture) =>
      cloudinary.v2.uploader.upload(picture.path)
    );
    // await all the cloudinary upload functions in promise.all, exactly where the magic happens
    **let imageResponses = await Promise.all(multiplePicturePromise);**
    res.status(200).json({ images: imageResponses });
  } catch (err) {
    res.status(500).json({
      message: err.message,
    });
  }
});

You can run yarn dev. your app should be running on localhost:9000

You can make a request to http://localhost9000/images with the form-data request body type using pictures as field name a sample screenshot is shown below

You can also view the sample response json on a Public directory

The completed version of the code is available on Completed branch on Github and live version available on Heroku.

Build a GeoCoding feature for finding Users around in Nodejs api

Olanrewaju A. Olaboye — Sun, 18 Oct 2020 21:36:48 +0000

In recent times it has seemed like a magic that social media applications can show you users they believe live around you and you might probably want to connect with. As a developer at one point in time you will need to track location of users and recommend people they may know to establish friend connection/network.

In this tutorial I am going to be showing us exactly how to track last login location of a user, save/update this in our database and use this reservoir of data to recommend users around for each user on the platform.

Prerequisites

Basic knowledge of Nodejs, express framework and mongoose ORM
Knowledge of Token based auth using JWT in nodejs

Guide

Clone and Test the boilerplate code

Write mongodb/mongoose schema with 2dsphere index.

Install, configure and use express-ip to grab location users made http request from.

Query user model for other users around a particular user.

Clone and Test the boilerplate code

1. git clone https://github.com/WonderfulOlanrewaju/nearby-api-boilerplate.git
2. cd /nearby-api-boilerplate
3. yarn install && yarn add cross-env

The three commands above, command one clones the remote repo into your current working directory. Command two changes directory into the copied folder while command tree install all dependencies needed to run the boilerplate code with signup and login with JWT already done.

create a .env file in the root of your project and add the environment variable

secretKey = yoursecretkeyvalue

Make a sample Register request to your api via postman

Make a sample Login request to your api via postman

Write mongodb/mongoose schema with 2dsphere index.

Create a file:
src/controllers/utils/updateLocation.js

import { User } from "../../models/User.model";

export const UpdateLastLocation = async (ipInfo, userId) => {
  let lastLocation = {
    type: "Point",
    coordinates: ipInfo.ll,
  };
  let savedUser = await User.findByIdAndUpdate(
    userId,
    {
      ipInfo,
      lastLocation,
    },
    { new: true }
  );

  return savedUser;
};

This is a utility function which will be used on any route we want to track location of user to extract their logitude and latitude and save it into some fields in the user object from the DB.

The next step is to update our user model to allow us save ipInfo and lastLocation of user into the DB.

Create a file
src/models/User.model.js

import Mongoose from "mongoose";
import autoIncrement from "mongoose-auto-increment";
let { connection, Schema } = Mongoose;
autoIncrement.initialize(connection);

const pointSchema = new Schema({
  type: {
    type: String,
    enum: ["Point"],
    required: true,
  },
  coordinates: {
    type: [Number],
    required: true,
  },
});

const UserSchema = new Schema({
  firstName: {
    type: String,
    min: 2,
    default: "",
  },
  lastName: { type: String, default: "" },
  email: { type: String, unique: true },
  address: { type: String, default: "" },
  password: { type: String, default: "" },
  ipInfo: {
    ip: { type: String, default: "" },
    range: { type: Array, default: [] },
    country: { type: String, default: "" },
    region: { type: String, default: "" },
    eu: { type: String, default: "" },
    city: { type: String, default: "" },
    ll: { type: Array },
    metro: Number,
    area: Number,
  },
  lastLocation: {
    type: pointSchema,
    default: {
      type: "Point",
      coordinates: [0, 0],
    },
    index: "2dsphere",
  },
});

UserSchema.plugin(autoIncrement.plugin, {
  startAt: 1,
  incrementBy: 1,
  model: "User",
});

export const User = Mongoose.model("User", UserSchema);

What we did above is to update the user model for new fields that allow us save ipInfo and last location of users into the DB.

Install, configure and use express-ip to grab location users made http request from.

What the package allows us to do is discover the longitude and latitude a user made a request from alongside some other details like city, timezone and country based on their ip-address.

yarn add express-ip

Inside add new codes src/app.js

//to the upper part before app.get("/")
import { User } from "./models/User.model";
import expressIP from "express-ip";
app.use(expressIP().getIpInfoMiddleware);

//To the lower part before the last line of code add :
app.get("/nearbyusers", async (req, res) => {
  try {
    const { ipInfo } = req;
    let nearByUsers = await User.find({
      lastLocation: {
        $nearSphere: {
          $geometry: {
            type: "Point",
            coordinates: ipInfo.ll,
          },
          $maxDistance: 10000,
        },
      },
    });
    if (!nearByUsers || nearByUsers.length === 0) {
      res.status(201).json({
        message: "No users near you",
        nearByUser: [],
      });
    } else {
      res.status(201).json({
        message: "Here are users near you",
        nearByUsers,
      });
    }
  } catch (err) {
    res.status(400).json({
      message: `Issues finding nearby users. ${err.message}`,
    });
  }
});

what we have done is import express-ip package and configure it to be available on all routes of our app. And write a route that basically checks the ipInfo of the person calling it then send them an array of users based on 10Km proximity.

Add a new route to your auth controller for fetching a user detail
What we want to use this route for is to update the last location and ip details of where a user made his last request from.

src/controllers/major/auth.controller.js

import { createUser, loginUser } from "../utils/User.util";
import { handleResError, handleResSuccess } from "../utils/response.util";
import JWT from "jsonwebtoken";
import dotenv from "dotenv";
dotenv.config();
const { secretKey } = process.env;

export const SignupController = async (req, res) => {
  try {
    let userDetails = req.body;
    let { err, user } = await createUser(userDetails);
    if (err) handleResError(res, err, 400);
    else {
      let { _id, email, isActive } = user;
      let options = {
        expiresIn: "12h",
        issuer: "nearby-hasher",
      };
      let token = await JWT.sign({ _id, email, isActive }, secretKey, options);
      handleResSuccess(res, `Account created!`, token, 201);
    }
  } catch (err) {
    handleResError(res, err, 400);
  }
};

export const LoginController = async (req, res) => {
  try {
    let { err, token } = await loginUser(req.body);
    if (err) handleResError(res, err, 400);
    else handleResSuccess(res, "login successful", token, 201);
  } catch (err) {
    handleResError(res, err, 400);
  }
};

export const FetchAUserController = async (req, res) => {
  try {
    console.log(req.decoded);
    const { ipInfo } = req;
    let id = req.decoded._id;
    let updatedUser = await UpdateLastLocation(ipInfo, id);
    handleResSuccess(res, "user fetched", updatedUser, 201);
  } catch (err) {
    handleResError(res, err, 400);
  }
};

What is done is basically calling our updateLastLocation function supply it the id and ipInfo of user so this will save the user location details into the db.

Test the user fetch route
ensure to add auth token as Authorization header to the request as in the screenshot below. So the ipInfo of the user can be saved in the DB

Update User location on Signup/Login
src/controllers/majors/auth.controller.js

import { createUser, loginUser } from "../utils/User.util";
import { handleResError, handleResSuccess } from "../utils/response.util";
import JWT from "jsonwebtoken";
import { User } from "../../models/User.model";
import dotenv from "dotenv";
import { UpdateLastLocation } from "../utils/updateLastLocation";
dotenv.config();
const { secretKey } = process.env;

export const SignupController = async (req, res) => {
  try {
    let userDetails = req.body;
    let ipInfo = { req };
    let { err, user } = await createUser(userDetails);
    if (err) handleResError(res, err, 400);
    else {
      let { _id, email, isActive } = user;
      await UpdateLastLocation(ipInfo, _id);
      let options = {
        expiresIn: "12h",
        issuer: "nearby-hasher",
      };
      let token = await JWT.sign({ _id, email, isActive }, secretKey, options);
      handleResSuccess(res, `Account created!`, token, 201);
    }
  } catch (err) {
    handleResError(res, err, 400);
  }
};

export const LoginController = async (req, res) => {
  try {
    let ipInfo = { req };
    let { err, token } = await loginUser(req.body);
    let user = await User.findOne({ email: req.body.email });
    await UpdateLastLocation(ipInfo, user._id);
    if (err) handleResError(res, err, 400);
    else handleResSuccess(res, "login successful", token, 201);
  } catch (err) {
    handleResError(res, err, 400);
  }
};

export const FetchAUserController = async (req, res) => {
  try {
    console.log(req.decoded);
    const { ipInfo } = req;
    let id = req.decoded._id;
    let updatedUser = await UpdateLastLocation(ipInfo, id);
    handleResSuccess(res, "user fetched", updatedUser, 201);
  } catch (err) {
    handleResError(res, err, 400);
  }
};

Add start script to package.json and push app to heroku because the live testing of the nearbyusers route needs to be on a live server

package.json

"start": "node -r esm ./src/server.js"

Push to heroku

Ensure you have your heroku CLI loggedIn
Ensure you add your live mongodb Database connection strin
Type in the following commands one after the other on your terminal.

You can compare your work with my Final Repo

heroku create 
git add .
git commit -m 'heroku push
git push heroku master || git push heroku main

Reason for adding git push heroku main is because master is now renamed as main in recent Github repo creation.

Visit the documentation on Postman Documentation

Create two users on the live API with different emails
Call the fetch user route
Then on another browser visit LiveAPI

It will show you the two users you created because they live around you.

This is my first tutorial, kindly comment things to improve on in the comment section.

DEV Community: Olanrewaju A. Olaboye

How To Upload Multiple files to Cloudinary in Nodejs using Promise.all

Build a GeoCoding feature for finding Users around in Nodejs api

Clone and Test the boilerplate code

Write mongodb/mongoose schema with 2dsphere index.

Install, configure and use express-ip to grab location users made http request from.