Cloudinary widget use in React

Viewed 2004

I am new to React. I am looking for a good way to upload photos to Cloudinary. I saw the Cloudinary widget but I am having trouble implementing it in a React app as described: https://cloudinary.com/blog/how_to_build_an_image_library_with_react_cloudinary#uploading_images

I put the script tag in index.html body:

<script src="//widget.cloudinary.com/global/all.js" type="text/javascript"></script>

then try to use in component:

class Landing extends Component {
  uploadWidget() {
    cloudinary.openUploadWidget(
      { cloud_name: 'minetoo', upload_preset: 'mine', tags: ['xmas'] },
      function(error, result) {
        console.log(result);
      }
    );
  }
...

but I get the error: 'cloudinary' is not defined

My app's boilerplate is generated with create-react-app if that matters.

2 Answers

This is very normal as pointed here and here. You need to access the cloudinary object from the window object:

window.cloudinary.openUploadWidget(...)
Related