Ruby on Railsで画像ファイルのアップロード(超簡単)

Ruby on Railsで画像ファイルのアップロード(超簡単)

Ruby on Railsで画像のアップロードを実現する方法です。

今回はユーザーのアイコン画像登録を行います。

 

環境は以下の通りです。

・ruby :2.5.3
・rails :5.2.1

 

「画像を保存する」手順としては

  1. gemの「carrierwave」をインストール
  2. アップローダーの作成
  3. ユーザーモデルに画像のパスを格納するカラムの追加
  4. ユーザーモデルにアップローダーへマウントする記述を追加
  5. ビューでフォーム作成
  6. コントローラーで保存処理

という流れになります。

 

非常に簡単で、5分もあれば十分できると思いますので

サクっとやっていきましょう!

 

1.gemのcarrierwaveをインストール

Gemfileに以下の一文を追加して、bundle installをしましょう。

インストールが完了すれば 1. は終わりです。

 

 

2.アップローダーの作成

 

ターミナルから以下のコマンドを入力し、アップローダーを作成します。

image部分は好きな名前にしてください。

これで 2. は終わりです。

 

 

3.ユーザーモデルに画像のパスを格納するカラムの追加

 

以下のコマンドを入力してカラムを追加しましょう。

db/migrate/(日付)_add_image_to_users.rb というファイルができます。何も変更する必要はないですが、一応見ておくと、以下のようになっていると思います。

これをデータベースに反映させるためにマイグレーションをしておきましょう。

これで 3. は完了です。

 

4.ユーザーモデルにアップローダーへマウントする記述を追加

 

次はmodelsのuser.rbファイルに以下の一文を追加します。

これで 5. は完了です。これで画像を保存するために必要なものは揃いました。あとはコントローラーとビューで書いてやるだけです。

 

 

5.ビューでフォーム作成

 

ユーザーの画像を保存するのはユーザー情報の編集画面、editのアクションだと思いますので、editのビューでフォームの画像送信を追加します。以下に画像の変更だけのフォーム送信のサンプルをおいておきます。

 

これで簡単な画像登録用のフォームができました。

(上の例では@userとあるようにログインしているユーザーの情報をコントローラーのeditアクションで@user変数に入れておかないとエラーになります。)

 

ここではフォームの送信先をuser_pathにしてput送信をしているので、ルーティングの情報を

このコマンドで見ると以下のようになっていることから、

コントローラーのupdateアクションに保存処理を書いていけばよいことになります。

 

 

6.コントローラーで保存処理

 

それでは users_controller.rb の update アクションに保存処理を書いていきましょう。

まず先にストロングパラメーターにimageカラムを追加しておきます。

 

それから保存処理を書きます。

これで完了です!

あとは実際に画面でアップロードをしてみましょう!

flashを書いているので成功すれば画面上部に「ユーザー情報を編集しました。」という文字が出ます。失敗すれば「ユーザー情報の編集に失敗しました。」という文字が出ます。

 

 

上手くいかないときは….?

もし画像登録が上手くいかないときは以下の点を確認してみるといいかもしれません。

・今回は画像をアップロードした際に、ユーザーのimageカラムのパスのみを更新していることになるので、更新時にパスワードなどのバリデーションが有効になっている場合はバリデーションにひっかかってしまい更新が出来ません。

・またファイル名が日本語の場合は上手くいかないかもしれないので英語に直してみましょう。

 

 

実際にやってみると以下のように表示されている画面から

ファイルを選択してアップロードしてみると、

 

 

同じ画面に帰ってきてアップロードした画像が表示されています。

ちなみに保存された画像は

public/uploads/user/image/(数字)のディレクトリに保存されているので確認しておきましょう!