How To Upload and Display Images Trough IBM Cloud with Rails 6

This is a tutorial about how we can implement IBM Cloud Storage in our Ruby on Rails 6 projects. We can upload images and manage these assets with Rails. In this tutorial we are going to build a simple app. We can upload a kitty photo and vote for that photo (this tutorial only includes the part of creating a new Rails app, configuring it to save our photo on the cloud, and showing it on an image tag; the design and the part for the photo will be included in the app but is not shown in this tutorial). You can find the app on this repository , and the live version here: . https://github.com/redacuve/my-cat-photos https://my-cat-photos.herokuapp.com/ Before we start, here is a little bit of background. I needed to use file storage for my project on Rails 6. At first Amazon S3 seemed fair to me. There is a lot of documentation about how to use AWS, but there was a problem. For a free account you need a valid credit card. I was looking for other options but they all needed credit cards (Azure, Google Cloud). Then I found IBM Cloud. For a free account you don’t need a credit card. IBM also upgraded their cloud. Now it is compatible with protocol S3 (Simple Storage Service) like Amazon Web Services. Thanks to this protocol you can save objects (they can be files, or in this case images) and every object is saved in a bucket (a container of objects). This is great because the previous cloud of IBM was tricky to use. Creating an account and making our Bucket The first part is, of course, going to the registration URL and registering. We can go to and create our account. https://cloud.ibm.com/registration We need to provide our email and password. Then click on Next. We need to look for our confirmation email. IBM will send us a code and we need to insert that code in the given field and click on Next. We need to add our personal information and click on . Create the account When we create our account, we can read some documentation and we can click on . Then we are going to see the dashboard. Accept I’m not going to explain all of the services that IBM includes, but feel free to check them out. There are some very good services. We can create our resource clicking on “Create resource”. We are going to search “Object Storage” and click on it. There we can see the features of our plan (lite and free). We can add the name of the resource (I will call it my-cat-photos; you can call it whatever you want). And then select “Create”. Now we are on the Cloud Object Storage section. We need to select “Create Bucket”. Here we can customize our bucket clicking on Custom Bucket. But a standard predefined bucket is fine, so we can select that one. it’s important to have a unique bucket name. We can see the location of the bucket (and we can change it) but the default location is OK. We can also see the service credentials, where we can add another one later. We are ready to click on “View Bucket Configuration”. IMPORTANT. Here there is information that we will need later. We need to look at it and save it for later. Specifically, we need: The region Bucket name Endpoint. We can find the first two on bucket details and the last one scrolling a little bit to endpoints and copy the public one. For me, these are the data: us-south Region: my-cat-photos-cos-standard-cpm Bucket name: s3.us-south.cloud-object-storage.appdomain.cloud Endpoint: Now we can obtain the credentials. For that we need to click on the “Service credentials” menu on the left. Here we are going to click on the “New Credential” button. We can name the credential as we want. But we need to click on advanced options. Here we need to toggle on the switch to include the HMAC credential to our credential and click on add. Then our credential will be created. We can expand the credential and copy the values: and access_key_id secret_access_key At this point, we need to have the following: Region Bucket Name Endpoint access_key_id secret_access_key. With this information we can go on to the second part of this tutorial. Creating our app with Rails 6 This is simple. We are going to create the app. It’s straightforward. We need a model for the photo, a controller with 3 methods (index, new, and create), and two views. One for creating the photo and another for displaying all photos (index and new), and of course our model. In this model we need a field of the string type, because here is where we are going to save our image name. We also need to update the routes. So, let’s start. We can open a terminal in Linux (we need rails 6, bundler, and yarn). And hit this command to create our app: $ rails new my-cat-photos Inside the new folder that Rails creates for us, we can create the photos controller. $ rails generate controller photos Then, we can create the model. $ rails generate model Photo title:text description:text votes: image:string float We can start with the model ‘app/models/photo.rb’ working only with the validation of the image. In this case we need to have the title, the description, and the image to be present so we can save the record. validates_presence_of , , < ApplicationRecord class Photo :title :description :image end Then move to the controller and the methods ‘app/controllers/photos_controller.rb’, it’s simple: @photos = Photo.all @photo = Photo.new @photo = Photo.new(photo_params) @photo.save flash[ ] = redirect_to root_path render private params. ( ).permit( , , , , ) < ApplicationController class PhotosController def index end def new end def create if :success 'Photo Created successfully' else :new end end def photo_params require :photo :title :description :votes :image :image_cache end end With the controller done, we can update our routes ‘config/routes.rb’. It only has three routes. The index route is the main route of our project. Rails.application.routes.draw root get , post , do # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html 'photos#index' '/upload' to: 'photos#new' '/photos' to: 'photos#create' end Now we can work with the View. First the new view ‘app/views/photos/new.html.erb’ to create the photo. It's important to create the hidden field called _cache at the end. This is so if validation fails, we don't need to search the photo again. That's why this field is included in the “photo_params” function of the controller. We also need to put in the form multipart: true as an option of the HTML because we need to have the file uploaded in our form. form_with( @photo, , { }) model: local: true html: multipart: true do |form| @photo.errors.any? if div h2 pluralize(@photo.errors.count, ) "error" h2 ul @photo.errors.full_messages.each do |message| li message li end ul div end div class "field" form.label :title form.text_field :title div div class "field" form.label :description form.text_field :description div div class "field" form.label :votes form.number_field :votes div div class "field" form.label , :image 'Upload the foto' form.file_field :image div form.hidden_field :image_cache div class "actions" form.submit "Upload Your photo" div end And the index view ‘app/views/photos/index.html.erb’ is simple. It only shows all the fields for every photo. At the end we have our link to the upload route (where there’s the form to upload our image). @photos.each do |photo| ul li photo.title li li photo.description li li photo.votes li li photo.image li ul end link_to , upload_path "Create new" Here is a simple app (don’t forget to run the migrations). We can create a photo and see all of the photos created, but if we tried to see something similar to an image it’s not going to work. We cannot see any photo, photo name, or URL. Instead in the photo.image field, we can see something similar to this We are going to solve this with the IBM Cloud. For this, we need to use three gems: # Is a gem that simplifies for us the upload of files in ruby applications. We can see the readme here: . Carrierwave: https://github.com/carrierwaveuploader/carrierwave This gem will help us upload the file to the cloud. It uses the S3 protocol. IBM used the same protocol, so we are going to be able to upload and retrieve the images. The readme is here . Fog-aws: https://github.com/fog/fog-aws With this gem we can resize images before uploading, and we are going to use this to upload a thumb version of our main image. Here is the repository . MiniMagick: https://github.com/minimagick/minimagick We can put these gems in our gemfile. gem , gem gem # My Gems # Uploader 'carrierwave' '~> 2.0' # Help with Ibm Cloud (aws configuration) 'fog-aws' # image resizing 'mini_magick' We proceed to install these gems with this command: $ bundle install Configuring Carrierwave and Fow-aws This is the best part of this tutorial. For the configuration of carrierwave, fog-aws, and minimagick, to work with IBM Cloud, we need to have this: Region. Bucket Name. Endpoint. access_key_id. secret_access_key. The first step to do is generate the uploader for the image, the name of the uploader is up to you but I’m going to call it photo. $ rails generate uploader photo This command will generate a file called photo_uploader.rb inside the folder ‘app/uploaders’, this is a configuration file. Here we are going to change some things. Comment the storage :file to storage :fog (to use with our fow-aws gem). Uncomment the extension_whitelist function to only allow uploading images. Uncomment the version :thumb. This will use mini_magick to create a thumb version of our file. To use this gem we need to uncomment this line: ‘include CarrierWave::MiniMagick’. So our file ‘app/uploaders/photo_uploader.rb’ needs to look like this: CarrierWave::MiniMagick storage version process [ , ] < CarrierWave::Uploader:: class PhotoUploader Base include :fog def store_dir "uploads/ / / " #{model. .to_s.underscore} class #{mounted_as} #{model.id} end :thumb do resize_to_fit: 50 50 end def extension_whitelist %w(jpg jpeg gif png) end end After we configure our uploader we need to add it to the model. This is simple. We need to mount the uploader to one field on our model. That field needs to be a field of the string type (that's why when we generate our model we made a field called image of the string type) and attach the uploader; in this case, it’s the PhotoUploader. mount_uploader , PhotoUploader validates_presence_of , , < ApplicationRecord class Photo :image :title :description :image end Our next step is to configure fog (that line that we uncomment storage :fog). For that we need to create an initializer for fog. This file needs to be called carrierwave.rb and needs to be inside the folder ‘config/initializers’. So we are going to paste this placeholder code in our file ‘config/initializers/carrierwave.rb’. CarrierWave.configure config.fog_credentials = { , , , , , , } config.fog_directory = config.fog_public = config.fog_attributes = { } do |config| provider: 'AWS' # required aws_access_key_id: 'xxx' # required unless using use_iam_profile aws_secret_access_key: 'yyy' # required unless using use_iam_profile use_iam_profile: true # optional, defaults to false region: 'eu-west-1' # optional, defaults to 'us-east-1' host: 's3.example.com' # optional, defaults to nil endpoint: 'https://s3.example.com:8080' # optional, defaults to nil 'name_of_bucket' # required false # optional, defaults to true cache_control: "public, max-age= " #{ .days.to_i} 365 # optional, defaults to {} end Before configuring this code, we need to store our credentials in a safe place (if we upload the code with the credentials it can be very dangerous because in a public repo everyone can steal the credentials and that is a bad thing). So we are going to use Credentials. Credentials on Rails 6 Using credentials with Rails 6 is so simple. We have a file called credentials.yml.enc inside the folder ‘config’. This file is encrypted with our ‘master.key’ located in the same folder. That's why our master.key file always needs to be ignored for git. One use of the master.key (between many others) is to decrypt our credentials.yml.enc and use the information that is inside (generally used to store credentials of APIs). To access, decrypt, and edit credentials.yml.enc first we need our favorite editor (for example: gedit, emacs, geany, kate, kwrite, vim, mousepad, etc.) and use the name of the editor to edit the information. I’m going to use nano because I love it. We need to run this command in our terminal: $ EDITOR=’nano’ rails credentials:edit Now our favorite editor will display the information of credentials.yml.enc. Here we can simply uncomment these lines: # aws: # access_key_id: 123 # secret_access_key: 345 And add our keys without quotes, so its something like this aws: access_key_id: e5e4f3363d2dbd1aebf13630a26078d5 secret_access_key: b083b1387037b87454298fc1067404b71feec88b5d945d25 We can save our file, and it will be encrypted. Now we can access that data in our Rails app. We just need to call: NameOfTheApp::Application [:keyToFetch] .credentials .nameOfTheCredential If we forget the name of the application we can find it here: ‘config/application.rb’. If I want to access key id for the name of the module (in my case is MyCatPhotos) I need this lines. MyCatPhotos::Application [:access_key_id] MyCatPhotos::Application [:secret_access_key] .credentials .aws .credentials .aws Finish configuration Now it’s time to configure the initiliazer ‘config/initializers/carrierwave.rb’. We need to put the aws_secret_key_id and aws_secret_access_key from our encrypted credentials. use_iam_profile needs to be false (it’s the default). region is the region of our bucket. host will be nil (it’s the default). endpoint will be our endpoints. These are the parts of fog credentials. The last thing is the config.fog_directory. Here we need to put our bucket name and leave everything with its defaults. So our code needs to look like this: CarrierWave.configure config.fog_credentials = { , MyCatPhotos::Application.credentials.aws[ ], MyCatPhotos::Application.credentials.aws[ ], , , , } config.fog_directory = config.fog_public = config.fog_attributes = { } do |config| provider: 'AWS' aws_access_key_id: :access_key_id aws_secret_access_key: :secret_access_key use_iam_profile: false region: 'us-south' host: nil endpoint: 'https://s3.us-south.cloud-object-storage.appdomain.cloud' 'my-cat-photos-cos-standard-cpm' false cache_control: "public, max-age= " #{ .days.to_i} 365 end and we are almost done!. Every time we upload an image it’s going to be saved in our cloud. So to retrieve the image and show it on our page we need to access the property URL, and this will be the source of an image tag. In Rails, we can achieve that with So we modify our index view a little bit, ‘app/views/photos/index.html.erb’, to show the image, if it exists. @photos.each do |photo| ul li photo.title li li photo.description li li photo.votes li image_tag photo.image.url !photo.image.url. ? if nil ul end Now our project can show the images that we upload to the cloud. We can also inspect the url of our images and they are created by default with carrierwave and fow. Looks something like this: https://my-cat-photos-cos-standard-cpm.s3.us-south.cloud-object-storage.appdomain.cloud/uploads/photo/image/1/bebudito.jpg?X-Amz-Expires=600&X-Amz-Date=20200623T205500Z&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=dbd1aebf108e4f33b3630a2e5d5363d2%2F20200623%2Fus-south%2Fs3%2Faws4_request&X-Amz-SignedHeaders=host&X-Amz-Signature=723299b8ee0e077a7c70265673825873002ed71838ea2ed28e8a9dc2066ad49f If we can retrieve the thumb version it’s with photo.image.thumb.url. This is the end of this tutorial. We left out a little bit of design and functionalities (like the voting). If you like I can make another tutorial about design and functionalities. I didn’t do it here because this tutorial is too long, but you can see the full app on my . repo