JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<script src="https://res.cloudinary.com/demo/raw/upload/v1425809551/jquery.cloudinary_t0p9km.js"></script>
<script src="https://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="#" class="cloudinary-button" id="upload_widget_multiple">Upload multiple images</a>
<br /><br />

Preview:
<ul id="preview" width="200">
</ul>

<a href="#" id="upload_widget_opener">Upload multiple images</a>
<ul id="preview">
</ul>

CSS

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

span{
    font-weight: bold;
}

#preview{
    list-style: none;
}

JavaScript

var cloud_name = 'dmlwdg4vj';
var preset_name = 'bejvxjqt';
if (cloud_name != '' && preset_name != '') $('#message').remove();

$.cloudinary.config({ cloud_name: cloud_name});
cloudinary.setCloudName(cloud_name);
$('#upload_widget_multiple').click(function() {
  cloudinary.openUploadWidget({ upload_preset: preset_name,
  cropping: 'server',
    max_width:400,
    max_height:400,
    min_width:200,
    min_hight:200,
    thumbnails: '.content',
    cropping_coordinate_mode: 'custom'}, 
    function(error, result) {
      console.log(error, result);
      ids_and_ratios = {};
      $.each(result, function(i, v){
      	$('#preview').append('<li><img src=\"' + $.cloudinary.url(v["public_id"], {format: 'jpg', resource_type: v["resource_type"]}) + '\" />')
      });
    });
});