title: How to make direct api call to cloudinary with axios?
body: <p>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. </p>
  
  <pre><code>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}&amp;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) =&gt; {
        uploadRequest.field(key, params[key]);
      });
  
      uploadRequest.end((err, res) =&gt; {
        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) =&gt; {
      //   Object.keys(params).forEach((key) =&gt; {
      //     uploadRequest.field(key, params[key]);
      //   });
      //   console.log('UPLOAD COMPLETE: '+JSON.stringify(response.body));
      // }).catch((err) =&gt; { alert(err); });
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;Dropzone onDrop={this.uploadFile.bind(this)}/&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default Images;
  </code></pre>