Doesn't work with React Native

[isair]

Due to crypto dependency.

[tocker]

Sorry for the delayed response.
'crypto' is part of Node.js and io.js (see https://iojs.org/api/crypto.html#crypto_crypto). If it is missing it could be due to a configuration issue.

[squiles]

Did you manage to get it to work @isair ? Having the same problem

[mroswald]

There's crypto-browserify bundled in node-libs-browser, which is bundled in webpack. If you bundle your app with webpack to index.ios.js and use this for your react-native app it works. But without webpack it does not work out-of-the-box, even if you add crypto or node-libs-browser to your project.

[mroswald]

Just use https://github.com/cloudinary/pkg-cloudinary-core, that works like a charm!

[robinnewhouse]

+1 for this issue. running in to the same problem. I've installed cloudinary-core but the package is still reported missing. Any advice?

[tocker]

@mroswald thanks for pointing to the solution!

@isair , @squiles ,@robinnewhouse please use cloudinary-core instead of this library.

npm install lodash
npm install cloudinary-core

The name of the library is cloudinary-core, so to import the entire namespace, use the following code:

import * as cloudinary from 'cloudinary-core';

var html = cloudinary.ImageTag.new( "sample", { cloud_name: "demo", width: 200, crop: "scale"}).toHtml();

[joonhocho]

What about uploading?

[tocker]

Unfortunately uploading is not supported in the core JS library. You can implement image upload using our RESTful API. See the Endpoint documentation in this link.

[ndao]

@tocker do you have documentation on uploading video using FormData? similar to this snippet
i used it for image and it works but can't seem to upload a video. it keeps uploading as an image. (uploading .mov file)

[GeoffreyPlitt]

@tocker:

I can't find documentation anywhere about adding eager transformations to REST API for uploading, is there any?

I also can't find any documentation for uploading CHUNKED using REST API, everything talks about cloudinary.upload_large but there's no docs of the REST equivalent.

[GeoffreyPlitt]

@tocker Any ideas?

[GeoffreyPlitt]

@isair @squiles @mroswald @robinnewhouse Working on a deadline, can anyone help?

[isair]

@GeoffreyPlitt I'm not uploading anything from the client to cloudinary, so I didn't need that functionality. For anything else, the core library is working well.

[mroswald]

@GeoffreyPlitt No idea,sry

[quadsurf]

@mroswald @tocker i spent all night trying to figure out how to upload video, was hoping either one of you could just confirm that it doesn't work so I can end my stubborn pursuit of a solution. For the majority of the night, I kept getting an error that said my video file was empty, no matter what file path I used.

I'm using React Native... your docs only provide one REST endpoint, and it's for image uploading.
https://api.cloudinary.com/v1_1/' + myCloudName + '/image/upload

Do we just use the same endpoint for uploading video? Or do we replace 'image' with 'video' in the endpoint URI, like so:
https://api.cloudinary.com/v1_1/' + myCloudName + '/video/upload

[TalLevAmi]

@quadsurf Please see http://cloudinary.com/documentation/upload_images#uploading_with_a_direct_call_to_the_api
If you want to upload a video use /video/upload, if you want to upload either images or videos, use /auto/upload.

[faceyspacey]

Cloudinary needs to get React Native working with the exact same API as the node api ASAP. It's a major blunder that Cloudinary is this late late to the party. Please inform your entire company. You have an amazing product--best in class solution for whatever this industry is called--and likely a majority of new users will be using React Native going forward. I'm one. I need this.

With the exorbitant fees Cloudinary charges, I don't expect to waste time on this. I'll save that for free open source packages, but not for paid SaaS products. It's just not right for Cloudinary at this point in time. Major mistake guys. I need to be able to upload from React Native clients asap. Inform your CEO, do what you gotta do. React Native has been out for 2 years and has taken the world over. This makes zero sense.

Very disappointing.

[GeoffreyPlitt]

I'm successfully using fetch() to upload to Cloudinary. But the biggest drawback is, fetch() does not support progress, so for long uploads, the user has no idea when it will finish. Huge problem.

[faceyspacey]

@taragano any word on this?

[mstllc]

@GeoffreyPlitt have you seen https://github.com/wkh237/react-native-fetch-blob ?

I'm using this library to upload images from my React Native app to Cloudinary and it supports an upload progress callback among other features. My code looks something like:

export function uploadFile (file) {
  return RNFetchBlob.fetch('POST', 'https://api.cloudinary.com/v1_1/<cloud name>/<resource_type>/upload', {
    'Content-Type': 'multipart/form-data'
  }, [
    {name: 'file', filename: file.name, type: file.type, data: RNFetchBlob.wrap(file.uri)},
    {name: 'upload_preset', data: '<upload_preset>'}
  ])
}

Of course swap the things that you need to match your Cloudinary account. I'm uploading using a direct call to the API as described http://cloudinary.com/documentation/upload_images#uploading_with_a_direct_call_to_the_api

I'm also doing unsigned uploads, but you should be able to do signed uploads just as well with a few more form fields after generating your signature.

Good luck.

EDIT: I'm just returning the Promise from the RNFetchBlob.fetch call in the above, you'll want to chain your callbacks onto that. Some notes here:

https://github.com/wkh237/react-native-fetch-blob#multipartform-data-example-post-form-data-with-file-and-data
https://github.com/wkh237/react-native-fetch-blob#uploaddownload-progress

[GeoffreyPlitt]

Very helpful, thanks!

[EmilScherdin]

We've solved the issue of uploading images to Cloudinary in our RN app. But we're looking in to adding videos as well. I can't seem to find a good solution on uploading videos larger than 100MB. Is there a solution for this?

It would be nice to not having to send the image in multiple calls but maybe that's the only solution. Reference: https://cloudinary.com/documentation/upload_videos#chunked_video_upload

[aditimadan-Cloudinary]

The video size limit for Plus plan is 100 MB. You can enjoy more file size in our higher plans.
You are correct chunked upload will be one of the options if you do not want to upgrade.

[EmilScherdin]

Hmm.. did not know that. Thanks! 😄 @aditimadan-Cloudinary

[milesmatthias]

There is also https://github.com/XavierColombel/react-native-cloudinary-unsigned, but I haven't been able to get that to work.

[alanpog]

What’s the current best way to upload from RN? Most comments here are old and they don’t seem conclusive. Couldn’t find anything in the official docs or SO either (except for negative answers).

[shirlymanor]

@alanpog While publishing a react-native SDK is on our roadmap, we still don't support it. I'll gladly let you know once it's ready.

In the meantime, you can use our JavaScript or React SDKs.

[dormied]

Is there any way we can get an update to the availability of a RN SDK?

[strausr]

@dormied There is still no ETA but we'll update here as soon as we have more information

[kirantripathi]

how to delete image from cloudinary in react-native

[strausr]

@kirantripathi As mentioned, we don't support React Native or client-side deletions (for security reasons). That being said, we give the option to delete the image on client-side for the newly uploaded image, but the token expires in 10 minutes. For more information: https://support.cloudinary.com/hc/en-us/articles/202521132-How-to-delete-an-image-from-the-client-side-
For example, here is a basic widget implementation with a preset that has the Return delete token option enabled -
https://jsfiddle.net/3r0gef3n/
You'll see the X right next to the thumbnail after the upload.

[TanBeige]

I found the solution to uploading videos. I started off by using expo-camera's recordAsync to get the video URI.
I used the URI of the video to convert it to a blob and then got the blob's data using FileReader.
This data can then be used as the file for Cloudinary.

async function getBlobData(blob) {
    return new Promise((resolve, reject) => {
      // Get blob data
      var reader = new FileReader();
      var base64data = null;
      reader.readAsDataURL(blob); 
      reader.onloadend = function() {
          base64data = reader.result;                
          resolve(base64data);
    }
  });
}
const submitCloudinary = async (videoUri) => {
    const blob = await new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.onload = function() {
        resolve(xhr.response);
      };
      xhr.onerror = function(e) {
        console.log(e);
        reject(new TypeError('Network request failed'));
      };
      xhr.responseType = 'blob';
      console.log("File",videoUri)
      xhr.open('GET', videoUri, true);
      xhr.send(null);
    });

    // Get blob data of video
    const base64Video = await getBlobData(blob); 
  
    const formData = new FormData();
    formData.append("file", base64Video);
    formData.append("upload_preset", "preset1");
    formData.append("resource_type", 'video' );

    //sends video to cloudinary
    let response = await fetch(<cloudinary_url>, {
        body: formData,
        headers: {
            'content-type': 'application/json'
        },
        method: 'POST',
    }).catch(err => console.log("Error", err))
}

Edit: Formatting