JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<script src="//widget.cloudinary.com/global/all.js"></script>
<p id="message">Make sure you update the cloud name (<span>cloud_name</span>) and the upload preset's name (<span>preset_name</span>) for this demo to work.</p>

<a href="#" id="opener">upload</a>

CSS

p{
    font-size: large;
    background-color: rgb(237, 237, 225);
}

span{
    font-weight: bold;
}

JavaScript

var cloud_name = 'shirly';
var preset_name = 'lf24qyou';

if (cloud_name != '' && preset_name != ''){
  $('#message').remove();
};

$('#opener').cloudinary_upload_widget(
{ 
  cloud_name: cloud_name, 
  upload_preset: preset_name   
}, 
  function(error, result) 
{ 
  console.log(error, result) 
} 
);