Kindly wait a moment, post will be visible in just 5 seconds.

Rizwan Khan

Posted on 15 May 2021

Image Upload Tutorial using Node, Express, Cloudinary

In this guide you are going to learn about image uploading using nodejs, express and cloudinary.

Do not worry about cloudinary, Its a platform to create the most engaging visual experiences.

Developers and marketers use Cloudinary to quickly and easily create, manage and deliver their digital experiences across any browser, device and bandwidth.

Image and Video API for Powerful Visual Experiences

Store, transform, optimize, and deliver all your media assets with easy-to-use APIs, widgets, or user interface.

Robust Transformations Done Easily

Manipulate images with a URL-based API

Create Cutting-edge Video Experiences

Powerful video editing and management at your fingertips

Make Websites and Apps Load Fast

Automatically optimize rich media and deliver via multi-CDN

Free Storage upto 1 GB

Enough Talk, lets continue the implementation

Initialize the Project by using below command in your terminal

npm init -y

npm init -y

Now Install required libraries to create server

npm install --save express

npm install --save express

Server code index.js

const express = require("express");
const app = express();
const port = 3000;

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.post("/upload", (req, res) => {
  res.status(200).json({message: 'Hello User'});
});

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

const express = require("express");
const app = express();
const port = 3000;

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.post("/upload", (req, res) => {
  res.status(200).json({message: 'Hello User'});
});

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

Now Install nodemon to run the development server with watcher

npm install --save-dev nodemon

npm install --save-dev nodemon

Now open your package.json file and write in your script tag

"scripts": {
  .....
  "start": "nodemon index.js"
}

"scripts": {
  .....
  "start": "nodemon index.js"
}

Now its time to run application

npm start

npm start

Now trigger your api using POSTMAN with url localhost:3000/upload

Response will be { message: 'Hello User'}

Now its time to create an account in cloudinary.com

After creating account; go to your dashboard; there you are going to see account details

Cloud name: your_cloudname //asked at time of account creation
API Key: **********************
API Secret: ***************************

Cloud name: your_cloudname //asked at time of account creation
API Key: **********************
API Secret: ***************************

Now install another library for cloudinary and formidable for file handling request

npm install --save cloudinary formidable

npm install --save cloudinary formidable

Now lets update our index.js file code

const express = require("express");
const app = express();
const cloudinary = require("cloudinary").v2;
const formidable = require("formidable");
const port = 3000;

//cloudinary configuration
cloudinary.config({
  cloud_name: "your_cloud_name",
  api_key: "your_Api_key",
  api_secret: "your_api_secret",
});

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.post("/upload", (req, res) => {
  
   const form = new formidable({ multiples: true });

      form.parse(req, (error, fields, files) => {
        if (error) return res.status(400).json({ error });
    
        cloudinary.uploader.upload(files.image.path, (error, result) => {
          if (error) return res.status(400).json({ error });
          else {
            const { url } = result;
            //Now you can save url in your database for future reference
    
            return res.status(201).json({ result });
          }
        });
      });
  
});

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

const express = require("express");
const app = express();
const cloudinary = require("cloudinary").v2;
const formidable = require("formidable");
const port = 3000;

//cloudinary configuration
cloudinary.config({
  cloud_name: "your_cloud_name",
  api_key: "your_Api_key",
  api_secret: "your_api_secret",
});

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.post("/upload", (req, res) => {
  
   const form = new formidable({ multiples: true });

      form.parse(req, (error, fields, files) => {
        if (error) return res.status(400).json({ error });
    
        cloudinary.uploader.upload(files.image.path, (error, result) => {
          if (error) return res.status(400).json({ error });
          else {
            const { url } = result;
            //Now you can save url in your database for future reference
    
            return res.status(201).json({ result });
          }
        });
      });
  
});

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

Important things to note files.image.path

files is the file object which we are sending in form data such as

<form enctype="multipart/form-data">
<input type="file" name="image" />
</form>

<form enctype="multipart/form-data">
<input type="file" name="image" />
</form>

image is input field name

path is temporary image location

Now if you are using POSTMAN simply open it

api: localhost:3000/upload
method: POST
Headers  
enctype = multipart/form-data
body
select form-data tab
give key 'image' ann select type from dropdown 'file'
and then choose your image

api: localhost:3000/upload
method: POST
Headers  
enctype = multipart/form-data
body
select form-data tab
give key 'image' ann select type from dropdown 'file'
and then choose your image

thats all

If you have any trouble plz let me know in the comment section...

Thanks for coming till here

375

Rizwan Khan

India

Coding is an art and I love art

New

Master Software Development

Learn trending tech & full-stack development. Book now

View Details

Explore more similar Post

0 Comments