How to make direct api call to cloudinary with axios?

Question

I am trying to figure this out with axios. I have made the direct api call with superagent and now want to know how to use with axios as the rest of my project is with axios. I know there is cloudinary-react, but this is the way I prefer to do it. Here is what I have so far.

import React, { Component } from 'react';
import Dropzone from 'react-dropzone';
import sha1 from 'sha1';
import superagent from 'superagent';
import axios from 'axios';

class Images extends Component {
  uploadFile(files) {
    console.log('uploadFile: ');
    const image = files[0];

    const cloudName = 'tbaustin';
    const url = `https://api.cloudinary.com/v1_1/${cloudName}/image/upload`;

    const timestamp = Date.now()/1000;
    const uploadPreset = 'cnh7rzwp';

    const paramsStr = `timestamp=${timestamp}&upload_preset=${uploadPreset}secret`;

    const signature = sha1(paramsStr);
    const params = {
      'api_key': 'api_key',
      'timestamp': timestamp,
      'upload_preset': uploadPreset,
      'signature': signature
    }

    let uploadRequest = superagent.post(url)
    uploadRequest.attach('file', image);

    Object.keys(params).forEach((key) => {
      uploadRequest.field(key, params[key]);
    });

    uploadRequest.end((err, res) => {
      if(err) {
        alert(err);
        return
      }

      console.log('UPLOAD COMLETE: '+JSON.stringify(res.body));
    });



//AXIOS CONTENT HERE
    // let request = axios.post(url, {file: image});
    // request.then((response) => {
    //   Object.keys(params).forEach((key) => {
    //     uploadRequest.field(key, params[key]);
    //   });
    //   console.log('UPLOAD COMPLETE: '+JSON.stringify(response.body));
    // }).catch((err) => { alert(err); });
  }

  render() {
    return (
      <div>
        <Dropzone onDrop={this.uploadFile.bind(this)}/>
      </div>
    )
  }
}

export default Images;

First of all the api keys and image upload logic should reside on your back end server.In my case it was Node js.You keep all your keys server side and then via axios call your node server and tell it the file to upload and node then calls cloudinary api to upload the asset. http://cloudinary.com/documentation/node_image_upload#server_side_upload — VivekN, Jul 17 '17 at 16:57
I understand this is not the correct way to do it, I just wanted to know hot to make the correct axios code to make this work, that is all... — , Jul 17 '17 at 17:11
So the correct approach here would be using axios to call your node api which will be responsible for uploading the file. It will be a post call consisting of all the form data, now a form can contain a file or any text field. — VivekN, Jul 17 '17 at 17:37
@Maor.G It was a bad request. I was not attaching the fields or file correctly is what I can best guess. — , Jul 20 '17 at 15:23
You can find the error's description in the `X-Cld-Error` response header. — Maor.G, Jul 20 '17 at 19:03

score 1 · Answer 1 · answered Nov 09 '17 at 17:18

1

This worked for me.

    let formData = new FormData();
    formData.append("api_key",'');
    formData.append("file", image);
    formData.append("public_id", "sample_image");
    formData.append("timestamp", timeStamp);
    formData.append("upload_preset", uploadPreset);

    axios
    .post(url, formData)
    .then((result) => {
        console.log(result);
    })
    .catch((err) => {
        console.log(err);
    })

answered Nov 09 '17 at 17:18

Chandrasekhar Patra

11
1

Do you know how to do an axios delete on that cloudinary url? How do you structure the cloud name, api key and the public id? – bigmugcup May 18 '18 at 10:58

score 0 · Answer 2 · answered Dec 29 '21 at 20:28

This is a part of my project when I tried to upload an avatar. I have set my upload preset to unsigned on cloudinary.

    const uploadPhotoHandler = async (e) => {
         const file = e.target.files[0];
         const formData = new FormData();
         formData.append("file", file);
         formData.append("upload_preset", "pa*****");

         try {
               setPictureProfile("./assets/img/giphy.gif");
               const res = await axios.post("https://api.cloudinary.com/v1_1/${cloud_name}/upload", formData);
               console.log(res.data.url);
               setPictureProfile(res.data.url);
         } catch (error) {}
    };

How to make direct api call to cloudinary with axios?

2 Answers2