Inline upload widget + Thumbnails

by sambrace

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>

<div id="cloudinary_uploader"></div>
<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 = 'demo';
var preset_name = 'preset1';

cloudinary.setCloudName(demo);

if ($('#cloudinary_uploader').length > 0) {

  cloudinary.openUploadWidget(
    { upload_preset: preset1,
      theme: 'minimal',
      sources: ['local'],
      multiple: 'false',
      max_files: 1,
      cropping: 'server',
      cropping_aspect_ratio: 1,
      cropping_coordinates_mode: 'custom',
      resource_type: 'image',
      inline_container: "#cloudinary_uploader",
      thumbnail_transformation: [ {format: 'png'}, { width: 152, height: 152, crop: 'fill', radius: 'max' } ],
      gravity: 'custom',
      client_allowed_format: ['png','gif','jpg','jpeg'],
      max_image_width: 400,
      max_image_height: 400,
      format: 'png',
      stylesheet: '#cloudinary-widget .upload_button_holder .button {width: auto; background-color: #468e87; padding: 10px 20px; color:white; border: 0px;} #cloudinary-widget .upload_button_holder:hover .button { background: #69b28e; cursor: pointer; }',
      thumbnails: '#preview'
    },
    function(error, result) {
      console.log(error, result, result[0].url, result[0].thumbnail_url);
      $('.custom_image_url_field').val(result[0].url);
      // $('').append('<img src="' +  result[0].thumbnail_url + '" />' );
    });

}