Cloudinary config undefined error in rails project

Question

I create a web application using Rails and Cloudinary. On localhost works fine but on Heroku I get an error in the console:

Uncaught TypeError: Cannot read property 'config' of undefined at 10:15

This error refers to

<script type="text/javascript">$.cloudinary.config({"api_key":"my_api_key","cloud_name":"my_cloud_name","private_cdn":false});</script>

My application.js

//= require jquery
//= require jquery_ujs
//= require cloudinary
//= require bootstrap-sprockets
//= require_tree .

My initializers/cloudinary.rb

Cloudinary.config do |config|
  if Rails.env.development?
...
  elsif Rails.env.production?
    config.cloud_name = "my_cloud_name"
    config.api_key = 'my_api_key'
    config.api_secret = 'my_api_secret'
    config.enhance_image_tag = true
    config.static_image_support = false
  elsif Rails.env.test?
...
  end
end

My layouts/application.html.erb

  <head>
    <title>Title</title>
    <!-- Bootstrap core CSS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

    <!-- Custom styles for this project -->
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all' %>
    <%= javascript_include_tag 'application' %>
    <%= cloudinary_js_config %>

  </head>

My javascripts/products.coffee

$ ->
  if $.fn.cloudinary_fileupload != undefined
    $('input.cloudinary-fileupload[type=file]').cloudinary_fileupload()
  return

My _form.html.erb

<%= form_with(model: product, local: true) do |form| %>
  <% if product.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(product.errors.count, "error") %> prohibited this product from being saved:</h2>

      <ul>
      <% product.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div id="direct_upload" class="basic_form">
  <h1>New Photo</h1>
    <div class="form_line">
      <%= form.label :image, "Image:" %>
      <div class="form_controls">
        <div class="upload_button_holder">
          <%= link_to("Upload", "#", :class => "upload_button") %>
          <% if @unsigned %>
            <%= form.cl_unsigned_image_upload(:image, @preset_name) %>
          <% else %>
            <%= form.cl_image_upload(:image, :return_delete_token=>true) %>
          <% end %>
        </div>
        <span class="status"></span>
      </div>
    </div>
    <div class="form_line">
      <div class="form_controls">
        <div class="preview"></div>
      </div>
    </div>
  </div>

  <div class="actions">
    <%= form.submit("Завершить")%>
  </div>
  <%= form.hidden_field :bytes %>
  <%= hidden_field_tag :direct, params[:direct] %>
<% end %>

<!-- 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")
      .cloudinary_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) {
          $(".status").text("Uploading... " + Math.round((data.loaded * 100.0) / data.total) + "%");
        },
        fail: function (e, data) {
          $(".status").text("Upload failed");
        }
      })
      .off("cloudinarydone").on("cloudinarydone", function (e, data) {
        $("#photo_bytes").val(data.result.bytes);
        $(".status").text("");
        var preview = $(".preview").html('');
        $.cloudinary.image(data.result.public_id, {
          format: data.result.format, width: 50, height: 50, crop: "fit"
        }).appendTo(preview);

        $('<a/>').
          addClass('delete_by_token').
          attr({href: '#'}).
          data({delete_token: data.result.delete_token}).
          html('&times;').
          appendTo(preview).
          click(function(e) {
            e.preventDefault();
            $.cloudinary.delete_by_token($(this).data('delete_token')).done(function(){
              $('.preview').html('');
              $('#info').html('');
              $("#photo_bytes").val('');
              $('input[name="photo[image]"]').remove();
            }).fail(function() {
              $('.status').text("Cannot delete image");
          });
        });
        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)));
    }
    $('.cloudinary-fileupload').bind('fileuploadchange', function() { $(this).hide()})
</script>

And also I have cloudinary.yml file.

What can cause this error?

Answer 1

您是否在gem 'cloudinary'上使用了gem 'cloudinary' ，或者它指向了任何特定位置？

Cloudinary config undefined error in rails project

Question

1 answers

solution1
0 2017-07-28 22:59:02

Cloudinary config undefined error in rails project

Question

1 answers

solution1 0 2017-07-28 22:59:02

solution1
0 2017-07-28 22:59:02