RailsでDBに保存した画像データをブラウザで表示する。

さてさて、Railsで画像ファイルをアップロードし、DBに保存することに成功した次は、
保存した画像ファイルをブラウザに表示させてみた。

しかし、これが意外と不可解なのだが、Railsの作法をまとめてみた。
1)ブラウザ側から表示データをリクエストする。
2)ブラウザから要求された表示データをDBから取り出し、ブラウザに送る。
3)プラウザで送られた画像データを表示する。

ここで実装例のRails環境について
ブラウザ表示用ファイル:app/views/show.html.erb
DB用コントローラファイル：app/controllers/samples_controller.rb
DB用モデル名：sample

カラム定義
t.string file_name;
t.binary upload_file;

画像表示用コントロールメソッド：show
画像送信処理用コントロールメソッド:send_img

【システム構成】


1.ブラウザ側から表示データをリクエストする

HTMLで画像表示する場合は、img src を使用し、サーバー側の画像ファイルを指定する。
基本的には同じだが、DBに保存された画像データを表示する場合は、アクションを指定し、アクション内で表示データを送信することになる。

railsではimg_tagを使用、show.html.erb内の表示部コードは以下の様に記述する。
<%= image_tag(url_for(:controller => 'samples', :action => 'send_img', :id => 1), :size => '100x100') %>

例ではSampleのID=1の画像データを要求、表示している。

HTMLで記述すると
img src="/samples/send_img?id=1" width="100" height="100"
と同じになる。

この１行で1.と3.の処理を記述したことになる。

2.ブラウザから要求された表示データをDBから取り出し、ブラウザに送る。

ブラウザからの画像データ送信要求を実行するメソッドsend_imgでは、DBから画像データを読み出し、ブラウザへsend_data()を使って送信する。

コード例は以下となる。

def send_img

tmpbin = Sample.find(params[:id])
if (1 <= tmpbin.upload_file.size)

send_data(tmpbin.upload_file, :type => 'image/jpeg', :disposition => 'inline')

end

end

Railsでファイルをアップロードする方法

これまでRailsを使い、主にテキストデータのDB管理を行ってきたが、画像ファイル等をアップロードし管理できるとなかなか便利である。

そこで、バイナリデータをアップロードし、DBで管理する手順をまとめてみた。

作成手順の概略は以下の通り。
1）ブラウザ側機能コーディング
2）Rails側受信機能コーディング
3）DBへの保存機能コーディング

はじめに実装例のRails環境について
ブラウザ表示用ファイル:app/views/new.html.erb
DB用コントローラファイル：app/controllers/samples_controller.rb
DB用モデル名：sample

カラム定義
t.string file_name;
t.binary upload_file;

アップロード用コントロールメソッド：new
受信処理用コントロールメソッド:create

【システム構成】

1.ブラウザ側機能コーディング

Railsでは、ブラウザでファイルを選択し、送信する機能を実現するのに便利なコマンドが用意されている。
ここではform_for のfile_fieldを使用する。
new.html.erbへの記述は以下となる。

<%= @tmp = Sample.new %>
<%= form_for @tmp, :url => {:action => 'create'} do |t| %>
<%= t.file_field :upload_file %>
<%= t.submit "送信" %>
<% end %>

※rails ver3.0からform_forを使用する場合は%ではなく%=とする仕様に変更されている。

2.Rails側受信機能コーディング

送信ボタンをクリックすると、コントローラのcreateメソッドに飛んでくる。
createメソッドでは、ブラウザから送信されたファイル情報のうち、ファイル名と
バイナリデータを取得し、DBに保存する。

ファイル名の取得方法は
params[:sample]["upload_file"].original_filename
で取得する。

ファイルのバイナリデータの取得方法は
params[:sample]["upload_file"].read
で取得する。

3.DBへの保存機能コーディング

2.で取得したファイルのバイナリデータをDBに保存する方法は
オブジェクトのsaveメソッドを使用すれば良い。

以上から、Upload Fileの受信と保存処理について
createメソッド内でのコード例は以下となる。

def create

tmp = Sample.new
tmp.file_name = params[:sample]["upload_file"].original_filename
tmp.upload_file = params[:sample]["upload_file"].read
tmp.save

end

以上。。。