JSFiddle - React, Tailwind, and code Playground

by Roni Feldsher

HTML

<script src="https://widget.cloudinary.com/v2.0/global/all.js"></script>
<div class="upload_multiple_images_holder" style="margin-bottom: 20px">
  <button id="upload_widget_opener" class="cloudinary-button">Upload your image</button>
</div>

JavaScript

cloudinary.applyUploadWidget('#upload_widget_opener',{ 
    cloudName: 'demo', uploadPreset: 'blog_upload' }, 
    (error, result) => { });    

function showUploadWidget() { cloudinary.openUploadWidget({    cloudName: "cloudinary-roni",    uploadPreset: "preset1",    sources: [        "local",        "url",        "camera",        "image_search",        "facebook",        "dropbox",        "instagram"    ],    googleApiKey: "<image_search_google_api_key>",    showAdvancedOptions: true,    cropping: true,    multiple: false,    defaultSource: "facebook",    styles: {        palette: {            window: "#FFFFFF",            windowBorder: "#90A0B3",            tabIcon: "#0078FF",            menuIcons: "#5A616A",            textDark: "#000000",            textLight: "#FFFFFF",            link: "#0078FF",            action: "#FF620C",            inactiveTabIcon: "#0E2F5A",            error: "#F44235",            inProgress: "#0078FF",            complete: "#20B832",            sourceBg: "#E4EBF1"        },        fonts: {            default: {                active: true            }        }    }}, (err, info) => {   if (!err) {         console.log("Upload Widget event - ", info);   }  }); }