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.
Steps to upload image to Cloudinary
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.
1 | 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.
1 | data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg== |
We have to send an HTTPS POST request to the following URL.
1 | https://api.cloudinary.com/v1_1/<CLOUD_NAME>/<RESOURCE_TYPE>/upload |
Parameters:
<CLOUD_NAME>– The name of your Cloudinary account.<RESOURCE_TYPE>– The type of file to upload such asimage,raw,videoandautoto 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | 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 className="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; |
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.
That’s it for today.
Thank you for reading. Happy Coding..!! 🙂
