JSFiddle - React, Tailwind, and code Playground

by Roni Feldsher

HTML

<html>

<head>
<script src="https://media-library.cloudinary.com/global/all.js"></script>
</head>

<body>
    <div id="image">
        <img id="cld-img" />
    </div>

</body>


</html>

JavaScript 1.7

const mloptions = {
    cloud_name: 'cloudinary-roni',
    api_key: '293834916535587',
    button_class: 'myBtn',
    button_caption: 'Insert Image',
    timestamp:'1552981148',
    username: '[email protected]',
  signature:'DFE80B564C23FB84CAA056E4B110C1A7CE1952CE30622BFE4E154601F156A2B3'
};
//cloud_name=cloudinary-roni&timestamp=1552981148&[email protected]
//signature=DFE80B564C23FB84CAA056E4B110C1A7CE1952CE30622BFE4E154601F156A2B3
function insertHandler(obj) {
    if (obj && obj.assets[0] && obj.assets[0].derived) {
        document.getElementById('cld-img').setAttribute('src', obj.assets[0].derived[0].secure_url);
    }
};
window.ml = cloudinary.createMediaLibrary(mloptions, {
    insertHandler: insertHandler
})
const opt = {
    multiple: false,
    folder: {path: "Cars", resource_type: "image"},
    default_transformations: [
        [{
            quality: "auto",
            fetch_format: "auto",
            width: 233,
            crop: "scale"
        }]
    ]
};
window.ml.show(opt);