Cloudinary在rails項目中配置undefined錯誤

我使用Rails和Cloudinary創建一個Web應用程序。在本地主機工作正常，但在Heroku我在控制檯中的錯誤：Cloudinary在rails項目中配置undefined錯誤

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

此錯誤是指

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

我的application.js

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

我的初始化/ 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

我l ayouts/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>

我的JavaScript/products.coffee

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

我_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>

而且我也有cloudinary.yml文件。

什麼會導致此錯誤？

來源

2017-07-27 Maxim Kiselyow

您是否在您的GemFile上使用gem 'cloudinary'，或者它是否指向任何特定的地方？

來源

2017-07-28 22:59:02

我在我的Gemfile中使用了gem –

我無法在我的結尾重現問題。關心與您的完整應用程序共享GitHub回購？ –

是的，https://github.com/mkiselyow/store/commits/dev。 –

Cloudinary在rails項目中配置undefined錯誤

回答

相關問題