The Fastest & Easiest Way To Upload Pictures To Cloudinary (Noob Friendly)

Hey, guys! If you've read my previous articles, you know that I love to write short and concise articles. In this article, I'll explain the simplest way to upload pictures to Cloudinary without writing much.

What Is Cloudinary?

A site where you can upload images/videos.

Why Do I Need It?

To store images/videos. Of course, you can store them directly in your database but that is a terrible practice. Ever heard of Blob? Blob stands for Binary Large OBject which simply means large files (like images) translated to binaries (1s and 0s). They take up a large part of your database, slowing it down (like crazy).

How Can Cloudinary Help?

Using Cloudinary, you can upload images/videos. Say you uploaded an image from the frontend of your app, Cloudinary will return the URL of that image in the cloud as response. Then you can grab that URL and store it in your database (instead of the actual media). This way, your database only stores text which is very light.

How Do I Implement It?

Go to https://www.cloudinary.com and sign up. In the dashboard, you'll find an API Base URL. Grab that. Then, go to settings > upload > add new preset. Here you can set a bunch of settings such as the quality of images/videos that will be stored (lower quality gives you more space and vice versa). You can skip these settings but make sure you set the signing mode to unsigned (or things will get complex). The following can be implemented using any tech, but I'll use React because everyone loves React. Basically, you need to implement an input component which will accept image input from user (Google it if you don't know how).

<input
  type="file"
  accept="image/*"
  onChange={handleChange}
  name="media"
/>

Then in the same component, handle the media input using the following handler (blindly copying the following snippet might result in failure).

const handleChange = (e) => {
  const { name, files } = e.target;

  if (name === "media" && files.length > 0)
    setMedia(files[0]); // you need to declare media and setMedia using useState Hook
};

Using the following function, what you'll get is a URL which will represent your media. Grab that and store it in your database.

import axios from "axios";

const uploadPic = async (media) => {
  try {
    const form = new FormData();
    form.append("file", media);
    form.append("upload_preset", "the_preset_name_you_set_earlier");
    form.append("cloud_name", "find_this_in_top_right_corner_on_cloudinary_site");

    const res = await axios.post(process.env.CLOUDINARY_URL, form); // replace with API Base URL you grabbed earlier (but store in environment variable for security

    return res.data.url;
  } catch (error) {
    return;
  }
};

export default uploadPic;

There you go. Of course, I didn't write every single line of code needed to pull this off but these are the ones you need to upload images/videos to Cloudinary (the rest are basic frontend stuffs). If you like my article, consider buying me a coffee.