Railsアプリケーションにファイルを簡単にアップロードするgem「Shrine」と「ActiveStorage」

これだけは押さえておきたい！ Rails開発で使えるgemパッケージ／ツール 第10回

Shrineの導入（2）

ビューファイルの修正

　まず、フォームに画像パス用のフィールドを追加します。以下のように修正します。

［リスト 5］app/views/articles/_form.html.erb

…（中略）…
  <div class="field">
    <%= form.label :body %>
    <%= form.text_area :body %>
  </div>

  <div class="field">
    <%= form.label :image_data %>
    <%= form.hidden_field :image, value: article.cached_image_data %>
    <%= form.file_field :image %>
  </div>
…（中略）…

　cached_image_dataはShrineが提供するメソッドで、バリデーションエラー時にキャッシュ済みの、アップロード済みファイルを表示するためのものです。

　次に、アップロードした画像ファイルを表示するために以下のように修正します。

［リスト 6］app/views/articles/show.html.erb

…（中略）…
<p>
  <strong>Body:</strong>
  <%= @article.body %>
</p>

<p>
  <strong>Image:</strong>
  <% if @article.image.present? %>
    <%= image_tag @article.image_url %>
  <% end %>
</p>
…（中略）…

　「@article.image」とするとアップロード済みのファイルが関連付いている場合は、Shrineが提供するImageUploader::UploadedFileクラスのインスタンスが返却されます。アップロード済みのファイルがない場合は、nilが返却されます。

　「@article.image_url」とすると、ファイルがアップロード済みならそのファイルパスが、アップロード済みでないならnilが返却されます。

コントローラーの修正

　フォームに新たにfile_fieldを追加したので、Strong Parametersの設定に:imageを追加する必要があります。以下のようにArticlesコントローラーを修正します。

［リスト 7］

…（中略）…
    def article_params
      params.require(:article).permit(:title, :body, :image)
    end
…（中略）…

動作確認

　これでファイルアップロードの機能実装ができたので、動作確認を行います。rails sコマンドでpumaサーバーを起動し「http://localhost:3000」にアクセスした後、記事一覧から任意の記事を選択して画像ファイルをアップロードすると画像が表示されます。

　ここでは以下のようにRubyのロゴ画像をアップロードしました。

記事詳細