search

cloudinary / pkg-cloudinary-core

Distribution repository for the Cloudinary JavaScript library. Cloudinary is an end-to-end solution for all your image and video needs.
MIT License
54 stars 28 forks source link

hard time getting this to work in a gatsby app #25

Open barbalex opened 5 years ago

barbalex commented 5 years ago

I am trying to get an upload widget working in react in a gatsby app.

So I thought: great, there is a react sdk. But uups, not much help: https://cloudinary.com/documentation/react_image_and_video_upload. Seems that I should use jQuery (seriously?), pure javascript (that seems to query the api directly) or the upload widget. Great, that is what i want!

But wait: How is this installed in a modern app? The answer seems to be:

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

Hm. Gatsby is probably not going to like this, while building the project server side as it seems to add a method to the window object (which I only found out later). Plus I do not even know how to manipulate the index.html in Gatsby as it builds it itself. And in the year 2019 there must be a way to use this via npm to be able to profit from code-splitting.

Yeah, there is: https://cloudinary.com/documentation/javascript_integration. But oops: that does not seem to be able to create the widget either.

So let's see how it is done in the photo_album example. Hm. There is a magical call to window.cloudinary.openUploadWidget. How did that cloudinary method get into window?

After a lot of searching where window.cloudinary could have been initiated I finally realized that even though the react example is built with bells and whistles (babel and webpack), cloudinary is loaded globally via the above mentioned script tag in index.html. And it seems that cloudinary is adding its methods to the windows object.

Is there a way to integrate the upload and gallery widgets without using a script tag?

strausr commented 5 years ago

@barbalex You're correct our upload widget is indeed not compatible with Gatsby. We're constantly seeking on improving our features and this is indeed something that we are in discussion about. That being said, we don't have an ETA on when or if we'll include the upload widget as a stand-alone module. If we decide to add this to our roadmap we'll update here on this thread.