Rails 5 Imgur Clone Handle image upload and painlessly with Carrierwave and Cloudinary and deploy on and share your photos fast with the world. management Heroku Hi everyone, today I’m going to show you how to do image share and upload in your Rails 5 application very easily. This is what I have learned by browsing several outdated tutorials, blog posts and a bunch of documentation. Most of the articles out there are older Rails version 4 so, I hacked together the steps for integrating into Rails 5 which I’m currently using on some of the projects and continue to use more. Plus in the process, we are going to build an imgur clone today by adding all the CRUD (Create, Read, Update, Delete) functionalities. It is going to be a 2 part series explaining every bits and pieces. This tutorial is going to very beginner friendly and also suitable to intermediate to advanced users. Now, let’s start some coding, shall we? First, let’s create a new rails project in your terminal by doing: rails new rimgur It’s always good practice to start using Git right away so, we are going to follow the same practice here: git init git add . git commit -m ‘project init’ Let’s test our app in the browser by using this command to boot up our server. rails server And then go to localhost:3000 in your browser. You will see this. Rails default home Great, your app is running successfully. Open the project in your favorite IDE or text editor. Now we are going to create a controller. rails generate Open file and an action pics_controller.rb index class PicsController < ApplicationControllerdef endend index Create a view file for our index action in app/views/pics/index.html.erb Open and write some dummy text like index.html.erb “Hello” Now, we are going to create a route to display the page. Go to and write this. config/routes.rb . . . Rails application routes draw doroot 'pics#index'end Okay, this line simply means you are setting path to controller and action. root pic index And you should or whatever you wrote. “Hello” Now, we are going to create our model like this. rails generate model Pic Awesome, now we have some routes and model setup and now we can start integrating our image handling system. First, open your and then put these right anywhere in middle. Gemfile gem 'carrierwave'gem 'cloudinary' Second, run in your terminal to install the gems and then restart your server. bundle Third, we will generate our image uploader like this. rails generate uploader Image Go to and add this inside our class. app/uploaders/image_uploader.rb include Cloudinary::CarrierWave And comment out everything else in the file. IMPORTANT! Now, create a new file in the directory name and then add this. config/initializers cloudinary.rb . . [ ] . [ ] . [ ]**end Cloudinary config do | | config config cloud_name = ENV 'CLOUDINARY_CLOUD_NAME' config api_key = ENV 'CLOUDINARY_API_KEY' config api_secret = ENV 'CLOUDINARY_API_SECRET' ** Okay, let me explain this. We are adding all the configuration variables dynamically and securely. I’ll explain later more in details. Open and then put this. app/models/pic.rb , class Pic < ApplicationRecordmount_uploader :image ImageUploaderend And then run to add our schema. Your should have something like this: rails db:migrate db/schema.rb , : . , : . , : create_table "pics" force :cascade do | | t t datetime "created_at" null false t datetime "updated_at" null falseend Now we’’ll generate a migration to add our to image uploader pic model. rails generate Open your and add this. <timestamp>_add_image_to_pic.rb :: [ ] , , class AddImageToPic < ActiveRecord Migration 5.0 def add_column :pics change :image :stringendend And then run to add it to our schema. rails db:migrate Great, our database part is done and now we going to add CRUD functionalities to our app. Open your file like this routes.rb resources :pics Let’s check our routes by doing in your terminal. And you should all the actions routes. rails routes Create all the action methods like this in your pics_controller.rb **class PicsController < ApplicationControllerdef end index def newend def end create def end edit def end show def end update def endend** destroy Thanks, everyone for reading it so far, hope you enjoyed it. In the next part, we will finish our application and also take it live. See you, in the next one.
