Customised Upload Widget

HTML

<script src="https://widget.cloudinary.com/global/all.js"></script>
<div class="center">
   <img id="image" src="http://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. 
var cloud_name = 'jackie';
var preset_name = 'auto_seo'


$("#upload_btn").click(function () {

	cloudinary.openUploadWidget({

			cloud_name: cloud_name,
			upload_preset: preset_name,
			sources: ['local', 'url', 'image_search'],
			google_api_key: 'AIzaSyAVadaaefrhpdrx1Uf-DG1KyZLWK7e54-g'
		},
		function (error, result) {

			var seo_string = ""
			result[0].tags.forEach(function (tag) {
				if (seo_string == "") {
					seo_string = tag
				} else {
					seo_string += "-" + tag
				}
			});

			seo_string = seo_string.replace(/\s/g, "_");


			var small_size_image_url = "https://res.cloudinary.com/" + cloud_name + "/images/w_300,h_300,c_fill,g_auto,f_auto,q_auto/" + result[0].public_id + "/" + seo_string;

			var original_size_image_url = "https://res.cloudinary.com/" + cloud_name + "/images/f_auto,q_auto/" + result[0].public_id + "/" + seo_string;


			$("#link").attr("href", original_size_image_url);
			$("#link").text(original_size_image_url);
			$("#image").attr("src", small_size_image_url);


		});

});