JSFiddle - React, Tailwind, and code Playground

by sambrace

HTML

<a href="#" id="upload_widget_opener">Upload multiple images</a>

<script src="https://widget.cloudinary.com/v2.0/global/all.js" 
type="text/javascript"></script>

<script type="text/javascript"> 
    var myUploadWidget; 
document.getElementById("upload_widget_opener").addEventListener("click", 
function() { 
        myUploadWidget = cloudinary.openUploadWidget({ 
                cloudName: "innsbruck-printing", 
                uploadPreset: "j5lfupxj",
                sources: [ 
                     "local", "url", 
        "camera", 
        "image_search", 
        "facebook", 
        "dropbox", 
        "instagram"

                ], 
                styles: { 
                    palette: { 
                        window: "#10173a", 
                        sourceBg: "#20304b", 
                        windowBorder: "#9999ff", 
                        tabIcon: "#33ffcc", 
                        inactiveTabIcon: "#0e2f5a", 
                        menuIcons: "#ffccff", 
                        link: "#ff0066", 
                        action: "#33ffcc", 
                        inProgress: "#00ffcc", 
                        complete: "#33ff00", 
                        error: "#cc3333", 
                        textDark: "#000000", 
                        textLight: "#ffffff" 
                    } 
                }, 
                fonts: { 
                    default: null, 
                    "'Cute Font', cursive": 
"https://fonts.googleapis.com/css?family=Cute+Font", 
                    "'Gamja Flower', cursive": 
"https://fonts.googleapis.com/css?family=Gamja+Flower|PT+Serif" 
                } 
            }, 
            function(error, result) {

                if (result.event === "success") { 
                    myUploadWidget.close(); 
                } 
            }); 
    }, false);

    myUploadWidget.open(); 
</script>