JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<h6>
Replace <b>cloud_name</b>, <b>api_key</b> and <b>username</b> in JavaScript section.
</h6>
<script src="https://media-library.cloudinary.com/global/all.js"></script>
<button id="btn" class="myBtn" type="button" onclick="clickMe()">Click Me!</button>

JavaScript

window.ml = cloudinary.createMediaLibrary({
   cloud_name: 'shirly',
   api_key: '243651824887721',
   username: '[email protected]',
   button_class: 'myBtn',
   button_caption: 'Select Image or Video',
   insert_transformation: true,
 }, {
     insertHandler: function (data) {
       data.assets.forEach(asset => { console.log("Inserted asset:",
       JSON.stringify(asset, null, 2)) })
       }
    },
    document.getElementById("btn")
);

function clickMe() {
  window.ml.show();
}