How to Upload Audio and Video to Cloudinary in Nodejs

How to Upload Audio and Video to Cloudinary in Nodejs

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Even after reading the documentation, I ran across a few problems when uploading audio and video to cloudinary. Although I read some publications online, such as StackOverflow, the methodology differs and appears to be a little complex. Still, after discovering a technique to upload audio and video smoothly, I decided to share the steps with anyone who might find the blogs and articles challenging to use.

Prerequisite

  • A working knowledge of JavaScript
  • A basic understanding of NodeJS

What is Cloudinary?

Cloudinary is an end-to-end image and video management system for websites and mobile apps that handle everything from image and video uploads through storage, manipulations, and optimizations, all the way to delivery.

Without installing any extra software, you can effortlessly upload photographs, audio and videos to the cloud and automate clever transformations of those material using Cloudinary. Cloudinary seamlessly provides your media via a fast content delivery network (CDN) designed according to industry best practices.

Why do you need to upload to the cloud?

In a nutshell, uploading media to the cloud extends the life of an application. It provides a lot of value right out of the box, allowing you to focus on solving complex business logic.

Create a New Project

To open visual studio code, navigate to any Directory of your choice on your pc. In the terminal, type:

code.

Note: code . won't work if you don't have visual studio code installed on your system

Create a directory and initialize npm by typing the following command:

  • Windows power shell
    mkdir cloudinary-audio-video-project
    cd cloudinary-audio-video-project
    npm init -y
  • Linux
  mkdir cloudinary-audio-video-project
  cd cloudinary-audio-video-project
  npm init -y

Create the necessary files as shown below

Screenshot 2021-05-22 at 18.22.35.png

We'll install several dependencies like multer, express dotenv cloudinary and development dependency like nodemon to restart the server as we make changes automatically.

npm install express multer dotenv cloudinary
npm install nodemon -D

Now let's create our NodeJS Server adding the following snippet to our app.js index.js .env,.

In our app.js.

require("dotenv").config();
const express = require("express");

const app = express();

app.use(express.json());

module.exports = app;

In our index.js.

const http = require("http");
const app = require("./app");
const server = http.createServer(app);

const { API_PORT } = process.env;
const port = process.env.PORT || API_PORT;

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

If you notice, our file has some environment variables. You can create a new .env file if you haven't and add your variable before starting our application.

In our .env.

API_PORT=4001

To start our server, kindly edit the scripts object in our package.json to look like the one shown below and then type the command to start the server safely.

"scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

type the command npm run dev.

Audio Upload

Before we get started with the upload, kindly make sure you have created a Free Cloudinary Account. Then, copy the API KEY, CLOUD NAME, and SECRET on your dashboard because we will be using them shortly.

Add the snippet below to our file app.js for audio upload.

//...

app.post("/audio/upload", async (req, res) => {
  // Get the file name and extension with multer
  const storage = multer.diskStorage({
    filename: (req, file, cb) => {
      const fileExt = file.originalname.split(".").pop();
      const filename = `${new Date().getTime()}.${fileExt}`;
      cb(null, filename);
    },
  });

  // Filter the file to validate if it meets the required audio extension
  const fileFilter = (req, file, cb) => {
    if (file.mimetype === "audio/mp3" || file.mimetype === "audio/mpeg") {
      cb(null, true);
    } else {
      cb(
        {
          message: "Unsupported File Format",
        },
        false
      );
    }
  };

  // Set the storage, file filter and file size with multer
  const upload = multer({
    storage,
    limits: {
      fieldNameSize: 200,
      fileSize: 5 * 1024 * 1024,
    },
    fileFilter,
  }).single("audio");

  // upload to cloudinary
  upload(req, res, (err) => {
    if (err) {
      return res.send(err);
    }

    // SEND FILE TO CLOUDINARY
    cloudinary.config({
      cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
      api_key: process.env.CLOUDINARY_API_KEY,
      api_secret: process.env.CLOUDINARY_API_SECRET,
    });
    const { path } = req.file; // file becomes available in req at this point

    const fName = req.file.originalname.split(".")[0];
    cloudinary.uploader.upload(
      path,
      {
        resource_type: "raw",
        public_id: `AudioUploads/${fName}`,
      },

      // Send cloudinary response or catch error
      (err, audio) => {
        if (err) return res.send(err);

        fs.unlinkSync(path);
        res.send(audio);
      }
    );
  });
});

//...

Remember to update your .env file with the keys you saved earlier on our dashboard.

CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=

Now Let's test. 👇👇👇

audio upload

Video Upload

Let's try out the video upload by adding the snippet below:

//...

app.post("/video/upload", async (req, res) => {
  // Get the file name and extension with multer
  const storage = multer.diskStorage({
    filename: (req, file, cb) => {
      const fileExt = file.originalname.split(".").pop();
      const filename = `${new Date().getTime()}.${fileExt}`;
      cb(null, filename);
    },
  });

  // Filter the file to validate if it meets the required video extension
  const fileFilter = (req, file, cb) => {
    if (file.mimetype === "video/mp4") {
      cb(null, true);
    } else {
      cb(
        {
          message: "Unsupported File Format",
        },
        false
      );
    }
  };

  // Set the storage, file filter and file size with multer
  const upload = multer({
    storage,
    limits: {
      fieldNameSize: 200,
      fileSize: 30 * 1024 * 1024,
    },
    fileFilter,
  }).single("video");

  upload(req, res, (err) => {
    if (err) {
      return res.send(err);
    }

    // SEND FILE TO CLOUDINARY
    cloudinary.config({
      cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
      api_key: process.env.CLOUDINARY_API_KEY,
      api_secret: process.env.CLOUDINARY_API_SECRET,
    });
    const { path } = req.file; // file becomes available in req at this point

    const fName = req.file.originalname.split(".")[0];
    cloudinary.uploader.upload(
      path,
      {
        resource_type: "video",
        public_id: `VideoUploads/${fName}`,
        chunk_size: 6000000,
        eager: [
          {
            width: 300,
            height: 300,
            crop: "pad",
            audio_codec: "none",
          },
          {
            width: 160,
            height: 100,
            crop: "crop",
            gravity: "south",
            audio_codec: "none",
          },
        ],
      },

      // Send cloudinary response or catch error
      (err, video) => {
        if (err) return res.send(err);

        fs.unlinkSync(path);
        return res.send(video);
      }
    );
  });
});

//...

Result 👇👇👇

video upload

We can see how seamless it is to upload audio and video to Cloudinary from our nodeJS application.

Here is a link to the Repository on GitHub

Conclusion

We learned about Cloudinary and how to upload both audio and video to Cloudinary from our NodeJS application.

Happy coding!

Resources

Cloudinary

NodeJS

ExpressJS

I'd love to connect with you at Twitter | LinkedIn | GitHub

See you in my next blog article. Take care!!!

 
Share this