[JQuery] How to preview the selected image immediately + Add image posting gem

Complete image

ezgif.com-optimize.gif --Select an image. --Preview display before registering the image in the DB. ** If you want to see only the preview function, please read only the setting of JQuery below **


ruby 2.5.7 rails It is possible to set jQuery.

Image posting gem

This time, we will use "Refile". Refile is a file upload library for applications. ** Refile has the following features. ** **

-Images can be easily incorporated. -Thumbnails can be generated. -You can set the file upload destination.

In addition, this time, we have also added a gem (MiniMagick) that performs image processing such as size adjustment.


#Image posting gem
gem "refile", require: "refile/rails", github: 'manfe/refile'
#Image processing (size adjustment, etc.) gem
gem "refile-mini_magick"

When you add a gem, run the bundle install command.

Let's add a column for the image!

Add a column to save the image. The column name is set with an id such as "image_id". (Data type is string) Let's reflect it in the database with the following command


$ rails db:migrate

Add attachment method

To use Refile, you need to add an attachment method to your model. The attachment method is required for the refile to access the specified column. This makes it possible to acquire and upload images that exist in the DB. The column name is image_id, but I don't add _id here.

Let's write in the model

attachment :image

Add to Strong Parameters

Please add an image. Under> private def arbitrary name params.require (: model name) .permit (: column name)

end This time, ** image ** will be entered in the column name.

View file settings


 <%= form_for(model,url:Contains url or path) do |f| %>

      <div class="item-image">
        <%= attachment_image_tag from_Contains the model used in for, :image, class: "img-square", fallback: "no_image.jpg ", size:"300x300" %>

      <%= f.attachment_field :image, placeholder: "image" %>
  <%= f.submit "Registration"%>

Set up JQuery

・ This time, I would like to write

Recommended Posts

[JQuery] How to preview the selected image immediately + Add image posting gem
How to add the delete function
How to implement image posting using rails
How to add sound in the app (swift)
How to move to the details screen by clicking the image
How to judge the click of any area of the image
[Rails] How to display an image in the view
How to add elements without specifying the length of the array
How to add the same Indexes in a nested array
How to deal with the error ERROR: While executing gem ... (Gem :: FilePermissionError)
How to disable existing selected items in the select box
How to add ActionText function
4 Add println to the interpreter
How to add HDD to Ubuntu
[Rails carrier wave] How to not transition to the error screen even if the image upload is not selected
How to use the link_to method
Add Extended Attributes to the file
How to use the include? method
How to add columns to a table
How to use the form_with method
How to find the average angle
[Rails] How to add new pages
Add image selector to Selenium Grid
How to introduce jQuery in Rails 6
Yes, let's preview the image. ~ part5 ~
How to distinguish ubuntu cloud image
[Swift] How to pass the Label value in the selected collectionViewCell to the destination TextField
[Rails] How to create a table, add a column, and change the column type
[Swift] How to set an image in the background without using UIImageView.
[IOS14] How to get Data type image data directly from PHPickerViewController?