[Rails] Save images using carrierwave

It will be as the title.

The goal is to display the image.

Introduced gem

First, insert a gem. If you do not specify the version, the latest version will be installed.

Gemfile


gem 'carrirewave'

Thank you for your continued support at the terminal.

$ bundle install

Generate uploader file

Next, let's create an uploader file.

$ rails generate uploader Image
create  app/uploaders/image_uploader.rb

You should now have ʻimage_uploader.rb in ʻapp / uploaders.

By the way, the part of ʻImage` is the model name to mount, A descriptive name. I often generate with Image.

image_uploader.rb


class ImageUploader < CarrierWave::Uploader::Base
 # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
  # include CarrierWave::MiniMagick
  # process resize_to_fit: [300, 200]

  # version :thumb do
  #   process :resize_to_fit => [50, 50]
  # end

  #Omitted below
end

You can make settings related to image upload in this file. For example, you can limit the extension of the image you upload, resize the image, and much more.

Write on the model

Let's mount the file created earlier on the model you want to upload the image.

This time, let's consider the case where you want to register an image in the image column of the hoge model.

hoge.rb


class hoge < ApplicationRecord
  mount_uploader :image, ImageUploader
end

Create a Form to register

I will give you the necessary information on each page.

hoges_controller.rb


class ArticlesController < ApplicationController

  def new
    @article = Article.new
  end

  def create
    @article = Article.new(user_params)
    if @article.save
      redirect_to user_path(@article)
    else
      render :new
    end
  end

  private
  def article_params
    params.require(:article).permit(:image)
  end
end

/hoges/new.html


<%= form_with model: @hoge, local: true do %>
    <div class="field">
		<%= f.label :image %>
		<%= f.file_field :image %> <!--Image is file_field -->
	<div class="action">
		<%= f.submit %>
	</div>
<% end %>

View uploaded images

The display of the image is basically displayed by writing as follows.

<%= image_tag @article.image.url %>
<%= image_tag @article.image.to_s %> 

At the end

Thank you for reading to the end. I hope it will help those who are studying.

Recommended Posts

[Rails] Save images using carrierwave
[Rails] How to upload images using Carrierwave
[Rails] How to upload multiple images using Carrierwave
[Rails] Introduce Carrierwave
[Rails] How to upload images to AWS S3 using Carrierwave and fog-aws
[rails6.0.0] How to save images using Active Storage in wizard format
Upload multiple images easily with rails rails + carrierwave + cloudinary
CarrierWave Upload multiple images
Use images in Rails
Save data from excel file using Rails gem roo
Add, save, delete, add columns, save images from rails DB creation
How to download images from AWS S3 (rails, carrierwave)
[rails] How to post images
Search function using [rails] ransack
[Rails API + Vue] Upload and display images using Active Storage
SNS authentication using Rails google
Japaneseize using i18n with Rails
[Rails] Japanese localization using rails-i18n
[Rails 6] The save timing of active_strage images has been changed.
Save and display multiple images
Get Twitter images using twitter4j
Rails Active_storage -Simplify saving images-
[Rails] Test code using Rspec
Error when using rails capybara
[Rails] Try using Faraday middleware
Detailed tips when using Rails
[Rails 6] Star-shaped review using Raty.js
[Rails] How to upload images to AWS S3 using refile and refile-s3
Image upload using CarrierWave ~ Rspec test ~
[Rails] Save start time and end time
Add & save from rails database creation
Get PV (views) using Impressionist ~ Rails
[Rails] Tag management function (using acts-as-taggable-on)
[Rails 6] Two methods to import multiple images at once using CarrierWave / (1) Input with initial seed data / (2) Import with CSV
[Rails 6] API development using GraphQL (Query)
[Rails] Voice posting function ~ Cloudinary, CarrierWave
Save ArrayList using GSON on Android
[Rails 6] destroy using the resources method
[Rails] "Input"-> "Confirmation screen"-> "Save"-> "View"
[Rails] Status update using Rake task