[Rails] Implementation of image preview function

Target

ezgif.com-video-to-gif.gif

Development environment

・ Ruby: 2.5.7 Rails: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ OS: macOS Catalina

Premise

The following has been implemented.

Slim introductionIntroduction of Bootstrap3Introduction of Font Awesome -Login function implementationImplementation of posting function

Implementation

1. Edit the view

slim:users/edit.html.slim


/Postscript
= f.file_field :profile_image, class: 'img_field', style: 'display:none;'
= attachment_image_tag @user, :profile_image, fallback: 'no-image.png', onClick: "$('.img_field').click()", class: 'center-block img-thumbnail img-responsive img_prev'
br

[Explanation]

(1) Hide file_field from display: none and assign a class.

= f.file_field :profile_image, class: 'img_field', style: 'display:none;'

(2) When the HTML (file_field) of the class assigned in (1) is clicked, JavaScript processing is executed.

onClick: "$('.img_field').click()"

2. Edit ʻapplication.scss`

appliacation.scss


//Postscript
.img_prev:hover {
  cursor: pointer; 
  opacity: 0.7;
  transform: scale(1.01, 1.01);
}

[Explanation]

① Reflect CSS when the mouse is on the image.

.img_prev:hover {}

② Change the mouse cursor to a pointer.

cursor: pointer; 

③ Lower the opacity and make the image a little whiter.

opacity: 0.7;

④ Enlarge the image a little.

transform: scale(1.01, 1.01);

3. Create / edit JavaScript file

Terminal


$ touch app/assets/javascripts/image_preview.js

image_preview.js


$(function () {
  function readURL(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        $('.img_prev').attr('src', e.target.result);
      }
      reader.readAsDataURL(input.files[0]);
    }
  }

  $('.img_field').change(function () {
    readURL(this);
  });
});

[Explanation]

(1) 1. The process of editing the view with (2).

$('.img_field').change(function () {
  readURL(this);
});

Recommended Posts

[Rails] Implementation of image preview function
Implementation of image preview function
Image preview function implementation
[Rails] Implementation of category function
[Rails] Implementation of tutorial function
[Rails] Implementation of like function
[Rails] Implementation of image enlargement function using lightbox2
[Rails] Implementation of CSV import function
[Rails] About implementation of like function
[Rails] Implementation of user withdrawal function
[Rails] Implementation of CSV export function
Rails [For beginners] Implementation of comment function
[Ruby on rails] Implementation of like function
Implementation of search function
Implementation of pagination function
[Rails] Implementation of search function using gem's ransack
Implementation of Ruby on Rails login function (Session)
[Rails] Implementation of image slide show using Bootstrap 3
Rails implementation of ajax removal
Rails fuzzy search function implementation
Implementation of sequential search function
Implementation of like function (Ajax)
Implementation of category pull-down function
[Rails] Implement image posting function
[Rails] Implementation of drag and drop function (with effect)
Implementation of Ruby on Rails login function (devise edition)
[Rails] Implementation of multi-layer category function using ancestry "Preparation"
[Rails] Implementation of multi-layer category function using ancestry "seed"
[Ruby on Rails] Post image preview function in refile
[Rails] Implementation of user logic deletion
[Rails] Implementation of multi-layer category function using ancestry "Editing form"
[Rails] Implementation of multi-layer category function using ancestry "Creation form"
Rails sorting function implementation (displayed in order of number of like)
[Rails] Implementation of many-to-many category functions
[Rails] gem ancestry category function implementation
[Ruby on Rails] Comment function implementation
[Rails] Comment function implementation procedure memo
Implementation of like function in Java
[Rails] Implementation of new registration function in wizard format using devise
I tried to implement the image preview function with Rails / jQuery
[Rails] Implementation of coupon function (with automatic deletion function using batch processing)
Replace preview by uploading by clicking the image in file_field of Rails
[Rails] Implementation of tag function using acts-as-taggable-on and tag input completion function using tag-it
[Rails] Addition of Ruby On Rails comment function
Implementation of user authentication function using devise (2)
Rails Addition of easy and easy login function
[Ruby on Rails] Follow function implementation: Bidirectional
Implementation of user authentication function using devise (1)
Rails Basic CRUD function implementation procedure scaffold
Implementation of user authentication function using devise (3)
[Rails] Implementation of validation that maintains uniqueness
DM function implementation
[Rails] I will explain the implementation procedure of the follow function using form_with.
[Rails] Category function
Rails follow function
[Rails] Notification function
[JQuery] Implementation procedure of AutoComplete function [Java / Spring]
[Rails] Implementation of "notify notification in some way"
Ruby on Rails Email automatic sending function implementation
Implementation of search function Learning memo (portfolio creation)
[Rails] Implementation of PV number ranking using impressionist