Cloudinary Image Upload basic gallery

by Nick Evans

HTML

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script>
<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript">


</script>

<h1>Upload widget demo</h1>
<a href="#" id="upload_widget_opener">Upload multiple images</a>
<div id="feature_thumb" />

CSS

.thumbnail {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.thumbnail .image {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: block;
  opacity: 1;
  transition: .5s ease;
  backface-visibility: hidden;
}

.container {
  position: relative;
  width: 150px;
  height: 150px;
}


.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: #4CAF50;
  color: white;
  text-decoration: none;
  font-size: 14px;
  padding: 8px 8px;
  display: block;
  margin: 10px;
}

JavaScript

// More info here: https://cloudinary.com/documentation/upload_widget

$("#upload_widget_opener").click(function() {
  openUploader(true, "EventSeries", 123);
});


// These are both set in app.config
var ACMELEISUREMANAGEMENT_CUSTOMER_ID = "anotherhealthclub";
var CDN_URL_PREFIX = "https://res.cloudinary.com/acmeleisuremanagement/image/upload/";


// Images are stored as full URLs, with the same prefix of CDN_URL_PREFIX
// This is a mock database as an array
var uploadedImages = [];


// When saving the image URL to the database, the CDN_URL_PREFIX is added
function saveImage(publicId, context) {
  var urlForDatabase = CDN_URL_PREFIX + publicId;

  // Mock database call and data binding
  console.log('Adding to database for "' + context.type + '" with id "' + context.id + '": ' + urlForDatabase)
  uploadedImages.push(urlForDatabase);
  updateThumbnails();
}

// When deleting an image, the CDN_URL_PREFIX is removed to get the publicId to use with the Cloudinary backend API
function deleteImage(imageUrl) {
  var publicId = imageUrl.replace(CDN_URL_PREFIX, '');
  // Call API and use .NET to delete publicId https://cloudinary.com/documentation/dotnet_image_upload#update_and_delete_images
  console.log("Call to application API to deleted: " + publicId);
  // Remove from mock database
  uploadedImages = uploadedImages.filter(function(url) {
    return url !== imageUrl;
  });
  updateThumbnails();
}

// This is created once on pageload and reused
var widget = cloudinary.createUploadWidget({
    cloudName: "acmeleisuremanagement",
    // Note this key (uploadPreset) should only be loaded for logged in users
    uploadPreset: "safs0g72hd99sdf6",
    api_key: "7324503566283",
    resourceType: ["image"],
    multiple: true,
    sources: ['local'],
    folder: ACMELEISUREMANAGEMENT_CUSTOMER_ID,
    theme: "minimal"
  },
  (error, result) => {
    console.log(error, result);
    if (result && result.event === "success") {
      // The same event handler is always called on...