JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<button id="upload_widget" class="cloudinary-button">Upload files</button>

<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>  

<script type="text/javascript">
var width = 1440;
var height = 810;
var ratio = width / height; // ~1.783
var portraitRatio = height / width; // ~0.56
var landscapeRatio = ratio;
var myWidget = cloudinary.createUploadWidget({
  cloudName: 'shirly', 
  uploadPreset: 'my-preset',
  croppingAspectRatio: landscapeRatio,
  croppingDefaultSelectionRatio: portraitRatio,
  cropping: true}, (error, result) => { console.log(error, result) })

document.getElementById("upload_widget").addEventListener("click", function(){
    myWidget.open();
  }, false);
</script>