11. 画像¶
各学生の顔写真を表示できるようにしよう。
モデルの各データに対して、ファイルをアップロードして添付することができる。
11.1. Active Storage の準備¶
Active Storage が使用するデータベースを作成する。
# rails active_storage:install
# rails db:migrate
アップロードしたファイルは、サーバのディスクに保存することもできるし、Amazon S3 などのクラウドサービスに保存することもできる。ここでは、デフォルトの config/storage.yml
に local
という名前で書いてある設定を使う。
local:
service: Disk
root: <%= Rails.root.join("storage") %>
アプリケーションディレクトリの中の
storage
というディレクトリに保存する。
config/environments/development.rb
の中に config/storage.yml
で書いた設定のどれを使うかを書く。デフォルトで既に local
と書いてあるので、何もしなくてよい。
config.active_storage.service = :local
11.2. アプリケーションを変更する¶
11.2.1. モデル¶
各学生について写真は1枚だけとし、添付ファイルの名前を photo
にする。
app/models/student.rb
の中の Student
クラスに次の行を書き加える。
has_one_attached :photo
11.2.2. 入力フォーム¶
学生のデータを入力するフォーム( app/views/students/_form.html.erb
)に、写真をアップロードするためのフィールドを加える。
<div class="field">
<%= form.label :photo %>
<%= form.file_field :photo %>
</div>
11.2.3. コントローラ¶
フォームのパラメータで photo
を受け取れるように student_params
を修正。
def student_params
params.require(:student).permit(:name, :faculty_id, :grade, :photo)
end
11.2.4. 画像の表示¶
学生の詳細ページ( app/views/students/_student.html.erb
)で写真を表示する。
<p>
<% if student.photo.attached? %>
<%= image_tag url_for(student.photo), height: 100 %>
<% else %>
No Image
<% end %>
</p>
添付ファイルが存在しないと
url_for
がエラーになるので、attached?
メソッドでチェックしている。