Customised Upload Widget

by Yakir Perlin

HTML

<script src="https://widget.cloudinary.com/v2.0/global/all.js"></script>
<div class="center">
<h1>
Happy World Emoji Day 2018! 
</h1>
 </br>
   <img id="image" src="https://res.cloudinary.com/yakir/image/upload/c_fill,f_auto,h_300,q_auto,w_300/hr7znado7mjep9p1gpxr"  height="300" width="300">
   </br>
   </br>
   <a  id="link" target="_blank"></a>
   </br>
   </br>
   <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) { callback(signature.signature); },
     error   : function(xhr, status, error) { console.log(xhr, status, error); }
    });
  }
  
var widget = cloudinary.createUploadWidget({
			cloud_name: cloud_name,
    	upload_preset: preset_name,
			sources: ['local', 'url', 'image_search'],
		   
		}, (error, result) => {  

	   if (result.event === "success") {
       console.log(eventData.info.secure_url);
       widget.close();
    }
});

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