UPLOAD IMAGES, VIDEOS, AND AUDIO IN REACT JS USING CLOUDINARY.

#webdev #javascript #beginners #tutorial

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 we will be using Cloudinary, which streamlines media management and improves user experience by automatically delivering images and videos, enhanced and optimized for every user.

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

Let’s get started.

Go to [https://cloudinary.com](https://cloudinary.com/) and sign up.
Enter your role

Select the project you want to do.
Head over to your dashboard where you will see your cloud Name
We also need to have an upload preset. Go to settings using a small icon on the bottom left of the sidebar.
Under product environment settings, click on upload, scroll down until you see upload presets.
Click on add upload preset.

You will see a form like this.
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.

The code for a file input is as follows

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.

This is the structure of the code for Audios

import React, { useState } from 'react';

const AudioUpload = () => {
  const [audioUrl, setAudioUrl] = useState(null);

  const handleAudioUpload = async (event) => {
    const file = event.target.files[0];

    if (!file) return; // Handle no file selected case

    const formData = new FormData();
    formData.append('file', file);
    formData.append('upload_preset', 'YOUR_UPLOAD_PRESET'); // Replace with your Cloudinary upload preset

    try {
      const response = await fetch(
        `https://api.cloudinary.com/v1_1/YOUR_CLOUD_NAME/video/upload`, // Specify resource type as 'audio'
        {
          method: 'POST',
          body: formData,
        }
      );

      const data = await response.json();
      setAudioUrl(data.secure_url);
    } catch (error) {
      console.error('Error uploading audio:', error);
      // Handle upload errors gracefully (e.g., display error message to user)
    }
  };

  return (
    <div>
      <input type="file" accept="audio/*" onChange={handleAudioUpload} />
      {audioUrl && (
        <audio controls>
          <source src={audioUrl} type="audio/mpeg" />
        </audio>
      )}
    </div>
  );
};

export default AudioUpload;

Note: Cloudinary treats audio uploads as video assets.