Carrierwaveを使用したRails4の複数の画像またはファイルのアップロード

86

Rails 4とCarrierWaveを使用して、ファイル選択ウィンドウから複数の画像をアップロードするにはどうすればよいですか？私が持っているpost_controllerとpost_attachmentsモデル。これどうやってするの？

誰かが例を提供できますか？これに対する簡単なアプローチはありますか？

ruby-on-rails-4  carrierwave 
— SSR
ソース

回答:

195

これは、rails4でcarrierwaveを使用して複数の画像を最初からアップロードするソリューションです。

または、動作するデモを見つけることができます： 複数のアタッチメントレール4

これを行うには、次の手順に従います。

rails new multiple_image_upload_carrierwave

gemファイル内

gem 'carrierwave'
bundle install
rails generate uploader Avatar

ポストスキャフォールドを作成する

rails generate scaffold post title:string

post_attachmentスキャフォールドを作成します

rails generate scaffold post_attachment post_id:integer avatar:string

rake db:migrate

post.rbで

class Post < ActiveRecord::Base
   has_many :post_attachments
   accepts_nested_attributes_for :post_attachments
end

post_attachment.rb内

class PostAttachment < ActiveRecord::Base
   mount_uploader :avatar, AvatarUploader
   belongs_to :post
end

post_controller.rb内

def show
   @post_attachments = @post.post_attachments.all
end

def new
   @post = Post.new
   @post_attachment = @post.post_attachments.build
end

def create
   @post = Post.new(post_params)

   respond_to do |format|
     if @post.save
       params[:post_attachments]['avatar'].each do |a|
          @post_attachment = @post.post_attachments.create!(:avatar => a)
       end
       format.html { redirect_to @post, notice: 'Post was successfully created.' }
     else
       format.html { render action: 'new' }
     end
   end
 end

 private
   def post_params
      params.require(:post).permit(:title, post_attachments_attributes: [:id, :post_id, :avatar])
   end

views / posts /_form.html.erb内

<%= form_for(@post, :html => { :multipart => true }) do |f| %>
   <div class="field">
     <%= f.label :title %><br>
     <%= f.text_field :title %>
   </div>

   <%= f.fields_for :post_attachments do |p| %>
     <div class="field">
       <%= p.label :avatar %><br>
       <%= p.file_field :avatar, :multiple => true, name: "post_attachments[avatar][]" %>
     </div>
   <% end %>

   <div class="actions">
     <%= f.submit %>
   </div>
<% end %>

投稿の添付ファイルと添付ファイルのリストを編集します。 views / posts /show.html.erb内

<p id="notice"><%= notice %></p>

<p>
  <strong>Title:</strong>
  <%= @post.title %>
</p>

<% @post_attachments.each do |p| %>
  <%= image_tag p.avatar_url %>
  <%= link_to "Edit Attachment", edit_post_attachment_path(p) %>
<% end %>

<%= link_to 'Edit', edit_post_path(@post) %> |
<%= link_to 'Back', posts_path %>

フォームを更新して、添付ファイルviews / post_attachments /_form.html.erbを編集します

<%= image_tag @post_attachment.avatar %>
<%= form_for(@post_attachment) do |f| %>
  <div class="field">
    <%= f.label :avatar %><br>
    <%= f.file_field :avatar %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

post_attachment_controller.rbの更新メソッドを変更します

def update
  respond_to do |format|
    if @post_attachment.update(post_attachment_params)
      format.html { redirect_to @post_attachment.post, notice: 'Post attachment was successfully updated.' }
    end 
  end
end

レール3では、強力なパラメーターを定義する必要はありません。また、レール4ではアクセス可能な属性が非推奨であるため、モデルとaccept_nested_attributeの両方でattribute_accessibleを定義してモデルを投稿できます。

添付ファイルを編集するために、一度にすべての添付ファイルを変更することはできません。そのため、添付ファイルを1つずつ置き換えるか、ルールに従って変更できます。ここでは、添付ファイルを更新する方法を示します。

— SSR
ソース
2
ポストコントローラーのショーアクションで、@ post = Post.find（params [：id]）を忘れたと思います
— wael 2014
1
@SSRなぜあなたは実際に各投稿の添付ファイルをループするのcreateですか？Railsとcarrierwaveは、コレクションを自動的に保存するのに十分スマートです。
— タカ
3
編集（特に処理:_destroy部分）を見たい
— 2014
5
@ SSR-あなたの答えはとても役に立ちます。編集アクションでも回答を更新していただけませんか。
— raj_on_rails 2015年
2
post_attachmentモデルに検証を追加しても、postモデルの保存が妨げられることはありません。代わりに、投稿が保存され、添付ファイルモデルに対してのみActiveRecord無効エラーがスローされます。これはクリエイトのせいだと思います！方法。しかし、代わりにcreateを使用すると、サイレントに失敗します。添付ファイルへの投稿リーチで検証を行う方法はありますか？
— dchess 2016
32

CarrierWaveのドキュメントを見ると、これは実際には非常に簡単です。

https://github.com/carrierwaveuploader/carrierwave/blob/master/README.md#multiple-file-uploads

例として、写真を追加したいモデルとしてProductを使用します。

  1. マスターブランチCarrierwaveを入手して、Gemfileに追加します。

    gem 'carrierwave', github:'carrierwaveuploader/carrierwave'

  2. 目的のモデルに列を作成して、画像の配列をホストします。

    rails generate migration AddPicturesToProducts pictures:json

  3. 移行を実行する

    bundle exec rake db:migrate

  4. モデル製品に写真を追加する

    app/models/product.rb

class Product < ActiveRecord::Base
  validates :name, presence: true
  mount_uploaders :pictures, PictureUploader
end

  5. ProductsControllerの強力なパラメータに画像を追加する

    app/controllers/products_controller.rb

def product_params
  params.require(:product).permit(:name, pictures: [])
end

  6. フォームが複数の写真を受け入れることを許可する

    app/views/products/new.html.erb

# notice 'html: { multipart: true }'
<%= form_for @product, html: { multipart: true } do |f| %>
  <%= f.label :name %>
  <%= f.text_field :name %>

  # notice 'multiple: true'
  <%= f.label :pictures %>
  <%= f.file_field :pictures, multiple: true, accept: "image/jpeg, image/jpg, image/gif, image/png" %>

  <%= f.submit "Submit" %>
<% end %>

  7. ビューでは、pictures配列を解析する画像を参照できます。

    @product.pictures[1].url

フォルダから複数の画像を選択した場合、順序は上から下に画像を取得する正確な順序になります。

— drjorgepolanco
ソース
9
この問題に対するCarrierWaveの解決策は、私をうんざりさせます。これには、ファイルへのすべての参照を配列の1つのフィールドに配置することが含まれます。それは確かに「レールウェイ」とは見なされません。その後、いくつかを削除したり、投稿にファイルを追加したりする場合はどうなりますか？私はそれが不可能だと言っているのではなく、ただ醜いと言っているだけです。結合テーブルの方がはるかに優れています。
— トビー1ケノービ
3
私はこれ以上トビーに同意できませんでした。その解決策を提供していただけませんか？
— drjorgepolanco 2016年
2
そのソリューションはすでにSSRによって提供されています。アップロードされたファイルを保持するために別のモデルが配置され、多くのファイルをアップロードする必要があるものは、他のモデルと1対多または多対多の関係にあります。（以前のコメントで言及した結合テーブルは、多対多の関係の場合になります）
— Toby 1 Kenobi
@ Toby1Kenobiのおかげで、列配列メソッドが画像バージョンをどのように説明するのか疑問に思いました（どうすればよいかわかりません）。あなたの戦略は実行可能です。
— カオス理論2016
Rails 5.xx、github.com / carrierwaveuploader / carrierwave / blob / master /を使用してCarrierwaveのこの機能を実装しました… しかし、正常に実行できず、エラーが発生します。SSRUndefinedConversionError ("\x89" from ASCII-8BIT to UTF-8) ソリューションの場合、 Rails 4.xxですが、ActionDispatch::Http::UploadedFileファイル名ではなくデータベースに保存するという課題に直面しています（Rails 5.xxを使用）。また、アップローダーの特定のパスのパブリックフォルダーにファイルを保存しません。
— Mansi Shah 2017
8

SSRの回答へのいくつかのマイナーな追加：

accepts_nested_attributes_forでは、親オブジェクトのコントローラーを変更する必要はありません。だから修正する場合

name: "post_attachments[avatar][]"

に

name: "post[post_attachments_attributes][][avatar]"

次に、これらのようなコントローラーの変更はすべて冗長になります。

params[:post_attachments]['avatar'].each do |a|
  @post_attachment = @post.post_attachments.create!(:avatar => a)
end

またPostAttachment.new、親オブジェクトフォームに次のものを追加する必要があります。

views / posts /_form.html.erb内

  <%= f.fields_for :post_attachments, PostAttachment.new do |ff| %>
    <div class="field">
      <%= ff.label :avatar %><br>
      <%= ff.file_field :avatar, :multiple => true, name: "post[post_attachments_attributes][][avatar]" %>
    </div>
  <% end %>

これにより、親のコントローラーでこの変更が冗長になります。

@post_attachment = @post.post_attachments.build

詳細については、Rails fields_forフォームが表示されない、ネストされたフォームを参照してください。

あなたがRailsの5を使用する場合は、変更Rails.application.config.active_record.belongs_to_required_by_defaultから値をtrueにfalse起因するバグの内側に（で設定/初期化子/ new_framework_defaults.rb）accepts_nested_attributes_for（そうでない場合はaccepts_nested_attributes_for Railsの5歳になるではない、一般的な作業）。

編集1：

破壊について追加するには：

models /post.rb内

class Post < ApplicationRecord
    ...
    accepts_nested_attributes_for :post_attachments, allow_destroy: true
end

views / posts /_form.html.erb内

 <% f.object.post_attachments.each do |post_attachment| %>
    <% if post_attachment.id %>

      <%

      post_attachments_delete_params =
      {
      post:
        {              
          post_attachments_attributes: { id: post_attachment.id, _destroy: true }
        }
      }

      %>

      <%= link_to "Delete", post_path(f.object.id, post_attachments_delete_params), method: :patch, data: { confirm: 'Are you sure?' } %>

      <br><br>
    <% end %>
  <% end %>

このようにして、子オブジェクトのコントローラーをまったく必要としません。I平均ノーいかなるPostAttachmentsControllerもはや必要とされています。親オブジェクトのコントローラー（PostController）についても、ほとんど変更しません。変更するのは、次のようなホワイトリストに登録されたパラメーター（子オブジェクト関連のパラメーターを含む）のリストだけです。

def post_params
  params.require(:post).permit(:title, :text, 
    post_attachments_attributes: ["avatar", "@original_filename", "@content_type", "@headers", "_destroy", "id"])
end

だからこそ、それaccepts_nested_attributes_forはとても素晴らしいです。

— プログラム
ソース
これらは実際には@SSRの回答への主要な追加であり、マイナーではありません：）accept_nested_attributes_forはかなりのものです。実際、子コントローラーはまったく必要ありません。あなたのアプローチに従うことによって、私ができない唯一のことは、アップロードで問題が発生したときに子供にフォームエラーメッセージを表示することです。
— ルイスフェルナンドアレン2017年
ご意見ありがとうございます。アップロードは機能しましたが、views / posts / _form.html.erbのpost_attachmentsフォームフィールドに属性を追加するにはどうすればよいですか？<%= d.text_field :copyright, name: "album[diapos_attributes][][copyright]", class: 'form-field' %>著作権は最後のレコードにのみ書き込み、すべてのレコードには書き込みません。
— SEJU
6

また、複数ファイルのアップロードを更新する方法を理解し、それを少しリファクタリングしました。このコードは私のものですが、ドリフトが発生します。

def create
  @motherboard = Motherboard.new(motherboard_params)
  if @motherboard.save
    save_attachments if params[:motherboard_attachments]
    redirect_to @motherboard, notice: 'Motherboard was successfully created.'
  else
    render :new
  end
end


def update
  update_attachments if params[:motherboard_attachments]
  if @motherboard.update(motherboard_params)
    redirect_to @motherboard, notice: 'Motherboard was successfully updated.'
  else
   render :edit
  end
end

private
def save_attachments
  params[:motherboard_attachments]['photo'].each do |photo|
    @motherboard_attachment = @motherboard.motherboard_attachments.create!(:photo => photo)
  end
end

 def update_attachments
   @motherboard.motherboard_attachments.each(&:destroy) if @motherboard.motherboard_attachments.present?
   params[:motherboard_attachments]['photo'].each do |photo|
     @motherboard_attachment = @motherboard.motherboard_attachments.create!(:photo => photo)
   end
 end
— クリス・ハブグッド
ソース
1
コードを共有していただきありがとうございます。時間があるときは、私のgihubリポジトリでコードを更新してください。また、誰もがコードを簡単に理解できるように、メソッドごとにコメントすることを忘れないでください。
— SSR 2015
1
リポジトリのクローンを作成しました。PRを行う許可をください。
— Chris Habgood 2015
はい、確かに。githubのユーザー名は何ですか
— SSR
私にアクセスを許可する機会がありましたか？
— Chris Habgood 2015
2

モデルへの2番目のリファクタリングは次のとおりです。

  1. プライベートメソッドをモデルに移動します。
  2. @motherboardをselfに置き換えます。

コントローラ：

def create
  @motherboard = Motherboard.new(motherboard_params)

  if @motherboard.save
    @motherboard.save_attachments(params) if params[:motherboard_attachments]
  redirect_to @motherboard, notice: 'Motherboard was successfully created.'
  else
    render :new
  end
end

def update
  @motherboard.update_attachments(params) if params[:motherboard_attachments]
  if @motherboard.update(motherboard_params)
    redirect_to @motherboard, notice: 'Motherboard was successfully updated.'
  else
    render :edit
  end
end

マザーボードモデルの場合：

def save_attachments(params)
  params[:motherboard_attachments]['photo'].each do |photo|
    self.motherboard_attachments.create!(:photo => photo)
  end
end

def update_attachments(params)
  self.motherboard_attachments.each(&:destroy) if self.motherboard_attachments.present?
  params[:motherboard_attachments]['photo'].each do |photo|
    self.motherboard_attachments.create!(:photo => photo)
  end
end
— クリス・ハブグッド
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.