JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<script src="https://media-library.cloudinary.com/global/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script>

JavaScript

const mloptions = {
        cloud_name: 'my_company',
        api_key: '12345',
        username: '[email protected]',
        timestamp: '1234567890',
        signature: 'abcdefgh',
        button_class: 'myBtn',
        button_caption: 'Insert Images',
        default_transformations: [
          [{quality: "auto"},{fetch_format: "auto"}],
          [{w_80,h_80,c_fill,g_auto,r_max},{f_auto,q_auto}]
        ],    
        }
window.ml = cloudinary.createMediaLibrary({
   cloud_name: 'my_company',
   api_key: '1234567890',
   username: '[email protected]',
   button_class: 'myBtn',
   button_caption: 'Select Image or Video',
 }, {
     insertHandler: function (data) {
       data.assets.forEach(asset => { console.log("Inserted asset:",
       JSON.stringify(asset, null, 2)) })
       }
    },
    document.getElementById("open-btn")
)