[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 **

environment

ruby 2.5.7 rails 5.2.4.3 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.

Gemfile


...
 
#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

python


$ 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

ruby:new.html.rb


 <%= 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" %>
      </div>

      <%= f.attachment_field :image, placeholder: "image" %>
    </div>
  <%= 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
I tried to implement the image preview function with Rails / jQuery
How to implement image posting using rails
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 add ActionText function
4 Add println to the interpreter
How to add Hyperledger Iroha Peer
How to use the link_to method
Add Extended Attributes to the file
[Rails] How to use gem "devise"
How to use the include? method
How to use the form_with method
How to find the average angle
How to use the wrapper class
[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 apply thymeleaf changes to the browser immediately with #Spring Boot + maven
[Rails] How to create a table, add a column, and change the column type