Hackernoon logoCreating Image Uploader in Rails 6 Using Cloudinary and Carrierwave by@Tresor-bireke

Creating Image Uploader in Rails 6 Using Cloudinary and Carrierwave

Author profile picture

@Tresor-birekeTresor bireke

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
Next, if you don't have one yet generate an uploader by running
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
 
let's create a
 cloudinary.yml 
file in the
config
folder, let's go ahead and add our configurations
#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 
should look like this
#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.
I hope this post was helpful if you have a question or a suggestion leave a comment or find me on twitter

Tags

The Noonification banner

Subscribe to get your daily round-up of top tech stories!