Upload image from React Native to Cloudinary

upload.js

var CryptoJS = require('crypto-js');

function uploadImage(uri) {
  let timestamp = (Date.now() / 1000 | 0).toString();
  let api_key = 'your api key'
  let api_secret = 'your api secret'
  let cloud = 'your cloud name'
  let hash_string = 'timestamp=' + timestamp + api_secret
  let signature = CryptoJS.SHA1(hash_string).toString();
  let upload_url = 'https://api.cloudinary.com/v1_1/' + cloud + '/image/upload'

  let xhr = new XMLHttpRequest();
  xhr.open('POST', upload_url);
  xhr.onload = () => {
    console.log(xhr);
  };
  let formdata = new FormData();
  formdata.append('file', {uri: uri, type: 'image/png', name: 'upload.png'});
  formdata.append('timestamp', timestamp);
  formdata.append('api_key', api_key);
  formdata.append('signature', signature);
  xhr.send(formdata);
}

1.set up the Cloudinary account => setting => upload => make sure you have the unsigned upload on!
2. error {"error":{"message":"Upload preset must be specified when using unsigned upload"}} does always show but your uploaded url is not in there at all!

let me show you where is it!

---

xhr.onload = () => {
console.log(xhr); // the response is right here. do a callback function to get it!
};

use following:

var CryptoJS = require('crypto-js');

function uploadImage(uri,callback) {
let timestamp = (Date.now() / 1000 | 0).toString();
let api_key = 'your api key'
let api_secret = 'your api secret'
let cloud = 'your cloud name'
let hash_string = 'timestamp=' + timestamp + api_secret
let signature = CryptoJS.SHA1(hash_string).toString();
let upload_url = 'https://api.cloudinary.com/v1_1/' + cloud + '/image/upload'

let xhr = new XMLHttpRequest();
xhr.open('POST', upload_url);
xhr.onload = () => {
console.log(xhr);
callback(JSON.parse(xhr._response)) // this line is the response call back to your request!!!!
};
let formdata = new FormData();
formdata.append('file', {uri: uri, type: 'image/png', name: 'upload.png'});
formdata.append('timestamp', timestamp);
formdata.append('api_key', api_key);
formdata.append('signature', signature);
xhr.send(formdata);
}

May I ask why you are using let instead of const?

Btw thank you so much for the code. Works perfectly!

Hi, thanks for the good example. how can i add meta-data to this kind of upload?
for example, if i would like to upload file as type: private, how should i do it via xhr?

I'd be cautious about using this because your client secret shouldn't ever be exposed. If you want to use this technique, then create an upload preset that allows unsigned uploads (Settings -> Upload -> Upload presets). Then remove the whole "api_key" business from the formdata and instead put in a upload_preset field, something like

let formdata = new FormData(); formdata.append('file', {uri: uri, type: 'image/png', name: 'upload.png'}); formdata.append('upload_preset', upload_preset); xhr.send(formdata); }

I'd be cautious about using this because your client secret shouldn't ever be exposed. If you want to use this technique, then create an upload preset that allows unsigned uploads (Settings -> Upload -> Upload presets). Then remove the whole "api_key" business from the formdata and instead put in a upload_preset field, something like

let formdata = new FormData(); formdata.append('file', {uri: uri, type: 'image/png', name: 'upload.png'}); formdata.append('upload_preset', upload_preset); xhr.send(formdata); }

This does not allow for file or image overwrites @type

hi i had am new to cloudinary and caught some problem using the preview code. Please someone help me out .. Thanks. Code as below

uploadImage=(img_uri , _imgtype , fileName)=>{
CryptoJS = require('crypto-js');
let timespam = (Date.now() / 1000 | 0).toString();
let api_secret = '{Api Secret}';
let hash_string = 'timestamp=' + timespam + "&upload_preset=" + "{Upload Preset Name}" + api_secret;
let signature = CryptoJS.SHA1(hash_string).toString();

const uri = img_uri;
const type = _imgtype;
const name = fileName;
const source = {
  uri,
  type,
  name,
}

const data = new FormData()
data.append('api_key' , '{API Key}');
data.append("cloud_name", "{Cloud Name}");
data.append('file', source);
data.append('timestamp' , timespam);
data.append('resource_type' , 'image');
data.append('upload_preset', Upload Preset Name);
data.append('signature' , signature);
//below is using XMLHttpRequest to post

let xhr = new XMLHttpRequest();
xhr.open('POST', "https://api.cloudinary.com/v1_1/XXX/image/upload");
xhr.onload = () => {
  console.log("inside onload");
  console.log(xhr);
};

xhr.onreadystatechange=(e)=>
{
    if(xhr.status==200 && xhr.readyState==4)
    {
        //alert(xhr.responseText);
        console.log(xhr.response);
    }
    console.log("Here : " + JSON.stringify(xhr));
    console.log("Response Code : " + xhr.status  + "   " + xhr.statusText);
}
xhr.send(data);

}

turn out it return response "Stream Closed". and i using react-native-image-picker to get the uri, image type and iamge name. that part have no problem

I got

{"error":{"message":"Unsupported Objec URL"}}