JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<!doctype html>
<html>
<head>

<script type="text/javascript">
function init () {
  // when a message is received from the page code
  window.onmessage = (event) => {
    if (event.data) {
      console.log("HTML Code Element received a message!");
      insertMessage(event.data);
    }
  }
}

// display received message
function insertMessage(msg) {
  document.getElementById('dashNo').innerHTML = msg;
  sendReturnMessage("Message from the HTML Component!");
}

// send message to the page code
function sendReturnMessage(msg) {
  window.parent.postMessage(msg, "*");
}
</script>

</head>

<body><center>
<div id="inline_container"></div>
<script src="//widget.cloudinary.com/global/all.js" folder=--Staging-Area type="text/javascript"></script> 
<script>
    cloudinary.openUploadWidget( 
  {     
   cloud_name: 'shirly', 
   upload_preset: 'my-preset' ,
   folder: '--StagingArea',
   inline_container: "#inline_container",
   keep_widget_open: false,
   cropping_show_dimensions: true,
   sources: ['local'],
   tags: 'msg'
  },
  function(error, result) { 
    console.log(error, result);
    if (result != null)
        $('#inline_container').html(""); // Will remove the widget after successful upload
  }
);
</script>