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);
}

If someone else comes across this, here's what worked for me: cloudinary/cloudinary_npm#56 (comment)

I'd just like to say, this saved me from both of the broken RN libraries for cloudinary, so thank you for relieving me from hours of headaches.

how we can specify a preset and upload images in protected mode? how can upload in the specific folder in cloudinary ?

Why my code get "Invalid Signature" when I want to add some option in the hash string, like a folder?

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"}}