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ボタンを押したところ‥



なぜか失敗してる！！！

f:id:ken992:20180703235851p:plain


原因としては、picture_uploaderで画像のリサイズしてる処理が、動画に対しても適用したときに失敗するようです。
というわけで、画像のリサイズしている処理をコメントアウトして再度、動画のアップを試みました。

app/uploaders/picture_uploader.rb

# process resize_to_limit: [400, 400]


画像のリサイズ処理をコメントアウトして再度動画を登録

f:id:ken992:20180704001343p:plain

　動画の登録は成功！！

f:id:ken992:20180704001424p:plain


しかしリサイズされないため、画像を登録するとこんな感じになってしまいます。。

f:id:ken992:20180704002320p:plain



動画のアップロードと画像のリサイズアップロードを両立させるには？

色々ググっても全然わからず途方にくれましたが、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 %>


・・・無事、動画も画像(リサイズ)も登録できました

f:id:ken992:20180704005046p:plain