Image Uploading with Node & Cloudinary

Today we’re going to explore how to upload an image from the client (via Postman) to Cloudinary with an Express server in the middle. We will utilize a server as middleware for increased flexibility and because Cloudinary offers a Node integration that’s simple to work with.

SERVER SETUP

1. Configure a simple Express server with the addition of Cloudinary and Multer. Multer is node middleware for handling multipart/form-data

npm install express
npm install multer
npm install cloudinary

2. Create the following javascript file:

3. Before we test the configuration, create a directory named uploads adjacent to the file above (index.js)

4. Start your server: node index

5. Utilize Postman to simulate a multipart post. Ensure you’re performing a POST with no Headers, a Body of form-data, and a key that matches the name of the input key specified in index.js (see below):

const upload = multer({ storage }).single('name-of-input-key')

6. Choose an image from your local hard drive and press Send

7. Check your uploads directory for the new file

CLOUDINARY

Now that we’re successfully uploading an image from the client to the server, let’s take it to the next level and post the image to Cloudinary.

1. Signup for a free account on Cloudinary
2. Note your cloud_name, api_key, api_secret and specify them below in the configuration settings
3. Update your server’s post routine to include the Cloudinary addition below:

4. Try posting an image to the service you just built. If successful, you should see an image uploaded to Cloudinary

Cloudinary’s Media Library

5. Now that your image lives in Cloudinary, you’re free to apply real-time transformations when you request your image, benefit from fast CDN delivery, and enjoy an elegant UI to manage your images! Hope you learned something new :)

GitHub repository can be found here