Creating Image Uploader in Rails 6 Using Cloudinary and Carrierwave

while developing a rails Application you might want to allow your users to upload an image Cloudinary provides an easy and free way of achieving that.... sounds good? let's get started.

Oh, wait before we start you'll need an API key from Cloudinary if you don't have an account yet, go ahead and create it. Alright let's get started now.

Assuming that you have a rails Application with a Post model We'll start by adding cloudinary and carrier wave to Our gem file in the following order.

gem 'carrierwave'
gem 'cloudinary'

then run 

bundle i

rails g uploader image

also, you'll need to have an image column in your post table assuming that you have a post model you can run

rails generate migration AddImageToPosts image:string

After running

rails db:migrate

 cloudinary.yml 

config

#config/cloudinary.yml

development:
  cloud_name: CLOUD NAME
  api_key: 'API KEY'
  api_secret: API SECRET
  enhance_image_tag: true
  static_file_support: false
production:
  cloud_name: CLOUD NAME
  api_key: 'API KEY'
  api_secret: API SECRET
  enhance_image_tag: true
  static_file_support: true

after adding the configurations we need to mount our uploader in the post model

# app/models/post.rb

class Post < ApplicationRecord
  mount_uploader :image, ImageUploader
end

next, we need to configure our uploader to work with Cloudinary.

your

app/uploaders/image_uploader.rb 

#app/uploaders/image_uploader.rb

class ImageUploader < CarrierWave::Uploader::Base

include Cloudinary::CarrierWave

  process convert: 'png'
  process tags: ['post_picture']

  version :standard do
    process resize_to_fill: [100, 150, :north]
  end

  version :thumbnail do
    resize_to_fit(50, 50)
  end

  CarrierWave.configure do |config|
    config.cache_storage = :file
   end

end

And now we are ready to start uploading images to our app.

in our form for creating a post

<fieldset>
  <%= f.label :image, 'image' %>
  <%= f.hidden_field :image_cache %>
  <%= f.file_field :image%>
</fieldset>

to display the image for a given post

<img src="<%=@post.image%>"/>

By now we should be able to upload and display images from our application.

learn more at https://cloudinary.com/documentation/rails_carrierwave

I hope this post was helpful if you have a question or a suggestion leave a comment or find me on twitter