[JAVA] Cliquez sur l'image dans le champ file_field de Rails pour télécharger et remplacer l'aperçu

Première étape

Si vous utilisez bootstrap_form, les étapes suivantes sont requises. Si vous utilisez bootstrap_form, cette gemme créera une belle interface utilisateur, mais dans cette implémentation, elle vous gêne.

<%= f.file_field :image %>

Assurez-vous donc que le style bootstrap n'est pas appliqué.

<%= f.file_field_without_bootstrap :image %>

Cliquez sur l'image pour télécharger

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

Insérez simplement l'image et file_field dans label et masquez file_field dans CSS. Si vous remplacez la partie image par une icône, vous pouvez télécharger en cliquant sur l'icône.

Remplacez l'image affichée par l'image téléchargée

Ajout d'un nom de classe approprié à l'image et à l'uploader afin que l'élément puisse être obtenu à partir de JS.

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

Encode l'image sélectionnée dans JavaScript en base64 et la remplace par l'image d'origine.

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);
      }
    });
});

• L'ajustement fin de l'apparence est omis.
• Étant donné que l'image vient d'être remplacée à la réception, l'image ne sera pas envoyée au serveur à moins que le formulaire ne soit soumis.