ファイルのアップロードをモーダルウィンドウで処理する。

Ruby on Rails

現状では、アップロードしたいファイルが複数ある場合、1ファイルをアップロードするごとにリストページに戻ってしまい、何度も「CSVファイルのアップロード」リンクをクリックする羽目になる。そこで効率的なアップロードを目指して、アップロードが終わっても、そのままアップロードページに戻るようにしてみた。
すると今度は、2、3のファイルならまだ良いが、それ以上いっぺんにアップロードしていると、どこまでアップロードしたのか分からなくなってしまう。結局、不安になって、リストページに戻って、確認して、という無駄な操作をしていた。
こんな時は、モーダルウィンドウの出番です！アップロードページの外側には、リストページが透過されているので、自信を持ってアップロード作業を続けられる。早速、モーダルウィンドウ化してみる。

app/views/csvs/list.rhtml
ビュー
<% if controller.action_name == 'list' %>
  
  

    <% if admin? || uploader? %>
      <%= link_to 'CSVファイルのアップロード', 
                  {:action => 'new', 
                  :sort_field => params[:sort_field], 
                  :sort_direction => params[:sort_direction],
                  :page => params[:page]}, :id=>'modal_upload' %>
    <% end %>
  

...（途中省略）...
<%= modal_window_id 'modal_upload', :iframe=>true, :width=>640, :height=>480 %>
app/views/csvs/new.rhtml
ビュー
  • 「戻る」リンクを、モーダルウィンドウを閉じる「キャンセル」リンクに変更した。
  • newページの最後に、背景に透過している親ウィンドウを更新するためのjavascriptを追記した。
    • モーダルウィンドウから背景の親ウィンドウを更新する場合、親ウィンドウ中のid="list_params"の範囲をパラメーターとして送信する必要がある。
    • その場合、parameters:に次のようにparentを追記するとうまくいった。parameters:parent.Form.serialize('list_params')
    • 以前、モーダルウィンドウを親ウィンドウと連動させた時は、このparentが抜けていて、うまく動いていなかった...。ここで気付いたのでparentを追記しておいた。
<div class="new_update">
<h1>CSVファイルのアップロード</h1>

<%= start_form_tag({:action => 'create'}, :multipart => true) %>
  <%= render :partial => 'form' %>
...（途中省略）...
  <%#= link_to '戻る', :action => 'list', 
                      :sort_field => params[:sort_field], 
                      :sort_direction => params[:sort_direction], 
                      :page => params[:page] %>
  <%= link_to_function 'キャンセル', "parent.Control.Modal.close();" %> |
  <%= submit_tag "アップロード" %>
<%= end_form_tag %>

<%= javascript_tag("new parent.Ajax.Updater('list_update', '/csvs/list_update', {asynchronous:true, evalScripts:true, parameters:parent.Form.serialize('list_params')});") %>
</div>


以上で、CSVファイルのアップロードページのモーダルウィンドウ化、完了！モーダルウィンドウが簡単に使えると、予想以上に便利だ！今後、多用してしまいそう...。