Forem: Nishimwe Prince

Handle image uploads in Node.js/Express applications using Cloudinary

Nishimwe Prince — Thu, 18 May 2023 06:00:00 +0000

In this article, we are going to learn how to upload images on the server using Node.js/Express and Cloudinary.

What is Cloudinary?

Cloudinary is a cloud-based image and video management Software-as-a-Service (SaaS). Cloudinary provides an API for uploading, storing, managing, transforming, and delivering images and videos using a Content Delivery Network (CDN). Cloudinary offers a variety of SDKs for different languages and platforms. For more information on their developer solutions, visit https://cloudinary.com/developers.

What are we building?

We are going to build a simple Node.js/Express application that will allow us to upload images to the server using Cloudinary. We will also be able to view the uploaded images in the Cloudinary dashboard.

Assumptions

While we will cover everything from scratch and in detail, we will assume that you have a basic understanding of Node.js and Express. If you need a hand with that, you may refer to my previous article where I have elaborated more on these tools.

Prerequisites

To follow along with this article, you need to have the following installed on your machine:

Node.js
A text editor of your choice. I recommend VS Code
Postman: is a very simple and intuitive API testing tool or application. We will use it to test our API endpoints/routes. You can also use Insomnia or any other API testing tool of your choice.
A Cloudinary account. You can create one here. We will also cover how to create one in the next section.

Setup Cloudinary account
Setup our Node.js/Express application
Upload images to Cloudinary
Test our application using Postman
Conclusion

Let's code

Setup Cloudinary account

Go to https://cloudinary.com/users/registe_free and create a free account. You can also sign in if you already have an account.
After signing into your account, you will be redirected to the console. Click on the Programmable Media tab in the left sidebar.

You will be redirected your Cloudinary Dashboard. Copy the Cloud Name, API Key, and API Secret and save them somewhere. We will use them to access the Cloudinary API in our application.

Setting up our Node.js/Express application

Create a new directory and name it cloudinary-upload. Open it in your favorite text editor. I will be using VS Code.

mkdir cloudinary-upload
cd cloudinary-upload
code .

Initialize a new Node.js application using the command below. This will create a package.json file in our project directory.

npm init -y

Install the following dependencies, I will explain how each of them helps below.

npm install express body-parser cors dotenv cloudinary
npm install --save-dev nodemon

Understaning the dependencies

Cloudinary: The Cloudinary Node SDK allows you to quickly and easily integrate your application with Cloudinary.
body-parser: Body parser is an npm library used to process data sent through an HTTP request body. The body-parser middleware converts text sent through an HTTP request to a target format using 4 different parsers: text, JSON, URL encoded, and raw. To learn more about body-parser, visit https://www.npmjs.com/package/body-parser.

I had explained the rest of the dependencies in my previous article.

Create a .env file in the root of our project directory (where package.json is located) and add the following environment variables. Replace the values with your own keys.

PORT = 3000 // Or any other port of your choice
CLOUDINARY_API_KEY = // Your Cloudinary API key
CLOUDINARY_API_SECRET = // Your Cloudinary API secret
CLOUDINARY_CLOUD_NAME = // Your Cloudinary cloud name

Create an index.js file in the root of our project directory and create a basic express server.

import express from 'express';
import bodyParser from 'body-parser';
import dotenv from 'dotenv';
import cors from 'cors';
import { v2 as cloudinary } from 'cloudinary';

// CONFIGURE DOTENV
dotenv.config();

// LOAD ENVIROMENT VARIABLES
const {
  PORT,
  CLOUDINARY_API_KEY,
  CLOUDINARY_API_SECRET,
  CLOUDINARY_CLOUD_NAME,
} = process.env;

// CONFIGURE CLOUDINARY
cloudinary.config({
  cloud_name: CLOUDINARY_CLOUD_NAME,
  api_key: CLOUDINARY_API_KEY,
  api_secret: CLOUDINARY_API_SECRET,
});

// INITIALIZE EXPRESS
const app = express();

// CONFIGURE MIDDLEWARE
app.use(bodyParser.json());
app.use(cors());

/**
 * @description - This is where we upload our image to cloudinary. We will come back to this later.
 */

// CREATE SERVER
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

Update your package.json file to add the start script and indicate to use ES6 modules.

{
  "name": "cloudinary-upload",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module", // Add this line
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon index.js" // Add this line
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.20.2",
    "cloudinary": "^1.37.0",
    "cors": "^2.8.5",
    "dotenv": "^16.0.3",
    "express": "^4.18.2"
  }
}

Run the following command to start our server.

npm run dev

If you see the message Server is running on port 3000 in your terminal, then you have successfully created a basic express server.

Upload images to Cloudinary

To upload an image to Cloudinary, we will use the upload method from the Cloudinary SDK. The upload method takes in an image file, uploads it to Cloudinary, and returns a promise containing details of the uploaded image.

The upload method in Node.js has the following signature:

cloudinary.uploader.upload(file, options).then(callback);

The method takes in various parameters to customize the upload process. The parameters are categorized into two: required and optional. We will focus on the required parameters.

Required parameters

file: This is the image file to upload. It can be a path to a local file (supported in SDKs only), the remote HTTP or HTTPS URL address of an existing file, a private storage bucket (S3 or Google Storage), the actual data (byte array buffer), the Data URI (Base64 encoded), or an FTP address of an existing file.
options: Here we add information that determines how our file is saved in the cloud. We pass in the following attributes:
- public_id (String): The identifier of how a file will be named in the cloud.
- folder (String): The name of the folder in which the file will be saved.
- unique_filename (Boolean): If set to true, Cloudinary will add random characters on the file name to ensure that the file name is unique.
- use_filename (Boolean): If set to true, Cloudinary will use the original file name of the uploaded file.

To read more about all options available, visit the documenation here.

Uploading an image

We return into our code and add the following code to our index.js file.

/**
 * @description - This is where we upload our image to cloudinary. We will come back to this later.
 */

// ADD THESE LINES OF CODE

app.post('/api/upload', async (req, res) => {
  // DESTRUCTURE IMAGE FROM REQ.BODY
  const { image } = req.body;

  try {
    // DEFINE UPLOAD OPTIONS
    const options = {
      public_id: 'sample_image',
      folder: 'sample',
      unique_filename: true,
      use_filename: true,
    };
    // UPLOAD IMAGE TO CLOUDINARY
    const response = await cloudinary.uploader.upload(image, options);
    // RETURN UPLOADED IMAGE DATA
    const uploadedImage = response.url; // You can then store the image url in your database
    // RETURN COMPLETE RESPONSE
    return res.status(200).json({ uploadedImage, response });
    // CATCH ERROR
  } catch (error) {
    return res.status(500).json({ message: error.message });
  }
});

Understanding the code

We created a route /api/upload that accepts a POST request. The route takes in an image from the request body and uploads it to Cloudinary.
We created a try/catch block to handle errors that may occur during the upload process. Another way to handle errors is to use the catch method on the promise returned by the upload method.

await cloudinary.uploader.upload(image, options)
.then(callback)
.catch(error => console.log(error));

We created an options object to customize the upload process.
We catch the response from the upload method and return the image url and the complete response to the client.

Let's test our code.

Test the application using Postman

Open Postman and create a POST request to http://localhost:3000/api/upload.
Add the image key to the request body and set the value to the image you want to upload. We will use a link to an image on the internet.

{
    "image": "https://images.unsplash.com/photo-1639020715359-f03b05835829?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80"
}

Click on the Send button to send the request.
You should see the following response:

You will notice that the response contains the image url and other details about the uploaded image.

An image is uploaded to Cloudinary. You can check your Cloudinary dashboard to see the uploaded image in its specified folder.

Conclusion

In this tutorial, we learnt how to upload images on the server using the Cloudinary SDK with Node.js/Express. We created a Node.js server using Express and uploaded an image to Cloudinary using the upload method from the Cloudinary SDK. We also learnt how to customize the upload process by passing in options to the upload method.

Thank you for reading! I hope you found this tutorial helpful. If you have any questions or comments, please feel free to reach out to me on LinkedIn. I would love to connect with you. See you next week!!

Add payments feature in your application using Node.js/Express and Stripe

Nishimwe Prince — Tue, 09 May 2023 16:29:15 +0000

In this article, we will learn how to add payments feature in your application using Express, a Node.js web application framework and Stripe Charges API to create a payment gateway.

What is Stripe?

Stripe is a complete payments platform that offer a developer-friendly way to accept payments online and in mobile apps. To learn more about Stripe, visit their website here.

Assumptions

While we will cover everything from scratch and in detail, we will assume that you have a basic understanding of the following tools:
- Node.js
- Command line
Adding to this, we will use CommonJS modules to import and export code.

If you are not familiar with the above technologies, I recommend you to check out the following resources:

Prerequisites

To follow along with this article, you need to have the following installed on your machine:

Node.js
A text editor of your choice. I recommend VS Code
Postman: is a very simple and intuitive API testing tool or application. We will use it to test our API endpoints/routes.
A stripe account. If you don't have one, you can create one for free at https://dashboard.stripe.com/register. We will cover how to create a stripe account in detail in the next section.

Set up Stripe account
Setup our Node.js/Express application
Create payment gateway using Stripe Charges API
Test our payment endpoint using Postman
Conclusion

Getting Started

Create a Stripe account

Go to https://dashboard.stripe.com/register and create a stripe account. You will be asked to provide your email address and a password to create an account.
After creating your account successfully, you will be redirected to the dashboard. Take copy of the Publishable key and Secret key from the Developers section of the dashboard. Our application will need these keys to access the Stripe Payments API. Below is a screenshot of the dashboard.

Setting up our Node.js/Express application

Create a new directory for our application and navigate to it using the command line.



mkdir stripe-payment
cd stripe-payment

Initialize a new Node.js application using the command below. This will create a package.json file in our project directory.



npm init -y

Our package.json file should look like this:



{
  "name": "stripe-payment",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": { // we will add more scripts later
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Install the following dependencies in our project directory.



npm install express cors body-parser dotenv nodemon stripe --save

Understaning the dependencies

Express is a Node.js web application framework that provides a robust set of features for web and mobile applications.
cors will be required to enable our application communicate with the Stripe API by allowing cross-origin requests.
body-parser will be required to parse the incoming JSON request bodies in a middleware before our handlers.
dotenv will be required to load environment variables from a .env file into process.env. We use .env to store sensitive information outside of our codebase.
nodemon will be required to monitor for any changes in our source code and automatically restart our server.
stripe is Node.js library for the Stripe API.

Create a .env file in the root of our project directory (where package.json is located) and add the following environment variables. Replace the values with your own keys.



PORT = 3000 // Or any other port of your choice
STRIPE_PUBLISHABLE_KEY= your_publishable_key
STRIPE_SECRET_KEY= your_secret_key

Create an index.js file in the root of our project directory and create a basic express server.



const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

// SETUP DOTENV
require('dotenv').config();

// IMPORT STRIPE
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

// CREATE EXPRESS APP
const app = express();

// MIDDLEWARE
app.use(cors());
app.use(bodyParser.json({ limit: '50mb', extended: true }));

/**
 * ROUTES
 */

// HOME ROUTE
app.get('/', (req, res) => {
    res.send('We are about to build the illest Stripe Payment API...');
});

// CREATE SERVER
const port = process.env.PORT || 5000;

app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

Update your package.json file to add the start script.



"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon index.js" // add this line
  },

Run the following command to start our server.



npm run dev

Open your browser and navigate to http://localhost:3000. You should see the following screen:

Now that our server is running successfully, let's create a payment gateway using the Stripe Charges API.

Create payment gateway using Stripe Charges API

To create test payment gateways, Stripe provides test card numbers that we can use to simulate the payment process. You can find the test card numbers here.

In this demo, we will be using the following card details:



card: {
    "number": "4242424242424242", // This is a VISA card number
    "exp_month": 2, // Choose any valid month of the year
    "exp_year": 2025, // Choose any year in the future
    "cvc": "314", // Any 3 digit number
}

Create a checkout route in our index.js file above the app.listen() method.



// CHECKOUT ROUTE
app.post('/api/checkout', async (req, res) => {
  // RECEIVE PRODUCT AND CARD DETAILS FROM CLIENT
  const { product, card } = req.body;
});

Create a try/catch block inside the checkout route and add the following code.



try {
    // CREATE STRIPE PAYMENT TOKEN
    const stripeToken = await stripe.tokens.create({
      card,
    });
    // CREATE STRIPE CUSTOMER
    const stripeCustomer = await stripe.customers.create({
      email: 'test@nishimwe.dev',
      source: stripeToken.id, //
      address: {
        line1: 'KK 137 ST',
        postal_code: '10001',
        city: 'Kigali',
      },
      shipping: {
        name: 'Nishimwe',
        address: {
          line1: 'KK 137 ST',
          postal_code: '10001',
          city: 'Kigali',
        },
      },
      name: 'NISHIMWE',
    });

    // CREATE STRIPE CHARGE
    const stripeCharge = await stripe.charges.create({
      amount: product.price * 100, // To convert to cents
      currency: 'usd',
      customer: stripeCustomer.id,
      description: `Purchased the ${product.name} for ${product.price}`,
    });

    // SEND RESPONSE
    res.status(200).json({
      message: 'Payment was successful',
      charge: stripeCharge,
    });
}
// CATCH ERRORS
catch (error) {
    return res.status(500).json({
      error: error.message,
    });
}

Understanding the code

We create a Stripe payment token using the stripe.tokens.create() method. This method takes payment information as an argument and returns a token object. The payment information may contain card details, and we receive it from the client.

Stripe payment tokens provide an extra layer of security by allowing you to handle and transmit sensitive payment information in a tokenized form. This reduces the risk of exposing or mishandling sensitive card details within your application. Learn more about Stripe tokens here.
We create a Stripe customer using the stripe.customers.create() method. The source property is the ID of the Stripe payment token that was created in the previous code snippet.

Stripe customer objects simplifies the process of handling payments, enables recurring billing scenarios, and allows you to provide a better customer experience by storing and managing customer-specific data. Learn more about Stripe customers here.
We create a Stripe charge using the stripe.charges.create() method. Stripe charges are used to process one-time payments or initiate the collection of funds for products or services.

Once a charge is created using the Stripe API, Stripe handles the processing of the payment, including securely collecting funds from the customer's payment method and transferring them to your Stripe account. Learn more about Stripe charges here.
- You will notice that the amount is multiplied by 100. This is because Stripe processes payments in the smallest currency unit. For example, if you are processing a payment in USD, the amount should be multiplied by 100 to convert it to cents.
Finally, we send a response to the client with a success message and the charge object. If an error occurs, we catch it and send a response with the error message.

Test payment gateway

To test our application, we will open Postman and enter the following details:

Request URL: http://localhost:3000/api/checkout
Request Method: POST
Request Body:



{
    "product": {
        "name": "Brand New Jordan Air Force 1", // Product name >> String
        "price": 237.78 // Product price >> Intenger
    },
    "card": {
    "number": "4242424242424242", // This is a VISA card number
    "exp_month": 2, // Choose any valid month of the year
    "exp_year": 2025, // Choose any year in the future
    "cvc": "314" // Any 3 digit number
}
}

Response:

We should get a response with a success message and the charge object.

A receipt email is sent to the customer's email address. The receipt contains the product name, price, and the customer's shipping address.

The payment is reflected in the Stripe dashboard.

Conclusion

In this tutorial, we have learned how you can add a payment collection feature to your application using the Stripe Charges API. We created a Node.js server and used the Stripe Charges API to create a payment gateway. We also learned how to test our payment gateway using Postman.

Of course this a simple implementation, but you can extend it to create more robust payment system that would also take care of things like error handling and avoiding duplicate charges if a user accidentally tries to process the charge twice in a row.

You can find the source code for this tutorial on this GitHub repo

Thank you for reading! I hope you found this tutorial helpful. If you have any questions or comments, please feel free to reach out to me on LinkedIn. I would love to connect with you. See you next week!!

Forem: Nishimwe Prince

Handle image uploads in Node.js/Express applications using Cloudinary

What is Cloudinary?

What are we building?

Assumptions

Prerequisites

Table of contents

Let's code

Setup Cloudinary account

Setting up our Node.js/Express application

Understaning the dependencies

Upload images to Cloudinary

Required parameters

Uploading an image

Understanding the code

Test the application using Postman

Conclusion

Add payments feature in your application using Node.js/Express and Stripe

What is Stripe?

Assumptions

Prerequisites

Table of contents

Getting Started

Create a Stripe account

Setting up our Node.js/Express application

Understaning the dependencies

Create payment gateway using Stripe Charges API

Understanding the code

Test payment gateway

We should get a response with a success message and the charge object.

A receipt email is sent to the customer's email address. The receipt contains the product name, price, and the customer's shipping address.

The payment is reflected in the Stripe dashboard.

Conclusion