Replace preview by uploading by clicking the image in file_field of Rails

First stage

If you are using bootstrap_form, the following steps are required. If you are using bootstrap_form, this gem will create a nice UI, but in this implementation it gets in the way.

<%= f.file_field :image %>

スクリーンショット 2020-11-06 10.34.09.png

So make sure that the bootstrap style isn't applied.

<%= f.file_field_without_bootstrap :image %>

スクリーンショット 2020-11-06 10.34.59.png

Click image to upload

<%= f.label :image do %>
  <%= image_tag('user.png') %>
  <%= f.file_field_without_bootstrap :image, style: 'display:none' %>
<% end %>

Simply enclose the image and file_field in label and hide file_field with CSS. If you replace the image part with an icon, you can upload by clicking the icon.

Replace the displayed image with the uploaded image

Add an appropriate class name to the image and uploader so that you can get the element from JS.

<%= f.label :image do %>
  <%= image_tag('user.png', class: 'avatar') %>
  <%= f.file_field_without_bootstrap :image, class: 'uploader', style: 'display:none' %>
<% end %>

Encodes the image selected in JavaScript to base64 and replaces it with the original image.

window.addEventListener('load', () => {
    const uploader = document.querySelector('.uploader');
    uploader.addEventListener('change', (e) => {
      const file = uploader.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        const image = reader.result;
        document.querySelector('.avatar').setAttribute('src', image);
      }
    });
});

Recommended Posts

Replace preview by uploading by clicking the image in file_field of Rails
[Rails] Implementation of image preview function
The identity of params [: id] in rails
Rails6: Extract the image in Action Text
Get the value of enum saved in DB by Rails with attribute_before_type_cast
Change the save destination of the image to S3 in the Rails app. Part 2
[Order method] Set the order of data in Rails
How to move to the details screen by clicking the image
Image processing: The basic structure of the image read by the program
[Ruby on Rails] Post image preview function in refile
SSL in the local environment of Docker / Rails / puma
[Rails] How to display an image in the view
[Ruby on Rails] I want to get the URL of the image saved in Active Storage
[Enum] Let's improve the readability of data by using rails enum
[Rails] Register by attribute of the same model using Devise
Install by specifying the version of Django in the Docker environment
[Rails] Where to be careful in the description of validation
JavaFX-Load Image in the background
[Rails] How to convert the URI of the image sent by http to https when using Twitter API
Let's roughly implement the image preview function with Rails + refile + jQuery.
[Rails] Suppress unnecessary SQL by utilizing the cache control of the association
I tried to implement the image preview function with Rails / jQuery
What to do if the image posted by refile disappears after setting a 404 error page in Rails
[Rails + Webpacker] I want to use images of assets! Until you can view the image in Vue.js
[Rails] Introduction of Rubocop by beginners
[Rails] Check the contents of the object
Replace the contents of the Jar file
Explanation of the order of rails routes
Check the migration status of rails
Yes, let's preview the image. ~ part5 ~
Order of processing in the program
[Rails] Difference in behavior between delegate and has_many-through in the case of one-to-one-to-many
The problem that the contents of params are completely displayed in the [Rails] view
[Rails] About the error that the image is not displayed in the production environment
[Rails] Regarding the presence or absence of parentheses in the argument of the render method
[Rails] The cause of not being able to post was in form_with
[Error] Error during Docker build (solved by pulling the latest version of image)
How to make the schema of the URL generated by Rails URL helper https