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>

JavaScript

document.getElementById("upload_widget").addEventListener("click", function(){
    showUploadWidget();
  }, false);

function showUploadWidget() { 
const presets = ["my_preview_preset", "my-preset", "ios_unsigned_upload"];
const getMyUploadPresets = (cb) => cb(presets);
cloudinary.openUploadWidget({ 
     cloudName: "shirly",    
     uploadPreset: "my-preset",    
     sources: [        "local",        "url",        "camera",        "image_search",        "facebook",        "dropbox",        "instagram",        "shutterstock"    ],       
     showAdvancedOptions: true,   
     croppingAspectRatio: 0.5,
     cropping: true,   
     multiple: false,    
     defaultSource: "local" ,
     showAdvancedOptions: true,
  	 getUploadPresets: getMyUploadPresets
     }, 
     (err, info) => {   if (!err) {         console.log("Upload Widget event - ", info);   }  }); }