How to upload images to Cloudinary using the REST API

Today we’ll show you how to upload images to Cloudinary using the REST API. There are many options for uploading files to Cloudinary but in this article, we will upload the files programmatically with the help of the endpoint.

You can choose some other ways to upload files like Upload widget or SDK according to your needs.

Let’s start with an example where we will upload base64 encoded image using ReactJS. You can also upload the other type of the files using the same API endpoint.

1. Create a react application

First of all, we will create a simple react application using the `create-react-app` NPM package. Run the following command to create a react app.

npx create-react-app upload-image-cloudinary

2. Call REST API to upload image

As mentioned above, we will consider the following base64 encoded image string to upload on Cloudinary. You can also upload the actual data (byte array buffer), a remote FTP, HTTP or HTTPS URL of an existing file.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

We have to send an HTTPS POST request to the following URL.

https://api.cloudinary.com/v1_1/<cloud_name>/<resource_type>/upload
</resource_type></cloud_name>

Parameters:

`<CLOUD_NAME>` - The name of your Cloudinary account.
`<RESOURCE_TYPE>` - The type of file to upload such as `image`, `raw`, `video` and `auto` to automatically detect the file type.

For demonstration, we will use the button to upload the predefined base64 image to Cloudinary. Check out the following code.

App.js

import React from "react";
const base64Imaage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

function App() {

  // upload image to cloudinary
  const uploadToCloudinary = () => {
    const API_ENDPOINT = 'https://api.cloudinary.com/v1_1/<cloud_name>/upload';

    const fileData = new FormData();
    fileData.append('file', base64Imaage);
    fileData.append('upload_preset', '<upload_preset>'); // upload preset
    fileData.append('tags', 'xxxxxx'); // optional

    fetch(API_ENDPOINT, {
      method: 'post',
      body: fileData
    }).then(response => response.json())
      .then(data => console.log('Success:', data))
      .catch(err => console.error('Error:', err));
  }

  return (
    <div class="App">
      <h3>Upload image to Cloudinary - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3>
      <input type="button" value="Upload image to Cloudinary" onclick={uploadToCloudinary}>
    </div>
  );
}

export default App;
</upload_preset></cloud_name>

Here, we need to pass the `<UPLOAD_PRESET>` in the FormData and you can also pass the tags. Check out the upload method options for more information.

3. Output

Run the react app and click on the button to upload the image to Cloudinary. After a successful upload, you will see the following types of logs in the console panel.

Output - How to upload images to Cloudinary using the REST API - Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

Github Repository StackBlitz Project