[Java] [JQuery] How to display a preview image of the selected file + Add image posting gem

2 minute read

Complete image

ezgif.com-optimize.gif

  • Select an image.
  • Preview display before registering images in DB. If you only want to see the preview function, please read the JQuery settings below

environment

ruby 2.5.7 rails 5.2.4.3 You can set jQuery.

Image posting gem

This time, “Refile: Refile” is used. Refile is a file upload library for applications. **Refile has the following features. **

-Images can be easily incorporated. -Can generate thumbnails. -You can set the upload destination of the file.

This time, we also added a gem (MiniMagick) that performs image processing such as size adjustment.

``

Gemfile
...
 
# Gem for image posting
gem "refile", require: "refile/rails", github:'manfe/refile'
# For image processing (size adjustment etc.) gem
gem "refile-mini_magick"

When you add the gem, execute the bundle install command.

Let’s add a column for images!

Add a column to store the image. Column name is set with id like “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 refile to access the specified column. This allows you to obtain and upload images that exist in the DB. The column name is image_id, but _id is not added here.

``

 let's describe it in the model
attachment :image

Add to Strong Parameters

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

end This time, the column name will contain image

View file settings

ruby:new.html.rb


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

      <div class="item-image">
        <%= The model used in attachment_image_tag from_for is entered, :image, class: "img-square", fallback: "no_image.jpg", size:"300x300" %>
      </div>

      <%= f.attachment_field :image, placeholder: "image" %>
    </div>
<%= f.submit "register"%>

Set JQuery

・This time, I would like to write under new.html. (You can write it in the html you want to review)

  • You can also write it in app/assets/javascripts/application.js. In that case, please delete the script tag. Please change $(‘#item_image’)$(“.image”) to the corresponding id or class name -$(‘#item_image’) is the id for selecting a file, and $(“.image”) is the class name or id name of the part where the image is displayed

``

new.html.erb
<%= form_for (model, url: url or path is entered) do |f| %>

      <div class="item-image">
        <%= The model used in attachment_image_tag from_for is entered, :image, class: "img-square", fallback: "no_image.jpg", size:"300x300" %>
      </div>

      <%= f.attachment_field :image, placeholder: "image" %>
    </div>
<%= f.submit "register"%>

- -------- Added below here ----------------------- -

<script>
$(function(){
    // Get information from the input id
    $('#item_image').on('change', function (e) {
// Get the url of an existing image from here
    var reader = new FileReader();
    reader.onload = function (e) {
        $(".image").attr('src', e.target.result);
    }
// So far
    reader.readAsDataURL(e.target.files[0]); //Insert the url of the upload image into the acquired url
});
});

</script>


Specify id in input tag of file selection, click file selection to operate $(‘#item_image’).on(‘change’, function (e) {

** Replace the scr in the img tag with the class specification of the img tag of the currently displayed preview image with the image to be uploaded. ** var reader = new FileReader(); reader.onload = function (e) { $(“.image”).attr(‘src’, e.target.result); } reader.readAsDataURL(e.target.files[0]);

the term

FileReader: An object can be used to asynchronously read a file (or raw data in a buffer) on the user’s computer from a web application.

attr: Pass a hash object consisting of a combination of key and value as an argument and set multiple attributes for all elements at the same time.