paint-brush
Creating Image Uploader in Rails 6 Using Cloudinary and Carrierwaveby@Tresor-bireke
1,606 reads
1,606 reads

Creating Image Uploader in Rails 6 Using Cloudinary and Carrierwave

by Tresor bireke
Tresor bireke HackerNoon profile picture

Tresor bireke

@Tresor-bireke

July 6th, 2020
Read on Terminal Reader
Read this story in a terminal
Print this story
Read this story w/o Javascript
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

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

Company Mentioned

Mention Thumbnail
Twitter
featured image - Creating Image Uploader in Rails 6 Using Cloudinary and Carrierwave
1x
Read by Dr. One voice-avatar

Listen to this story

Tresor bireke HackerNoon profile picture
Tresor bireke

Tresor bireke

@Tresor-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.

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

L O A D I N G
. . . comments & more!

About Author

Tresor bireke HackerNoon profile picture
Tresor bireke@Tresor-bireke

TOPICS

THIS ARTICLE WAS FEATURED IN...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
Coffee-web
Hashnode
Learnrepo

Mentioned in this story

companies
X REMOVE AD