JSFiddle - React, Tailwind, and code Playground
HTML
<a href="#" id="upload_widget_opener">Upload multiple images</a>
<!--Step 1: Replace the script URL-->
<!--<script src="https://widget.cloudinary.com/global/all.js" type="text/javascript"></script> -->
<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>
<script type="text/javascript">
//Step 2.1: Declare your uploadwidget variable
var myUploadWidget;
document.getElementById("upload_widget_opener").addEventListener("click", function() {
myUploadWidget = cloudinary.openUploadWidget({
cloudName: "aditimadan",
uploadPreset: "unsigned",
//Step 3: Add list of sources that should be added as tabs in the widget.
sources: [
"local",
"url",
"camera"
],
//UI Customization
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) {
//Step 2.3: Listen to 'success' event
if...