Skip to content

Instantly share code, notes, and snippets.

@cmcewen
Created December 29, 2015 15:38
Show Gist options
  • Save cmcewen/b1ea2464aa88ae32be17 to your computer and use it in GitHub Desktop.
Save cmcewen/b1ea2464aa88ae32be17 to your computer and use it in GitHub Desktop.
Upload image from React Native to Cloudinary
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);
}
@milesmatthias
Copy link

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

@nandorojo
Copy link

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.

@ali-pourzahmatkesh
Copy link

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

@Johnsonzhangc
Copy link

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

@marcmoo
Copy link

marcmoo commented Dec 2, 2018

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

@nugoo1
Copy link

nugoo1 commented Jan 23, 2019

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

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

@erez-guesty
Copy link

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?

@type
Copy link

type commented Oct 29, 2019

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

@divee789
Copy link

divee789 commented Apr 30, 2020

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

@choows
Copy link

choows commented May 31, 2020

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

@rvigneshw
Copy link

I got

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment