carrierwaveで画像(リサイズ)と動画のアップロードを両立させる
Railsチュートリアルのサンプルアプリの拡張機能として、動画アップロードにも対応してみる
チュートリアルをまだ一周していないので寄り道になっていますが。。
まずはアップロード時のformの修正。file_fieldのacceptにvideoを追加します。
app/views/shared/_micropost_form.html.erb
<span class="picture"> <%= f.file_field :picture, accept: 'image/jpeg,image/gif,image/png,video/*' %> </span>
次に、PictureUploaderのextension_whitelistにも、動画の拡張子であるmp4を追加します。
app/uploaders/picture_uploader.rb
def extension_whitelist %w(jpg jpeg gif png mp4) end
これで動画ファイルをアップロードすると、public/uploads/micropost/picture/(:micropost_id)
にmp4ファイルが格納されるはずです。
あとはMicropost Feedにも動画が表示されるように修正を行います。
画像であればmicropost.picture.file.content_type
がimage/*
、動画であればvideo/*
になるので、include?
で判定します
app/views/microposts/_micropost.html.erb
<%= micropost.content %> <% if micropost.picture? %> <% if micropost.picture.file.content_type.include?('image/') %> <%= image_tag micropost.picture.url %> <% else %> <%= video_tag micropost.picture.url, width: "30%", height: "30%", controls: true, autobuffer: true %> <% end %> <% end %>
さて、これで動画を選択して、Postボタンを押したところ‥
なぜか失敗してる!!!
原因としては、picture_uploaderで画像のリサイズしてる処理が、動画に対しても適用したときに失敗するようです。
というわけで、画像のリサイズしている処理をコメントアウトして再度、動画のアップを試みました。
app/uploaders/picture_uploader.rb
# process resize_to_limit: [400, 400]
画像のリサイズ処理をコメントアウトして再度動画を登録
動画の登録は成功!!
しかしリサイズされないため、画像を登録するとこんな感じになってしまいます。。
動画のアップロードと画像のリサイズアップロードを両立させるには?
色々ググっても全然わからず途方にくれましたが、readmeを読んでなんとかわかりました。
picture_uploader
でcontent_type
がimage/
の時だけ、リサイズ処理を行うように修正します。
これによって今までと同じ格納場所に、ファイル名の先頭にthumb_
が付与されたファイルも保存されます。
app/uploaders/picture_uploader.rb
version :thumb, if: :is_thumb? version :thumb do process resize_to_limit: [400, 400] end private def is_thumb? picture picture.content_type.include?("image/") end
あとはMicropost Feedの修正です。image_tag
で指定するURLを micropost.picture.url(:thumb)
に修正します。
app/views/microposts/_micropost.html.erb
<%= micropost.content %> <% if micropost.picture? %> <% if micropost.picture.file.content_type.include?('image/') %> <%= image_tag micropost.picture.url(:thumb) %> <% else %> <%= video_tag micropost.picture.url, width: "30%", height: "30%", controls: true, autobuffer: true %> <% end %> <% end %>
・・・無事、動画も画像(リサイズ)も登録できました