Unsigned upload - jQuery and Cloudinary

by Shirly Manor

HTML

<script src="https://res.cloudinary.com/demo/raw/upload/jquery.ui.widget_ypnflw.js"></script>
<script src="https://res.cloudinary.com/demo/raw/upload/jquery.iframe-transport_ajzwk5.js"></script>
<script src="https://res.cloudinary.com/demo/raw/upload/jquery.fileupload_adf5kt.js"></script>
<script src="https://res.cloudinary.com/demo/raw/upload/v1425809551/jquery.cloudinary_t0p9km.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>

<form class="upload_form">
  <input type="file" name="file" class="upload_field">

</form>
<div class="progress_wrapper">
  <div class="progress_bar"><div class="text"></div></div>
  
</div>
<div class="thumbnails"></div>

CSS

.progress_wrapper {
  display: block;
  margin: 5px 0;
  border: 1px;
  width: 100%;
  height: 20px;
  background-color: grey;
  border-radius: 5px;
  text-align: center;
}

.progress_bar {
  width: 0px;
  height: 20px;
  background-color: #1fd94d;
  text-align: center;
  line-height: 21px;
  border-radius: 5px;
  font-size: 15px;
}

.text {
    position: absolute;
    margin: 0 auto;
    width: 100%;
}

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

span{
    font-weight: bold;
}

JavaScript

var cloud_name = 'cloud-name';
var preset_name = 'upload-preset';

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

$.cloudinary.config({
  cloud_name: cloud_name
})

$('.upload_field').unsigned_cloudinary_upload(preset_name, {
  cloud_name: cloud_name
}, {
  multiple: true
}).bind('cloudinarydone', function(e, data) {

    $('.thumbnails').append($.cloudinary.image(data.result.public_id, {
      format: 'jpg',
      width: 150,
      height: 100,
      crop: 'thumb',
      gravity: 'face',
      effect: 'sharpen:300'
    }))
  }

).bind('cloudinaryprogress', function(e, data) {
	var percent = Math.round((data.loaded * 100.0) / data.total);
  $('.progress_bar').css('width', percent + '%');
  $('.progress_wrapper .text').text(percent + '%');
});