So you've developed an impressive rails APP that showcases a gallery of images. Its time to unveil it on the worldwide web via Heroku. Image uploads in a local development environment are currently defaulted to local psql. In production environment (Heroku), a cloud storage service stores images. By popular choice, AWS S3 cloud service would be suitable to host your images. They offer a free plan, but to sign up it requires a credit/debit card. In my experience setting AWS up for image-handling was challenge. If one does not exercise extreme caution; API key and secret will get exposed on Github. Unscrupulous bots are on the prowl for these credentials to exploit compute resources. Hence raking up a hefty bill. Since Heroku does not host pictures, Heroku's addon cloud service  Cloudinary does. It offers a solution to web application’s entire image management pipeline. Cloudinary offers comprehensive APIs and administration capabilities. It is easy to integrate with any web application, existing or new on Heroku. Cloudinary provides URL and HTTP based APIs. Which helps integrates with any Web development framework. As opposed to setting up a separate Cloudinary account. By the end of this article, users will upload pictures over your rails app on Heroku. On the back-end, images uploads to or deleted from Cloudinary. Your rails app displays images hosted on Cloudinary via API exchange. The best part is that Cloudinary will not ask for your credit card to sign up for 10GB free storage. Author’s Assumptions The following assumptions are being made: You are using Heroku to host your rails app
. Heroku CLI is installed on your machine
. Your rails app have been pushed to Heroku. Cloudinary local and cloud setup Edit your Gemfile, add the following line. gem ‘carrierwave’
gem ‘cloudinary’ # ./gemfile Run "run bundle install" to install inserted gems. Login Herokuapp page and click on the app as illustrated below; Navigate to "Resources". Find & select Cloudinary in the search box as illustrated below; Select "Start Plan" for free usage and click provision. You are now redirected to the Cloudinary admin page. Notice generated credentials. Copy cloud name, API key, API secret & Environment Variable. To hide API key and secret, while the resides in Github, we use config variables. First, navigate to settings and click on config vars. Input credentials (CL_ID, CL_key, Cloudinary_URL) as illustrated below; Create a cloudinary.yml file in your ‘config’ folder. Copy and paste the template into new file. Substitute Cloud_name for actual cloud name found in Cloudinary admin dashboard. This configuration specifies credentials as well as other attributes. --- cloud_name <%= ENV[ ] %> <%= ENV[ ] %> cloud_name <%= ENV[ ] %> <%= ENV[ ] %> cloud_name <%= ENV[ ] %> <%= ENV[ ] %> # config/cloudinary.yml development: cloud_name: api_key: "CL_ID" api_secret: "CL_KEY" enhance_image_tag: true static_file_support: false production: cloud_name: api_key: "CL_ID" api_secret: "CL_KEY" enhance_image_tag: true static_file_support: true test: cloud_name: api_key: "CL_ID" api_secret: "CL_KEY" enhance_image_tag: true static_file_support: false Create an initializer cloudinary.rb as below. When rails server starts up, configuration below will take affect. Cloudinary.config config.cloud_name = config.api_key = ENV[ ]
  config.api_secret = ENV[ ]
  config.secure = config.cdn_subdomain = do |config| 'cloud_name' "CL_ID" "CL_KEY" true true end Assuming you have built the image upload feature (as shown in Setup uploader for Cloudinary as below; learn enough tutorial). CarrierWave::MiniMagick Cloudinary::CarrierWave version process => [ , , ] Rails.env.production? Cloudinary::CarrierWave
    CarrierWave.configure config.cache_storage = storage # app/uploader/picture.rb < CarrierWave::Uploader:: class PictureUploader Base include include # Specify dimensions for images to resize to for appropriate display fit :standard do :resize_to_fill 400 400 :north end # Cloudinary will be utilized in production (Heroku) while local psql stored us utilized in development and testing environment. if include do |config| :file end else :file end # Cloudinary public file path to upload and display pictures def store_dir "uploads/ / / " #{model. .to_s.underscore} class #{mounted_as} #{model.id} end # Only files with extension jpg jpeg, gif and png will be uploaded def extension_whitelist %w[jpg jpeg gif png] end end For image upload forms, emulate the following erb form on front-end view; <%= %> <%= %> <% %> # app/views/micropost/_form.html.erb form_with( @post, ) model: local: true do |form| .
. < = > span class "picture" form.file_field , :picture accept: 'image/jpeg,image/gif,image/png' .
. </ > span end For image display, emulate the following erb tag on front-end view; <% @feeds.each %>
.
.
<%= image_tag p.picture.url p.picture? %>
.
.
<% %> # app/views/micropost/_feed.html.erb do |p| if end Now that you are done, push rails app to Heroku and test it. Check out my , to see how it was done. Gitbub Repo

Heroku

Cloudinary Upload API Introduction: Hassle Free Alternative to AWS S3

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

How To Pack Javascript Code with Webpack

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

How To Pack Javascript Code with Webpack

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps