JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript">
</script>
<button id="upload_widget" class="cloudinary-button">Upload files</button>
<p>Please select site to search:</p>
  <input type="radio" id="cloudinary" name="site" value="cloudinary.com">
  <label for="male">Cloudinary</label><br>
  <input type="radio" id="amazon" name="site" value="amazon.com">
  <label for="amazon">Amazon</label><br>
  <input type="radio" id="all" name="site" value="all" checked>
  <label for="all">All</label>

JavaScript

document.getElementById("upload_widget").addEventListener("click", function(){
		var searchby = document.querySelector('input[name="site"]:checked').value;
    console.log(searchby);
    showUploadWidget(searchby);
  }, false);

function showUploadWidget(mysite) {
 cloudinary.openUploadWidget({
    cloudName: "kns-dev-agency-1-kenshoo-fb-channel-ace-social-1574255611262",
    uploadPreset: "default",
    showPoweredBy:false,
    showAdvancedOptions: false,
multiple: true,
    sources: [
        "local",
        "url",
        "camera",
        "image_search",
        "facebook",
        "dropbox",
        "instagram",
        "shutterstock"
    ],
    googleApiKey: "XXXXXX",
    searchBySites: mysite,
    showAdvancedOptions: true,
    cropping: true,
    croppingAspectRatio:1.0,
    multiple: false,
    defaultSource: "url",
    styles: {
        palette: {
            window: "#8E6969",
            windowBorder: "#5F88B9",
            tabIcon: "#0078FF",
            menuIcons: "#CEC430",
            textDark: "#000000",
            textLight: "#FFFFFF",
            link: "#2C609A",
            action: "#FF620C",
            inactiveTabIcon: "#BF6958",
            error: "#E83019",
            inProgress: "#0078FF",
            complete: "#299436",
            sourceBg: "#BCC1C5"
        },
        fonts: {
            default: null,
            "'Kalam', cursive": {
                url: "https://fonts.googleapis.com/css?family=Kalam",
                active: true
            }
        }
    }
},
 (err, info) => {
   if (!err) {    
     console.log("Upload Widget event - ", info);
   }
  });
 }