Upload from a URL/Data URI

by Shirly Manor

HTML

<script src="https://res.cloudinary.com/demo/raw/upload/jquery.ui.widget.js"></script>
<script src="https://res.cloudinary.com/demo/raw/upload/jquery.iframe-transport.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.12.1/js/jquery.fileupload.min.js"></script>
<script src="https://res.cloudinary.com/demo/raw/upload/v1459950995/cloudinary-jquery-file-upload.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. Also, make sure that the upload preset has the <span>type</span> option set as <span>Yes</span></p>

<div class="upload_form" hidden>
  <input id="url" value="http://res.cloudinary.com/bloomsbury-publishing-public/image/upload/v1/BCH/BCH_images_wellcome_V0049180/V0049180.jpg" size=100 />
  <br/>
  <button>Upload</button>
  <div class="thumbnails"></div>
</div>

CSS

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

span{
    font-weight: bold;
}

JavaScript

var cloud_name = 'shirly';
var upload_preset = 'my-preset';

if (cloud_name != '' && upload_preset != ''){
  $('#message').remove();
  $('.upload_form').show();  

$.cloudinary.config({ cloud_name: cloud_name })
  var img_count = 0;
  $('button').click(function(){
    $('#url').unsigned_cloudinary_upload(upload_preset, 
      { cloud_name: cloud_name, tags: 'browser_uploads'}
    ).cloudinary_upload_url($('#url').val())
    .on('cloudinarydone', function(e, data) {
        img_count ++;
        $('.thumbnails').append('<div id="img_' + img_count + '">')
        $('#img_' + img_count).append($.cloudinary.image(data.result.public_id, 
          { format: 'jpg', width: 100, aspect_ratio: "1.0", 
          crop: 'fill', gravity: "auto"} ));
        $('#img_' + img_count).append('<button class="delete_image" data-token="' + data.result.delete_token + '">Delete image</button>');
        var picId = data.result.public_id; 
        console.log("imgURL: " + $.cloudinary.url(picId, {format: 'jpg', width: 100, aspect_ratio: "1.0", 
          crop: 'fill', gravity: "auto"})); 
      }

      ).on('cloudinaryprogress', function(e, data) {

        $('.progress_bar').css('width', 
          Math.round((data.loaded * 100.0) / data.total) + '%');

    }); //End of cloudinary upload
  });

  $('body').on('click', '.delete_image', function(){
    var token = $(this).attr('data-token');
    $.cloudinary.delete_by_token(token);
    $(this).parent().slideUp();
  });
}