Adding Cloudinary Upload Widget in Retool

App Building
, ,
1

Please help, I am trying to add a cloudinary upload widget to retool app but dont know how.
The documentation for upload widget can be found here https://cloudinary.com/documentation/upload_widget
I have tried using html but to no avail

2

Hey @WolfSheep!

Have you tried using a custom component with Storage and cookies enabled?

1 Like
4

I was able to upload using iframe this time. I just want to know how to get the image url to automatically fill a text input component. Is it possible using iframe???
@Kabirdas

5

It should be possible using a custom component! You can use the window.Retool.modelUpdate function (example here) to pass data back to your custom component's model.

It looks like Cloudinary accepts a callback which in there template is:

(error, result) => { 
    if (!error && result && result.event === "success") { 
      console.log('Done! Here is the image info: ', result.info); 
    }
  }

This would be a grat place to stick the call to modelUpdate, you could do something like:

(error, result) => { 
    if (!error && result && result.event === "success") { 
      console.log('Done! Here is the image info: ', result.info); 
      window.Retool.modelUpdate({ imgUrl: result.info.url });
    }
  }

And then reference {{ yourCustomComponent.model.imgUrl }} elsewhere in your app.

Let me know if that works! I've attached a JSON you can import and play around with as well :slightly_smiling_face:
cloudinary_upload.json

1 Like