1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ActiveStorageで画像をアップロードする方法

Last updated at Posted at 2020-04-04

#Active Storage
#####Active Storageとは
Active Storageとはファイルをアップロードしてモデルに添付してくれるやつ。Active Storageをインストールして使用することで本番環境でクラウドストレージサービス(S3、GCSとか)にファイル(画像とか)をアップロードして、データベース上でActiveRecordモデル(アプリで使うモデル)のインスタンスに紐付けできるということ。

#####手順
Active Storageをgemを使ってインストール

するとmigrationファイルができる。これは2つのテーブル(モデル)を作るためにできた(active_storage_blobsとactive_storage_attachmentsという名前)。

一つ目のactive_storage_blobsは画像ファイルを管理するためのモデル。
二つ目のactive_storage_attachmentsはActiveRecordモデル(アプリで使うモデル)とactive_storage_blobsの関係性を表すためのモデル。つまりこの二つのモデルの間に存在し、二つのモデルに従属(belong_to)しているテーブル。

上記で説明をしてきたがActiveStorageで画像を紐づける際にこの二つのモデルを意識することは少ない?

95A30DAB-EF6C-4E57-96C6-2F8EE3981D4D_1_105_c.jpeg


db:migrateする

ActiveRecordモデル(appで使用するモデル)ファイルに写真を持つことを記述する

models/task.rb
has_one_attached :image
#一つのtaskに一つのimageがつく。
#imageという名前は入力時のform fieldでのタグ名。
tasks/new.html.slim
= form_with model: task, local: true do |f|
.
.
.
 .form-group
    = f.label :image
    = f.file_field :image, class: 'form-control'
#imageというタグ名で値を送信している 

他にもモデルファイルで以下のように記述するとモデルは複数の画像を持つことができる。

models/message.rb
class Message < ApplicationRecord
  has_many_attached :images
end 

参考文献はRailsガイド【Rails 5.2】 Active Storageの使い方
#####設定
・画像ファイルを管理する場所を指定したい
そんな時はconfig/environmentsで各環境での管理場所を指定する。

development.rb
config.active_storage.service = :local
#開発環境ではファイルを保存する場所をlocalという設定にしている。

localがどういう設定になっているかを知りたい場合は

config/storage.yml
local:
  service: Disk
  root: <%= Rails.root.join("storage") %>
#localという設定はファイルの保存はアプリのstorogeディレクトリで行われる
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?