cloudinary.js

function visitorUploadToCloudinary(form) {

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

    // prevents form attribute from allowing uploads larger than 300mb.
    if ( uploadLimit > 300000000 ) {
      uploadLimit = 300000000;
    }

    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: 40000000, // 40MB
          dropZone: "#direct_upload",
          add: function(e, data) {

              console.log(data.originalFiles[0]['size'])
              console.log(uploadLimit)

              var uploadErrors = [];
              var acceptFileTypes = /(gif|jpe?g|png|tiff|pdf|bmp|ico|photoshop|eps|svg|WebP)$/i;
              if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
                  console.log(data.originalFiles[0]['type'])
                  uploadErrors.push('Not an accepted file type');
              }
              if(data.originalFiles[0]['size'] > uploadLimit ) {
                  uploadErrors.push('Filesize is greater than our ' + uploadLimitFriendly + ' limit. Please upload a smaller file.');
              }
              if(uploadErrors.length > 0) {
                  alert(uploadErrors.join("\n"));
              } else {
                  data.submit();
              }
          },
          start: function (e) {
            $('.ajax-overlay-confirmation').html("Starting upload...");
          },
          progress: function (e, data) {
            ajaxOverlayUploading("<div>Uploading... " + Math.round((data.loaded * 100.0) / data.total) + "%" + "</div>")
          },
          fail: function (e, data) {
            $(".ajax-overlay-confirmation").html('<div style="color: red;">Upload Failed</div>');
          },
          complete: function (e, data) {
            $('.ajax-overlay-confirmation')
              .html('<div><i class="fa fa-spinner fa-spin"></i><br />Processing File<br /> This will take a moment, especially if the file is large.</div>');

            centerOverlayContents();
            $('body').addClass('upload-complete');
            //$.post( $('#new_product').attr('action'), $('#new_product').serialize() );
          }
        })
        .bind('fileuploadprogress', function(e, data) {

        })
        .off("cloudinarydone").on("cloudinarydone", function (e, data) {
            // get response from Cloudinary, parameterize it, and apply it to the form attribute
            $(form).find('#response').val($.param(data.result))

            if ( $('#new_product_multi_upload_via_user_site').length ) {
                $.post( $(form).attr('action'), $(form).serialize() );
            }

            else if ( $('.edit-job').length ) {
                $.post( $(form).attr('action'), $(form).serialize() );
            }

            else if ( $('#new_product_via_user_site').length ) {
                $.post( $(form).attr('action'), $(form).serialize() );
            }

        });

}

gemfile

gem 'cloudinary', :git => 'https://github.com/cloudinary/cloudinary_gem.git', :ref=>'f0ab9de203f57f092161a5d837c6f259f0236384'

picture_uploader.rb

class PictureUploader < CarrierWave::Uploader::Base

  attr_reader :original_filename

  include Cloudinary::CarrierWave
  include CarrierWave::MiniMagick

  cloudinary_transformation :use_filename => true

  def default_url
    #"/assets/fallback/" + [version_name, "default.jpg"].compact.join('_')
    "/assets/fallback/default.jpg"
  end

  def extension_white_list
    %w(jpg jpeg gif png pdf tiff svg, eps, psd, bmp, webp)
  end

  def custom_crop
    w, h, x, y = CropPresenter.crop_values(model)
    return { :x => x.round.to_i,
             :y => y.round.to_i,
             :width => w.round.to_i,
             :height => h.round.to_i,
             :crop => :crop }
  end

  def custom_crop_thumbnail
    return {
      :transformation => [
        custom_crop,
        {
         :crop => :fit,
         :width => 50,
         :height => 50,
         :format => :jpg
        }
      ]
    }
  end

  process :tags => ['post_picture']

  version :large do
    resize_to_limit(500, 500)
    process :convert => 'jpg'
  end

  version :new_cropped do
    process :resize_when_oversized
    process :custom_crop
    process :convert => 'jpg'
  end

  version :new_cropped_sml_img do
    process :custom_crop_thumbnail
    process :convert => 'jpg'
  end

  version :job_item do
    cloudinary_transformation :transformation => [
        {:width => 140, :height => 140, :crop => :limit}]
    process :convert => 'jpg'
  end

  version :cropped do
    cloudinary_transformation :transformation => [
        {:width => 500, :height => 500, :crop => :limit}]
    process :custom_crop
    process :convert => 'jpg'
  end

  version :standard do
    process :resize_to_fill => [100, 150, :north]
    process :convert => 'jpg'
  end

  version :thumbnail do
    resize_to_fit(50, 50)
    process :convert => 'jpg'
  end

  version :thumbnail_low_res do
    process :convert => 'jpg'
    cloudinary_transformation :transformation => [
      { :width => 50, :height => 50, :crop => :fit, :quality => 90 }
    ]
  end

  version :site_manager do
    resize_to_fit(130, 100)
    process :convert => 'jpg'
  end

  version :cart_line_item do
    resize_to_fit(130, 100)
    process :convert => 'jpg'
  end

  version :job_line_item do
    resize_to_fit(50, 50)
    process :convert => 'jpg'
  end

  version :category do
    resize_to_fit(300, 300)
    process :convert => 'jpg'
  end

  version :album do
    resize_to_fit(300, 300)
    process :convert => 'jpg'
  end

  version :product_form_thumbnail do
    process :convert => 'jpg'
    cloudinary_transformation :transformation => [
      {:width => 90, :height => 44, :crop => :scale}
    ]
  end

  version :art_store do
    process :convert => 'jpg'
    cloudinary_transformation :transformation => [
      {:width => 440, :height => 440, :crop => :fit}#,
#      {:overlay => "deco_watermark", :opacity => 40, flags: :relative, width: 1.0, height: 1.0 }
    ]
  end

  version :full_size_with_watermark do
    process :convert => 'jpg'
    cloudinary_transformation :transformation => [
      {:width => 1000, :height => 1000, :crop => :fit},
      {:overlay => "deco_watermark", :opacity => 40, flags: :relative, width: 1.0, height: 1.0 }
    ]
  end

  version :full_size_with_watermark_canvas do
    process :convert => 'jpg'
    cloudinary_transformation :transformation => [
      {:width => 1000, :height => 1000, :crop => :fit},
      {:overlay => "deco_watermark", :opacity => 40, flags: :relative, width: 1.0, height: 1.0 },
      {:overlay => "canvas_overlay_sml", flags: :relative, width: 1.0, height: 1.0, opacity: 50 }
    ]
  end

end

product_creator.rb

  def self.create_print_picture(product, url = nil)
    url ||= product.original_picture.url(:resource_type => :raw)
    binding.pry
    preloaded_image = Cloudinary::Uploader.upload(url, :width => 9000, :height => 9000, :crop => :limit)
    product.picture = Cloudinary::Utils.signed_preloaded_image(preloaded_image)
  end

  def self.create_widget_picture(url = nil)
    url ||= product.original_picture.url(:resource_type => :raw)
    preloaded_image = Cloudinary::Uploader.upload(url, :width => 1000, :height => 1000, :crop => :limit, :format => :jpg)
    product.widget_picture = Cloudinary::Utils.signed_preloaded_image(preloaded_image)
  end

show.html.erb

<!-- "p" is the product model -->


  <%= p.cl_image_upload(:original_picture,
                        :html => { :multiple => true },
                        :resource_type => :raw,
                        :public_id => Cloudinary::Utils.random_public_id,
                        :chunk_size => '20.megabytes' # this only works when commented out
                       )%>