0
2

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.

【写真複数登録】rails 画像を複数枚同時に登録する 原始的 力技

Posted at

##【ゴール】
データ保存時1回で複数枚の画像を一緒に登録する

##【メリット】
■ アソシエーション理解度UP
■ アプリケーションの機能向上
■ UXの向上

##【開発環境】
■ Mac OS catalina
■ Ruby on Rails (5.2.4.2)
■ Virtual Box:6.1
■ Vagrant: 2.2.7

##【実装】

####アプリケーション作成

mac.terminal
$ rails new photo

####refile 設定

app.gemfile
gem "refile", require: "refile/rails", github: 'manfe/refile'
gem "refile-mini_magick"
mac.terminal
$ bundle install

####モデル作成
※アソシエーション  Book : Image = 1 : 多

mac.terminal
$ rails g scaffold Book name:string text:text
$ rails g model Image image_id:string book:references
$ rails db:migtrate

####モデルを編集
※親のBookモデルの記述が特殊

models/book.rb
has_many :images, dependent: :destroy
accepts_attachment_for :images, attachment: :image, append: :true
models/image.rb
attachment :image
belongs_to book

####コントローラー追記
※DBへ情報が送られるように、paramaterに**「images_iamges: []を追加」**
※記述特殊ですが、複数画像 = 複数の情報なので配列で渡す。

controllers/books_controller.rb
def book_params
      params.require(:book).permit(:name, :text, images_images: [])
end

####ビュー追記

※ **「multiple: true, direct: true, presigned: true」**は必須
※下記コードを保存したい枚数分だけ追記する。。。。原始的ですが

views/books/_form.html.erb
<div class="field">
    <%= form.label :photo %>
    <%= form.attachment_field :photos_images, multiple: true, direct: true, presigned: true %>
 </div>

※表示は情報が複数なので配列で表示してあげます。

views/books/show.html.erb
<div>
  <% @book.images.each do |image| %>
    <%= attachment_image_tag image, :image ,:fill, 200, 200 %>
  <% end %>
</div>

####※refile key要求されたら、追記

config/application.rb
Refile.secret_key = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'

以上、修正箇所ございましたら
ご指摘ください。

##【合わせて読みたい】
■refile設定に関して
https://qiita.com/salvage0707/items/2614c97a1f256027ef71

■データ型 referencesに関して
https://qiita.com/ryouzi/items/2682e7e8a86fd2b1ae47

■画像送信ボタン変更
https://qiita.com/tanaka-yu3/items/f4a0df867ca9f2476314

■formに関して
https://qiita.com/tanaka-yu3/items/50f54f5d4f4b8dfe19f3

0
2
1

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
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?