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 myWidget = cloudinary.createUploadWidget({
  cloudName: 'my_cloud_name', 
  uploadPreset: 'my_preset', sources: [        "local",        "url",        "camera",        "image_search",        "facebook",        "dropbox",        "instagram",        "shutterstock"    ],
      showAdvancedOptions: true,    
      cropping: true,    
      multiple: false,    
      defaultSource: "local",    
      styles: {        
      	palette: {            
      		window: "#CC7E7E",           
      		windowBorder: "#90A0B3",            
      		tabIcon: "#0078FF",            
      		menuIcons: "#5A616A",            
      		textDark: "#000000",  
          textSize:  "48px",
      		textLight: "#FFFFFF",            
      		link: "#2C609A",            
      		action: "#FF620C",            
      		inactiveTabIcon: "#0E2F5A",            
      		error: "#E83019",            
      		inProgress: "#0078FF",            
      		complete: "#299436",            
      		sourceBg: "#BCC1C5"        },        
      		fonts: {            
      			default: null, "'Crimson Pro', crimson-pro": {                
      				url: "https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@900",   
      				active: true            }        
      			}}
      			    }, (err, info) => {   if (!err) {         console.log("Upload Widget event - ", info);   }  }); 
document.getElementById("upload_widget").addEventListener("click", function(){
    myWidget.open();
  }, false);
</script>