Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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);
}
@GeoffreyPlitt

This comment has been minimized.

Copy link

@GeoffreyPlitt GeoffreyPlitt commented Mar 13, 2017

how do you know when it's finished?

@GeoffreyPlitt

This comment has been minimized.

Copy link

@GeoffreyPlitt GeoffreyPlitt commented Oct 2, 2017

@wesleymonaro

This comment has been minimized.

Copy link

@wesleymonaro wesleymonaro commented Feb 22, 2018

@GeoffreyPlitt, when the XHR finish the request, the method onload is invocated. The line 15 show the object with all request infos. To get only the response, you shoud call xhr._response ;)

@kantharia

This comment has been minimized.

Copy link

@kantharia kantharia commented May 21, 2018

I am getting some error {"error":{"message":"Upload preset must be specified when using unsigned upload"}}

@milesmatthias

This comment has been minimized.

Copy link

@milesmatthias milesmatthias commented Jun 12, 2018

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

@nandorojo

This comment has been minimized.

Copy link

@nandorojo nandorojo commented Sep 7, 2018

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

This comment has been minimized.

Copy link

@ali-pourzahmatkesh ali-pourzahmatkesh commented Oct 22, 2018

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

@Johnsonzhangc

This comment has been minimized.

Copy link

@Johnsonzhangc Johnsonzhangc commented Nov 8, 2018

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

@markmoomoo

This comment has been minimized.

Copy link

@markmoomoo markmoomoo 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

This comment has been minimized.

Copy link

@nugoo1 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

This comment has been minimized.

Copy link

@erez-guesty erez-guesty commented Sep 23, 2019

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

This comment has been minimized.

Copy link

@type 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

This comment has been minimized.

Copy link

@divee789 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

This comment has been minimized.

Copy link

@choows 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

This comment has been minimized.

Copy link

@rvigneshw rvigneshw commented Oct 8, 2020

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
You can’t perform that action at this time.