Upload widget + Thumbnails (incl. videos)

Updating thumbnails into an existing unordered list, including thumbnail generations for videos

by joshuatz

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">
</ul>

CSS

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

span{
    font-weight: bold;
}

#preview{
    list-style: none;
}

JavaScript

var cloud_name = 'asdf';
var preset_name = 'adsf';
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"]}) + '\" />')
      });
    });
    $(document).on('cloudinarywidgetsuccess', function(e, data) {
  console.log("Global success", e, data);
});

});