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 src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
<script type="text/javascript">  
var myWidget = cloudinary.createUploadWidget({
  cloudName: 'shirly', 
  uploadPreset: 'my-preset',
  tags:'test',
  cropping: true,
 thumbnails: '.content',
  thumbnailTransformation:[{ width: 300,crop: 'scale' }]
        }, (error, result)=> { 
    if (!error && result && result.event === "success") { 
      console.log('Done! Here is the image info: ', result.info); 
    }
  }
)

document.getElementById("upload_widget").addEventListener("click", function(){
    myWidget.open();
  }, false);
</script>
<div class='content' width='100%'>

</div>