Cloudinary - Uploading with a direct call to the API, Missing file

Question

Hi I'm trying to use Cloudinary from React JS so I'm using direct call to the API from browser. I have server which returns me api_key etc...

I'm using readAsDataURL() to change my file into base64

    let file = e.target.files[0];
    let self = this;

    let typeString = this.tellType(file);

    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(){
      self.sendMedia(typeString, this.result)
    }

Then I'm getting api_key, timestamp etc from clients nodejs server, and I need to send the image and I need to send it to cloudinary.

    let request = new XMLHttpRequest();
    let params = {
      api_key: result.upload_info.api_key,
      timestamp: result.upload_info.timestamp,
      signature: result.upload_info.signature,
      public_id: result.upload_info.public_id,
      file: file
    };
    console.log('params',params);

    request.open('POST', `https://api.cloudinary.com/v1_1/${cloud_name}/image/upload`, true);

    request.onreadystatechange = function() {
      console.log('its back', request)
    };

    request.send(params);

And then I receive 403 (bad request)

responseText: "{"error":{"message":"Missing required parameter - file"}}"

I was at the first time thinking that my file is in wrong format, but base64 is allowed by cloudniary. Thank you.

Answer 1

I was having the same issue. It happens that you must send the params as a JSON.

Answer 2

    var reader = new FileReader();
    reader.onload = function (e) {
    //next line separates url from data
    var form = new FormData();
    form.append("file",e.target.result);
    form.append("upload_preset", "preset_key");

    currentRequest = $.ajax({
      xhr: function () {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function (evt) {
          if (evt.lengthComputable) {
            var progress = parseInt(evt.loaded / evt.total * 100, 10);
            console.log(progress)
          }
        }, false);
        return xhr;
      },
      async: true,
      crossDomain: true,
      url: 'https://api.cloudinary.com/v1_1/cloud_name/image/upload',
      type: "POST",
      headers: {
        "cache-control": "no-cache"
      },
      processData: false,
      contentType: false,
      mimeType: "multipart/form-data",
      data: form,
      beforeSend: function () {
        if (currentRequest != null) {
          currentRequest.abort();
        }
      },
      success: function (data) {
        data=JSON.parse(data)
        console.log(data['url'])
      },
      error: function (jqXHR, textStatus) {
        console.log(jqXHR)
      }
    });
  };
  reader.readAsDataURL(this.files[0]);

Answer 3

You can always use this package called cloudinary-direct .

const Cloud = require('cloudniary-direct');
Cloud.cloudName = "your_cloud_name_from_cloudinary";
Cloud.api_key = "your_api_key_from_cloudinary";
Cloud.api_secret = "your_api_secret_from_cloudinary";
Cloud.upload_preset = "your_upload_preset_from_cloudinary";

If you use something like react then do this .

import React from 'react';
import Cloud from 'cloudniary-direct';
import DropZone from 'react-dropzone';

class Sender extends React.Component{
  constructor(){
    super();
    this.handler = this.handler.bind(this);
  }
  handler(file){
    Cloud.cloudName = "your_cloud_name_from_cloudinary";
    Cloud.api_key = "your_api_key_from_cloudinary";
    Cloud.api_secret = "your_api_secret_from_cloudinary";
    Cloud.upload_preset = "your_upload_preset_from_cloudinary";
    Cloud.imageUploader(file[0], (resp)=> {
      const imageURL = resp.secure_url;
      // Save that url in the database
    })
  }
  render(){
    return (
      <div>
        <DropZone onDrop={this.handler} />
      </div>
    )
  }
}

Hope it helps .