JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<script src="https://unpkg.com/[email protected]/cloudinary-core-shrinkwrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<div class="container">


  <button id="upload_widget">Upload Files</button>

  <img src="{imageUrl}" alt="Image">
</div>

CSS

.container {
  margin-top: 5%;
}

html,body {
  color: #454545;
}

JavaScript

var myWidget = cloudinary.createUploadWidget({
  cloudName: 'dhscykrsd',
  uploadPreset: 'YOUR_UPLOAD_PRESET'  // Create an upload preset in your Cloudinary dashboard
}, (error, result) => {
  if (!error && result && result.event === "success") {
    console.log('Uploaded!', result.info);
    // Handle the uploaded asset here
  }
});

// Open the upload widget when the button is clicked
document.getElementById("upload_widget").addEventListener("click", function () {
  myWidget.open();
}, false);


var imageUrl = cloudinary.url('public_id', { width: 300, height: 200, crop: 'fill' });