gistfile1.rb

<div class="section-container auto" data-section>

  <section>
    <p class="title" data-section-title><a href="#panel2">Categories & Products</a></p>
    <div class="content" data-section-content>
      
      <div class="row row-spacing">
        <div class="large-12 columns product-list">
          <%= form_for([:site_manager, @page, @product], :html => {id: 'new_product'}) do |u| %>       
            <% error_keys = get_fields_with_errors(flash) %>
            
            <%= u.label :picture, 'Add Product', class: add_error_class(error_keys, 'slug') %><br />
            <%= u.cl_image_upload :picture, :html => { multiple: true } %>

            
            <%= u.hidden_field :store_id, value: @store.id %>
            <%= u.hidden_field :website_id, value: @website.id %>
            <%#= u.hidden_field :bytes %>
            <%= hidden_field_tag :direct, params[:direct] %>
          <% end %>

          <div class="status"></div>
          <div id="progressbar"></div>
          <div class="preview"></div>
          
        </div>
      </div>

      <div class="row row-spacing">
        <div class="large-12 columns form-buttons site-controls-save">
          <%= dynamic_form_buttons(u, (@controller || params[:controller]), (@action || params[:action]), @user) %>
        </div>
      </div>
        
      <% end %>

    </div>
  </section>

</div>

<!-- Configure Cloudinary jQuery plugin -->
<%= cloudinary_js_config %>

<script>
  $(document).ready(function() {
    // 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.
    $(".cloudinary-fileupload")
      .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: 20000000, // 20MB
        dropZone: "#direct_upload",
        start: function (e) {
          $(".status").text("Starting upload...");
        },
        progress: function (e, data) {

        },
        fail: function (e, data) {
          $(".status").text("Upload failed");
        }
      })
      .on("fileuploadprogressall", function (e, data) {
        console.log('nick')
        $(".status").text("Uploading... " + Math.round((data.loaded * 100.0) / data.total) + "%");
      })
      .off("cloudinarydone").on("cloudinarydone", function (e, data) {
        $("#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"
          })
        );
        view_upload_details(data.result);
      });
    });
    
    function view_upload_details(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)));
    }
</script>