JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<h1>Upload widget demo</h1>
<a href="#" id="upload_widget_opener1">Suggested</a>
<a href="#" id="upload_widget_opener2">Current</a>
<div class="feature_thumb"/>
<script src="//widget.cloudinary.com/global/all.js">

JavaScript

var widget = cloudinary.createUploadWidget({
    cloud_name: "idocld",
    	upload_preset: "fiddle",
    	cropping:'server',
    	theme:'white',
    	sources:['local','instagram','facebook','google_photos'],
    	show_powered_by: false,
    	stylesheet:"https://dev1-web-michaels.demandware.net/on/demandware.static/Sites-Artistree-Site/-/en_US/v1503482859968/css/cloudinary_widgetlayout.css",
    	secure:true, 
    	client_allowed_formats: ["png","gif", "jpeg", "jpg"]
  },
  function(error, result) {
    console.log(error, result);
  }
);

document.getElementById("upload_widget_opener1").addEventListener("click", function( event ) {
    widget.open();
  }, false);


//////// Current ////////

function openCloudinaryWidget() {
	cloudinary.openUploadWidget({ 
    	cloud_name: "idocld",
    	upload_preset: "fiddle",
    	cropping:'server',
    	theme:'white',
    	sources:['local','instagram','facebook','google_photos'],
    	show_powered_by: false,
    	stylesheet:"https://dev1-web-michaels.demandware.net/on/demandware.static/Sites-Artistree-Site/-/en_US/v1503482859968/css/cloudinary_widgetlayout.css",
    	secure:true, 
    	client_allowed_formats: ["png","gif", "jpeg", "jpg"]
    },
  function(error, result) {
    console.log(error, result);
  })
}

document.getElementById("upload_widget_opener2").addEventListener("click", function( event ) {
    openCloudinaryWidget();
  }, false);