---
title: 'Cloudinary ReactJS'
disqus: JBeanny
---

By: Yim Sotharoth

Cloudinary with ReactJS
===

## Table of Contents

[TOC]

## Installation

:::info
_create react project with the following command_

$ npx create-react-app <project_name>

_Open your project in your code editor and run with the following command_

$ npm start

:::

## Let's create the input field and button

> In App.js I create simple input field and button

import React from "react";

const App = () => {

  return (
    <div
      style={{
        width: "100vw",
        height: "100vh",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <input type="file" />
      <button>Upload Image</button>
    </div>
  );
};

export default App;

## Let's get started with Cloudinary

> Open terminal of your project and install these libraries :+1:

:::info
_cloudinary_

$ npm install cloudinary-react

_axios_

$ npm install axios

***You can also use `fetch` instead of axios***
:::

> After the libraries are ready you can start working with them

:::info
> import these into App.js

import React, { useState } from "react";
import { Image } from "cloudinary-react";
import Axios from "axios";

:::

> Create states in App.js

const [image, setImage] = useState("");
const [path, setPath] = useState("");

> Now we have to create function to handle image upload

:::info
> `In App.js`

const uploadImage = () => {
    const formData = new FormData();
    formData.append("file", image);
    formData.append("upload_preset", 'YOUR-UPLOAD-PRESET');

    Axios.post(`https://api.cloudinary.com/v1_1/`YOUR-PRODUCT-ENVIRONMENT`/image/upload`, formData).then((response) => {
      console.log(response.data.secure_url);
      setPath(response.data.secure_url);
    });
};

you can get your `upload preset` here: [link](https://console.cloudinary.com/settings/c-ae7bd7cb6f448a54ebf9f4fb2abf94/upload)

you can get your `product environment` by going to [cloudinary](https://console.cloudinary.com/console/c-ae7bd7cb6f448a54ebf9f4fb2abf94/media_library/folders/home) and you can see it on the bottom-left of your screen

_After you get your upload-preset and product-enviroment, you can create a .env file and put them there_

REACT_APP_UPLOAD_PRESET=`YOUR-UPLOAD-PRESET`
REACT_APP_CLOUD_NAME=`YOUR-PRODUCT-ENVIRMENT`

**Then the uploadImage() function will look like this**

 const uploadImage = () => {
    const formData = new FormData();
    formData.append("file", image);
    formData.append("upload_preset", process.env.REACT_APP_UPLOAD_PRESET);

    Axios.post(`https://api.cloudinary.com/v1_1/${process.env.REACT_APP_CLOUD_NAME}/image/upload`, formData).then((response) => {
      console.log(response.data.secure_url);
      setPath(response.data.secure_url);
    });
 };

:::

> Let's modify our input field and button

:::info

 <div
      style={{
        width: "100vw",
        height: "100vh",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      }}
 >
  <input type="file" onChange={(e) => setImage(e.target.files[0])} />
  <button onClick={uploadImage}>Upload Image</button>
  <Image style={{ width: 300 }} cloudName={process.env.REACT_APP_CLOUD_NAME} publicId={path} />
</div>

In this we add `onChange={(e) => setImage(e.target.files[0])` to input field to handle file upload and `onClick={uploadImage}` to triger the `uploadImage()`
:::

:::success
here is the complete code :+1:

import React, { useState } from "react";
import { Image } from "cloudinary-react";
import Axios from "axios";

const App = () => {
  const [image, setImage] = useState("");
  const [path, setPath] = useState("");

  const uploadImage = () => {
    const formData = new FormData();
    formData.append("file", image);
    formData.append("upload_preset", process.env.REACT_APP_UPLOAD_PRESET);

    Axios.post(
      `https://api.cloudinary.com/v1_1/${process.env.REACT_APP_CLOUD_NAME}/image/upload`,
      formData
    ).then((response) => {
      console.log(response.data.secure_url);
      setPath(response.data.secure_url);
    });
  };

  return (
    <div
      style={{
        width: "100vw",
        height: "100vh",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <input type="file" onChange={(e) => setImage(e.target.files[0])} />
      <button onClick={uploadImage}>Upload Image</button>
      <Image
        style={{ width: 300 }}
        cloudName={process.env.REACT_APP_CLOUD_NAME}
        publicId={path}
      />
    </div>
  );
};

export default App;

After implement you simply upload image to cloudinary
:::

> Project Repository : https://github.com/JBeanny/cloudinary-react

### Contact Us

- :mailbox: [e-mail]
- [GitHub](https://github.com/JBeanny)
- [Facebook Page](https://www.facebook.com/Metaphorlism)
- [Instagram: Metaphorlism](https://www.instagram.com/metaphorlism/)