ファイルをアップロード

このチップは、ファイルのアップロードです。

ファイルをアップロードしサーバー側に保存する。

ブラウザのファイルフィールドで選択されたファイルがブラウザから送られてきます。そのファイルをRailsが受け取ってくれるので、名前を付けてディレクトリに保存するわけです。

それだけでは何なので、javascriptで拡張子のバリデートをしておきましょう。それともう一つ、Bootstrapでカッコいいファイル選択ボタンを表示させてみましょう。

View

form_forにactionを指定し、html: {multipart: true, method: :post}をつけ、file_field_tag でファイルフィールドを作成します。

<%= form_for(@user, url: {action: 'collective_registration'}, html: {multipart: true, method: :post}) do |f| %>
     <%= file_field_tag :upload_file %>
	 ...

<% end %>

bootstrapを使わない時

ではjavascriptで拡張子のバリデートをしましょう。

        $(document).ready(function () {
           $.validator.addMethod(
                   "file_extension",
                   function (value, element, parent) {
                       var ext = $('#upload_file').val().split('.').pop().toLowerCase();
                       if ($.inArray(ext, ['xls', 'xlsx']) == -1) {
                           return false;
                       }
                       return true;
                   },
                   "拡張子が「xls」または「xlsx」のExcelファイルを選択してください。"
           );
           $('form[id*="user"]').validate({
               rules: {
                   'upload[file]': {
                       file_extension: true,
                       required: true,
                       maxlength: 128
                   }
               }
            });
        })

Bootstrapで装飾する時

Bootstrap File Inputを使うとクール！

ファイルを選択する前

ファイルを選択した時(Excelファイルのアップロードにこのプレビューはいらないですが)

form_for部分は先ほどど同じですがscriptタグ内に

$(document).ready(function () {
   $('#upload_file').fileinput({
       showPreview: true,
       showUpload: false,
       maxFileCount: 1,
       browseClass: 'btn btn-info fileinput-browse-button',
       browseIcon: '',
       browseLabel: ' ファイル選択',
       removeClass: 'btn btn-warning',
       removeIcon: '',
       removeLabel: ' キャンセル',
       allowedFileExtensions: ['xls', 'xlsx'],
       msgInvalidFileExtension: '拡張子が「xls」「xlsx」のファイルのみ有効です。',
       msgValidationError: '<span class = "text-danger"> Excelファイルのみ有効です。 </span>'
    });
});

のような感じで記述するだけです。簡単！！しかもこれだけでバリデートもしてくれます。バリデート画面

Controller

params について

params[:パラメータ名]は、GETやPOSTで送られてきた値を取得するのに使われますが、それ以外にparams[:controller]やparams[:action]で、コントローラ名やアクション名も取得できます。

また、ここで使用しているようにフォームからアップロードされたファイルの取得もしてくれます。その場合、Railsが受け取るのはTempfileオブジェクトで、以下のメソッドを使うことができます。

params[:パラメータ名].original_filename ← ファイル名の取得
params[:パラメータ名].content_type ← コンテンツタイプの取得
params[:パラメータ名].size ← ファイルのサイズの取得
params[:パラメータ名].read ← ファイル本体の読み込み
params[:パラメータ名].path ← ファイル本体の一時保存先のパス(OSのテンプディレクトリ、例：/tmp/foo.24722.0)

基本の使い方は以下のようになります。保存するディレクトリを指定し(もしなければ作成し)て、元のファイル名を変更せずにそのまま保存します。

upload_file = params['upload_file']
filename = upload_file.original_filename

dir = "#{Rails.root}files/"
FileUtils.mkdir(dir) unless File.directory?(dir)

filepath = File.join(dir, filename)
f        = File.open(filepath, "wb")
f.write(upload_file.read)
f.close

なんてシンプル。さすがRailsですね。

ファイルをアップロード