UPLOAD IMAGES AND VIDEOS IN REACT JS USING CLOUDINARY.

In your react app, you may need to upload Images or Videos from your machine either to send them to a backend API or to just display the uploaded image.

For this we will be using Cloudinary, this streamlines media management and improve user experience by automatically delivering images and videos, enhanced and optimized for every user.

We will be uploading the image to Cloudinary and getting them back, it will work as sort of pushing data to an API and fetching the sent data.

Let’s get started.

1. Go to https://cloudinary.com/ and sign up.
2. Enter your role

3. Select the project you want to do.

4 . Head over to your dashboard where you will see your cloud Name

5 . We also need to have an upload preset. Go to settings using a small icon on the bottom left of the sidebar .

6. Under product environment settings, click on upload, scroll down until you see upload presets.

7. Click on add upload preset.

8. You will see a form like this.

9. The signing mode by default will be signed, CHANGE it to signed and save.

10 . To upload an image or a video, you will need 2 things

• Cloud Name
• Upload Preset Name

REACT CODE

In react, we shall be handling an on-change function on an input with the type of file.

Read more about file inputs here File Inputs on W3 schools.

The code for a file input is as follows

<input type="file" />

This on the browser looks like this

We will make a function for the onChange event listener for this input file that will post the media file we pick from our local machine, send it to Cloudinary, and send a GET request to our cloud name to get the uploaded media file. This will come back in the form of a string URL which we can store in the state .

We shall have a component called Input.js, here we shall have an empty state for images and videos.

This is the structure of the code for Images .

import React, { useState } from "react";

function Input() {
  const [image, setImage] = useState("");

  const uploadImage = (files) => {
    const formData = new FormData();

    formData.append("file", files[0]);
    formData.append("upload_preset", "<your upload preset>");
    fetch(
      "https://api.cloudinary.com/v1_1/<your cloud name>/image/upload",
      {
        method: "POST",
        body: formData,
      }
    )
      .then((response) => response.json())
      .then((data) => {
        setImage(data.secure_url);
      });
  };
  return <div>
        <input type="file" onChange={(e) => uploadImage(e.target.files)} />
        <img

            src={image}
            alt="uploaded image"
          
        />

  </div>;
}

export default Input;

in the uploadImage function, on formData.append, add your upload preset name and on the API endpoint you are fetching from add your cloudname .

You will get the image string back and set it in the Image state . You can then display the image by using the img tag and the src as the image state or you can send this image URL to a backend API .

This is the structure of the code for Videos

import React, { useState } from "react";

function Input() {
  const [video, setVideo] = useState("");
  const uploadVideos = (files) => {
    const formData = new FormData();

    formData.append("file", files[0]);
    formData.append("upload_preset", "<your upload preset>");
    fetch("https://api.cloudinary.com/v1_1/<your cloud name>/video/upload", {
      method: "POST",
      body: formData,
    })
      .then((response) => response.json())
      .then((data) => {
        setImage(data.secure_url);
      });
  };
  return (
    <div>
      <input type="file" onChange={(e) => uploadVideos(e.target.files)} />
    
      <video src={video} controls />
    </div>
  );
}

export default Input;

in the uploadVideo function , on formData.append , add your upload preset name and on the API endpoint you are fetching from add your cloudname .

You will get the video string back and set it in the Image state. You can then display the image by using the IMG tag and the src as the image state or you can send this image URL to a backend API.

Thank you for reading along , give this story a thumbs up if it helped you and share widely . Would appreciate a follow as well