cloudinary_upload.js

// Cloudinary jQuery integration library uses jQuery File Upload widget
// (see http://blueimp.github.io/jQuery-File-Upload/).
// Any file input field with cloudinary-fileupload class is automatically
// wrapped using the File Upload widget and configured for Cloudinary uploads.
// You can further customize the configuration using .fileupload method
// as we do below.
function uploadToCloudinary(form) {

    var uploadButton = $(form).find('.cloudinary-fileupload'),
        uploadLimit = 50000000,
        uploadLimitFriendly = (uploadLimit / 1000000) + 'mb',
        filename;

    if ( $(form).data('limit') ) {
        uploadLimit = parseInt($(form).data('limit'))
        uploadLimitFriendly = (uploadLimit / 1000000) + 'mb';
    }

    uploadButton
      .fileupload({
        // Uncomment the following lines to enable client side image resizing and valiation.
        // Make sure cloudinary/processing is included the js file
        //disableImageResize: false,
        //imageMaxWidth: 800,
        //imageMaxHeight: 600,
        //acceptFileTypes: /(\.|\/)(gif|jpe?g|png|bmp|ico)$/i,
        //maxFileSize: 10000, //50000000, // 50MB
        dropZone: "#direct_upload",
        add: function(e, data) {
            console.log(data.originalFiles[0]['type'])
            var uploadErrors = [],
                //acceptFileTypes = /(gif|jpe?g|png|tif|tiff|pdf|bmp|ico|photoshop|ps|eps|ept|eps3|ai|application\/postscript|svg|WebP|jpc|jp2|j2k|wdp|jxr|hdp|flif|DjVu)$/i
                acceptFileTypes = /(gif|jpe?g|png|tif|tiff|pdf|bmp|ico|photoshop|ps|eps|ept|eps3|svg|WebP|jpc|jp2|j2k|wdp|jxr|hdp|flif|DjVu|mp4)$/i;

            if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
                uploadErrors.push('Not an accepted File Type');
            }
            if(data.originalFiles[0]['size'] > uploadLimit) {
                var url = 'https://artstorefrontssupport.zendesk.com/hc/en-us/articles/115002301707-How-To-Compress-Your-Images-For-Use-on-Your-Website';
                uploadErrors.push('<p>Filesize is greater than our <b>' + uploadLimitFriendly + ' limit</b>. Please optimize your file and upload a smaller file. See this article on <a href="' + url + '" target="blank">How to Optimize Your File Sizes</a> which will allow for the fastest page loading time.');
            }
            if(uploadErrors.length > 0) {
                //alert(uploadErrors.join("\n"));
                swal({
                  title: "Error!",
                  text: uploadErrors.join("\n"),
                  html: true,
                  type: "error"
                });
            } else {
                data.submit();
            }
        },
        start: function (e, data) {
            $('.ajax-overlay-confirmation')
                .addClass('uploading')
                .css('height', $(document).height())
                .fadeIn()
                .html('<span class="initial-text">Preparing to Start the Upload Process...</span>')

            // scroll to top of page
              $("html, body").animate({ scrollTop: 0 }, "slow");

            // centerOverlayContents($('.ajax-overlay-confirmation'));
        },
        progress: function (e, data) {

            filename = data.files[0]['name']
            $('.ajax-overlay-confirmation .initial-text').text('Upload Progress by Filename')

            if ( $('div[data-filename="' + filename + '"]').length ) {

                $('div[data-filename="' + filename + '"]').html("<i class='fa fa-spinner fa-spin'></i> <b>" + filename + "</b> uploading " + Math.round((data.loaded * 100.0) / data.total) + "%")

            }
            else {

                $('.ajax-overlay-confirmation')
                    .append("<div class='uploaded-file-info' data-upload-completed='false' data-filename='" + filename + "'> <i class='fa fa-spinner fa-spin'></i> <b>" + filename + "</b> uploading " + Math.round((data.loaded * 100.0) / data.total) + "% </div>")

                $('.ajax-overlay-confirmation .uploading').css('height', $(document).height + 40)
            }

        },
        fail: function (e, data) {
            $(".status").text("Upload failed: " + filename);
        },
        complete: function (e, data) {
            $('div[data-filename="' + filename + '"]').html('<i class="fa fa-spinner fa-spin"></i> <b>' + filename + '</b> uploaded, now processing...')
            $('body').addClass('upload-complete');
        }
      })
      .bind('fileuploadprogress', function(e, data) {

      })
      .off("cloudinarydone").on("cloudinarydone", function (e, data) {

          filename = data.files[0]['name']

          if ( $('input[name="original_filename"]').length ) {
              $('input[name="original_filename"]').val(filename)
          }
          else {
              $(form).prepend('<input type="hidden" name="original_filename" value="' + filename + '">')
          }

          // get response from Cloudinary, parameterize it, and apply it to the form attribute
          $('#response').val($.param(data.result))

          $.post( form.attr('action'), form.serialize() );

          // $("#photo_bytes").val(data.result.bytes);
          // $(".status").text("");
          // $(".preview").html(
          //   $.cloudinary.image(data.result.public_id, {
          //     format: data.result.format, width: 50, height: 50, crop: "fit"
          //   })
          // );
          // cloudinaryViewUploadDetails(data.result);
      });

}

function cloudinaryViewUploadDetails(upload) {
    // Build an html table out of the upload object
    var rows = [];
    $.each(upload, function(k,v){
      rows.push(
        $("<tr>")
          .append($("<td>").text(k))
          .append($("<td>").text(JSON.stringify(v))));
    });
    $("#info").html(
      $("<div class=\"upload_details\">")
        .append("<h2>Upload metadata:</h2>")
        .append($("<table>").append(rows)));
  }