【画像アップロード】file_fieldデザイン変更+画像選択時にプレビュー表示する方法

投稿日:

プログラミング初心者の勉強ブログ #88

Railsアプリの画像アップロードで使うfile_fieldのデザイン変更と、画像選択時にプレビュー表示する方法をまとめます。デフォルトデザインを変更し、ユーザーが画像選択後すぐに画像を確認できるため、UX/UI向上が図れます。(アップローダーはcarrierwaveとmini_magickを使用して実装しております。)

 

目次

 

実装内容

filefield

上の画像のようなfile_fieldを作成する。(デフォルトデザインの変更+画像選択直後にプレビュー表示)

 

大まかな流れ

画像アップロードで使う「file_field」についても以前まとめたラジオボックス同様、デフォルトデザインを「display: none;」で隠して、紐付けした別要素(今回の場合divタグ)でオリジナルデザインを作っていきます。

※ラジオボックスについては、【CSS】仕組みから知る!ラジオボタンを自分好みのデザインにする方法で紹介しております。

 

  1. <input type="file">を「display: none;」で隠す
  2. <input type="file">とdivタグをJavaScriptで紐づける
  3. divタグでデザイン作成
  4. JavaScriptで選択された画像を取得し、即表示させる

この流れで作成していきます。

※画像アップロード機能は「carrierwave」と「mini_magick」で実装しております。

 

デフォルトデザインを隠してdivと紐付け

form.html.erb

 

<input type="file">タグが構成される以下のコードで

このようにidとstyleをつけ、

inputにつけたidでdivと紐付けます。クリック時に対応したいので「onClick」でjQueryを書き込みます。

 

divに対しCSSでデザイン作成

最初に載せた画像のデザインのCSSです。

style.css

 

画像プレビューの表示

application.js

jsで選択された画像の取得を行います。onとchangeメソッドで「$fileField」で選択されたデータが「e」に入ります。

 

ここまでいくと、

filefield

プレビューが表示できるようになります。

 

まとめ

画像アップロードのデフォルトデザインの変更は後回しにしてた部分だったのですが、無事実装できました。jsに少しづつ慣れてきたのかもしれません。よくわかってない部分もありますが。

以上ありがとうございました。

-プログラミング学習
-, , ,

Copyright© s u p ? , 2019 All Rights Reserved.