Rails, Heroku, Cloudinary: Photos not uploading to cloudinary in production, although working locally

Question

I have been scratching my head for a while now with this, and I can't seem to find the solution. To sum it up, I am working on a demo app just for training, where at one point I prompt the user to upload a photo. I am using simple_form in rails, and cloudinary to host the photos. Everything works fine in my localhost, but the app breaks in production, as soon the photos should display. The reason for that is that they obviously never get uploaded, and I can't find the reason why. I am going to try to share everything related to that issue:

1/ First of all, I added my cloudinary key in the.env file as such:

CLOUDINARY_URL=cloudinary://298522699261255:Qa1ZfO4syfbOC-***********************8

2/ I added the following gems in the gemfile:

gem 'cloudinary', '~> 1.12.0'
gem 'dotenv-rails', groups: [:development, :test]

And I see that this was added in the gemfile.lock file:

    cloudinary (1.12.0)
      aws_cf_signer
      rest-client

3/ Added this in the.gitignore file:

.env*

4/ I have added this in the config/environments/development.rb and production.rb files:

config.active_storage.service = :cloudinary

5/ Added this line in the config/storage.yml file

cloudinary:
  service: Cloudinary

6/ This is my Model:

class Cocktail < ApplicationRecord
  has_many :doses, dependent: :destroy
  has_many :ingredients, through: :doses
  has_one_attached :photo

  validates :name, presence: true, uniqueness: true
end

7/ And my controller:

class CocktailsController < ApplicationController
  def index
    @cocktails = Cocktail.all
  end

  def show
    @cocktail = Cocktail.find(params[:id])
  end

  def new
    @cocktail = Cocktail.new
  end

  def create
    @cocktail = Cocktail.new(cocktail_params)
    if @cocktail.save
      redirect_to cocktail_path(@cocktail.id)
    else
      render :new
    end
  end

  private

  def cocktail_params
    params.require(:cocktail).permit(:name, :photo)
  end
end

8/ This is my simple_form where I prompt the user to add a photo:

<h1>Create your Cocktail</h1>

<%= simple_form_for(@cocktail) do |f| %>
  <%= f.error_notification %>
  <%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>

  <div class="form-inputs">
    <%= f.input :name %>
  </div>
    <%= f.input :photo %>
  <div class="form-actions">
    <%= f.button :submit %>
  </div>
<% end %>

<%= link_to "Back to Cocktails", cocktails_path %>

9/ And this is where the pics are displayed (and where the app breaks because the pics haven't been uploaded to Cloudinary)

<div class="container">
  <div class="row">
    <% @cocktails.each do |cocktail| %>
      <div class="col-4">
        <div class="container d-flex justify-content-between">
          <div class="card-trip">
              <%= cl_image_tag cocktail.photo.key, crop: :fill %>
            <div class="card-trip-infos">
              <div>
                <h2><%= link_to cocktail.name, cocktail_path(cocktail) %></h2>
              </div>
              <h2 class="card-trip-pricing"><%=  %></h2>
            </div>
          </div>
        </div>
      </div>
    <% end %>
  </div>
</div>

If I forget something, let me know I will add it.

This app works fine locally. But once pushed to Heroku, the app, which works fine otherwise, breaks when the user goes back to the index page where the pictures should be displayed. The probable reason is that pictures are not being uploaded to Cloudinary, so they are nowhere to be found. So my question is, why do the files upload to Cloudinary when I test the app locally but not when it is in production on Heroku? There is definitely something I am missing. A little bit of help would be much appreciated! Thanks!

Answer 1

Did you install the add on on Heroku?

$ heroku addons:create cloudinary

Did you provide Heroku with the API keys and secret? (config variables)

Cloudinary configuration parameters ( cloud_name , api_key , api_secret ) are defined via the CLOUDINARY_URL configuration variable.

Answer 2

Make sure;

config/storage.yml

cloudinary: service: Cloudinary

config/environments/development.rb

config.active_storage.service =:cloudinary

config/environments/production.rb

config.active_storage.service =:cloudinary

heroku config:set CLOUDINARY_URL=cloudinary://***************