How to Upload Image to Ruby on Rails

Pada tutorial kali ini, kita akan membuat upload image pada Ruby on Rail menggunakan library Carrierwave. Dengan menggunakan carrierwave, kita akan lebih mudah mengupload image baik itu menggunakan Amazon, Cloudinary, dan lain-lain.

Membuat Project

Buat project dengan nama carrierwave-case

          rail new carrierwave-example        

Lalu buat database nya dengan cara

          rail db:create && rails db:migrate        

Sampai sini kita sudah selesai dalam tahap pembuatan projectnya.

Menambahkan Carrierwave pada Gemfile

Buka Gemfile lalu masukan syntax dibawah

          # Gemfile  jewel 'carrierwave', '~> 2.0'        

Setelah ditambahkan, silahkan instal library dengan menjalankan perintah bundle install

          bundle install        

Jika tidak ada masalah sampai saat ini, berarti kita sudah berhasil menambahkan library nya.

Membuat Model

Buat model dengan nama Post

          track chiliad model Post        

Setelah itu tambahkan column pada file migration Postal service

          # db/migrate/xxxxxxxx_create_posts.rb  course CreatePosts < ActiveRecord::Migration[half-dozen.0]   def change     create_table :posts practice |t|        t.cord :title       t.string :header       t.text :desc        t.timestamps     end   end end        

Jika sudah masukan perintah dibawah ini untuk mengirimkan file migrasi ke database kalian

          rails db:migrate        

Membuat Controller

Buat controller dengan nama Post

          rails g controller Mail        

Setelah itu tambahkan activity index untuk membuat halaman root

          # app/controllers/post_controller.rb  class PostController < ApplicationController      def index          @posts = Post.all     end  finish                  

Buat file alphabetize.html.erb didalam folder app/views/post/ untuk tampilannya

          <!-- app/views/post/index.html.erb -->  <!-- menampilkan pesan observe --> <% if notice %>     <p><%= find %></p> <% finish %>  <h3>List Post</h3>  <%= link_to 'Tambah', post_new_path %>  <ul>     <% @posts.each practice |item| %>         <li>             <%= link_to item.title, post_detail_path(particular.id) %>         </li>     <% end %> </ul>        

Jangan lupa juga tambahkan url di routes.rb pada folder config/

          # config/routes.rb  Rails.awarding.routes.depict practise      root to: 'post#index', as: 'post_index'   get '/detail/:id', to: 'postal service#item', equally: 'post_detail'   get '/tambah', to: 'post#new', as: 'post_new'   postal service '/tambah', to: 'mail service#storeData', as: 'post_storedata'  end                  

Buka halaman localhost:3000 maka tampilan akan seperti ini

Membuat Uploader Carrierwave

Karena kita sebelumnya sudah menambahkan library carrierwave, sekarang kita bisa membuat uploader dengan cara

          rails g uploader Header        

dengan memberi perintah diatas, maka Runway akan membuat sebuah file uploader bernama header_uploader.rb pada folder app/uploaders/

Buka file header_uploader.rb lalu uncomment pada syntax dibawah ini

          # app/uploaders/header_uploader.rb  class HeaderUploader < CarrierWave::Uploader::Base    ..    def extension_whitelist     %w(jpg jpeg gif png)   end    ..  stop                  

Setelah itu buka model Post pada binder app/models/ dan tambahkan uploader pada cavalcade header

          # app/models/post.rb  form Post < ApplicationRecord      validates :title, presence: true     validates :header, presence: truthful     mount_uploader :header, HeaderUploader     validates :desc, presence: true      finish                  

Membuat Class Uploader

Tambahkan activeness new, storeData, dan post_params pada controller Post

          # app/controllers/post_controller.rb  form PostController < ApplicationController      ..      def new          @post = Post.new     end      def storeData          @post = Post.new(post_params)         if @mail service.salvage                         redirect_to post_index_path, notice: "Berhasil menambahkan data!"         else              render :new, alert: "Gagal menambahkan information!"         stop     terminate      private     def post_params         params.require(:post).let(:title, :header, :desc)     end end                  

Lalu buat file new.html.erb di dalam folder app/views/mail service/ untuk tampilan form nya

          <!-- app/views/post/new.html.erb -->  <%= link_to 'Kembali', post_index_path %>  <h3>Tambah Postal service</h3>  <!-- menampilkan validasi mistake --> <% if @post.errors.any? %>     <h5>         <%= pluralize(@post.errors.count, "error") %> Uppss!, tidak bisa tambah data karena :     </h5>     <ul>         <% @post.errors.full_messages.each do |msg| %>             <li><%= msg %></li>         <% cease %>     </ul> <% end %>  <%= form_with model: @post, url: post_storedata_path, local: true exercise |f| %>      <label>Title</characterization><br>     <%= f.text_field :championship, placeholder: 'title' %><br><br>      <label>Header</characterization><br>     <%= f.file_field :header %><br><br>      <label>Description</label><br>     <%= f.text_area :desc, placeholder: 'Clarification' %><br><br>      <%= f.submit 'Kirim Data' %> <% terminate %>                  

Syntax diatas akan menampilkan grade seperti dibawah ini, dan kalian bisa cek validasi nya terlebih dahulu

Apabila grade kosong maka akan tampil pesan mistake seperti ini

Jika kita mengupload file selain dari format foto maka akan menampilkan mistake seperti ini

Kenapa validasi ekstensi bisa muncul? itu karena kita sudah men-uncomment syntax pada file header_uploader.rb tadi

          # app/uploaders/header_uploader.rb  class HeaderUploader < CarrierWave::Uploader::Base of operations    ..    def extension_whitelist     %due west(jpg jpeg gif png)   terminate    ..  stop                  

Setelah paham, kalian bisa mencoba formnya

Sampai sini selesai pada bagian upload epitome, kalian bisa lihat bahwa hasil upload tersimpan pada folder public/uploads/post/header/id/namafoto

Menampilkan Image

Silahkan kalian membuat action particular di controller Post untuk menampilkan detail item postal service nya

          # app/controllers/post_controller.rb  class PostController < ApplicationController      ..      def detail          @find = Post.find(params[:id])     end      private     def post_params         ..     end finish                  

Lalu buat juga file detail.html.erb pada folder app/views/post/ untuk menampilkan particular item nya

          <!-- app/views/post/detail.html.erb -->  <%= link_to 'Kembali', post_index_path %>  <h3><%= @find.title %></h3> <img src="<%= @notice.header %>" width="300"> <p>     <%= @find.desc %> </p>                  

Setelah selesai tampilannya akan seperti ini

Mudah bukan? untuk pemanggilan foto pun cukup mudah, kita hanya perlu memanggil nama column untuk menampilkan gambar. Jika kalian masih kesulitan, silahkan tanya pada kolom komentar dibawah postingan ini. Terimakasih

talkingtonexack1985.blogspot.com

Source: https://rairizky.my.id/upload-image-pada-ruby-on-rails-menggunakan-carrierwave