Customised Upload Widget

by Yakir Perlin

HTML

<script src="https://widget.cloudinary.com/v2.0/global/all.js"></script>
<div class="center">

   <button id="upload_btn" class="button blue">Upload New Image</button>
</div>

CSS

.center {
    padding: 10px 0;
     text-align: center;
    
} 

a:link, a:visited {
    background-color: #0071BA;
    color: white;
    padding: 14px 25px;
    text-align: center; 
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: #0E2F5A;
}

.button {
    background-color: #4CAF50;  
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.blue {
    background-color: white; 
    color: black; 
    border: 2px solid #008CBA;
}

.blue:hover {
    background-color: #008CBA;
    color: white;
}

JavaScript

// Enter you cloud and upload preset names here. 
const cloud_name = 'yakir';
const preset_name = 'worldemojiday'
const signature_endpoint_url = 'https://wt-4a5ed1f45ead1f7ca118a9190262ef96-0.sandbox.auth0-extend.com/signed-upload-endpoint';
const api_key = "129947752512192";
const google_api_key = "AIzaSyAVadaaefrhpdrx1Uf-DG1KyZLWK7e54-g";



var generateSignature = function(callback, params_to_sign){
    $.ajax({
     url     : signature_endpoint_url,
     type    : "POST",
     dataType: "json",
     data    : params_to_sign,
     complete: function() {console.log("complete")},
     success : function(signature, textStatus, xhr) { 
     console.log(signature)
     callback(signature.signature); },
     error   : function(xhr, status, error) { console.log(xhr, status, error); }
    });
  }
  
var widget = cloudinary.createUploadWidget({
			cloud_name: cloud_name,
      api_key: api_key,
      upload_signature: generateSignature,
			upload_preset: preset_name,
			sources: ['local', 'url', 'image_search'],
			google_api_key: google_api_key,
      preBatch: (cb ,data) => {console.log(data.files[0].name); cb({}) } 
    },
    (error, result) => {  

  			if (error) {
				console.log(error);
        }
        console.log("Event: "+result.event);

    
    if (result.event === "success") {
       console.log(result.info.eager[0].secure_url);
       widget.close();
    }
});

    
   
 $("#upload_btn").click(function () {
     widget.open();
});