Search code examples
reactjsuploadwidgetcloudinaryuploader

#REACT can i change cloudinary image uploadar social media icons


In React, I want to change the social media icons of the Cloudinary upload widget. Currently, it has one color icon but I want to use the same icon just like the real icon of (Facebook, google drive.. etc ) Check Image


Solution

  • Currently, there is no option to set a different color to each icon. However, you can change the color of the icon by setting the inactiveTabIcon. For example:

    <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>
    <script type="text/javascript">
    
        var myWidget = cloudinary.createUploadWidget({
            cloudName: '<cloud name>',
            upload_preset: '<upload preset>',
            styles: {
            palette: {
                window: "#CC7E7E",
                windowBorder: "#90A0B3",
                tabIcon: "#2C609A",
                menuIcons: "#5A616A",
                textDark: "#000000",
                textLight: "#FFFFFF",
                link: "#2C609A",
                action: "#FF620C",
                inactiveTabIcon: "#BF6958",
                error: "#E83019",
                inProgress: "#0078FF",
                complete: "#299436",
                sourceBg: "#BCC1C5"
            }}
            }, (error, result) => { if (result.event == "success") {
                console.log(result.info) // result.info contains data from upload
            } })
    
            document.getElementById("upload_widget").addEventListener("click", function(){
                myWidget.open();
            }, false);
    
    </script>