JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<script src="https://widget.cloudinary.com/global/all.js"></script>
<script src="https://res.cloudinary.com/demo/raw/upload/v1425809551/jquery.cloudinary_t0p9km.js"></script>


<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 = 'itay-test';
var preset_name = 'preset';
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}, 
    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"]}) + '\" />')
      });
    });
});