Shrineの導入(2)
ビューファイルの修正
まず、フォームに画像パス用のフィールドを追加します。以下のように修正します。
…(中略)…
<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が提供するメソッドで、バリデーションエラー時にキャッシュ済みの、アップロード済みファイルを表示するためのものです。
次に、アップロードした画像ファイルを表示するために以下のように修正します。
…(中略)…
<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コントローラーを修正します。
…(中略)…
def article_params
params.require(:article).permit(:title, :body, :image)
end
…(中略)…
動作確認
これでファイルアップロードの機能実装ができたので、動作確認を行います。rails sコマンドでpumaサーバーを起動し「http://localhost:3000」にアクセスした後、記事一覧から任意の記事を選択して画像ファイルをアップロードすると画像が表示されます。
ここでは以下のようにRubyのロゴ画像をアップロードしました。
