Giới thiệu gem Remotipart

Remotipart là một gem Ruby on Rails giải quyết vấn đề upload files sử dụng Jquery Ajax.

Phụ thuộc

Gem jquery-rails là được bao gồm mặc định trong Rails 3 và Rails 4, cài đặt Jquery và Rails JQuery UJS driver (jquery-ujs).

Cài đặt

Ứng dụng của bạn cần sử dụng gem jquery-rails version v.2.3.0 hoặc cao hơn. Nếu bạn đang sử dụng phiên bản cũ của gem jquery-rails, bạn cần có sự hỗ trợ về phiên bản của jquery-ujs (rails.js hoặc jquery_ujs.js) từ VERSION_COMPATIBILITY.

1. Cài đặt gem Remotipart

   • Thêm vào GEMFILE (sử dụng các phiên bản thích hợp nếu cần)

     gem 'remotipart', '~1.2'

   • Sau đó chạy

     bundle install

2. Các tập tin js sẽ tự động được thêm vào asset, nên thêm dòng sau vào app/assets/javascripts/application.js (ngay sau //= require jquery_ujs)

   //= require jquery.remotipart

3. Các files js cần được thêm :defaults vào ứng dụng javascript của bạn

   <%= javascript_include_tag :defaults %>

Sử dụng

• Đối với multipart / forms với các tập tin inputs, thiết lập remote trong form_for giống như cho form ajax thông thường:

  remote: true

• Khi Javascript được kích hoạt trong trình duyệt, form, bao gồm cả các tập tin sẽ được gửi không đồng bộ với các controller bằng:

  :format => 'js'

• Nếu bạn muốn xác định một yêu cầu cụ thể được thực hiện thông qua form remotipart

  • Từ controller hoặc view của ứng dụng:

    if remotipart_submitted?

  • Từ javascript:

    $(form).bind("ajax:success", function(){
     if ( $(this).data('remotipartSubmitted') )
    });
    

• Nếu bạn muốn nhận được thông báo khi upload xong (có thể thành công hoặc lỗi)

  • Từ javascript:

      $(form).on("ajax:remotipartComplete", function(e, data){
        console.log(e, data)
      });
    

Ví dụ

sample_layout.html.erb

     <%= form_for @sample, :html => { :multipart => true }, :remote => true do |f| %>
        <div class="field">
          <%= f.label :file %>
          <%= f.file_field :file %>
        </div>
        <div class="actions">
          <%= f.submit %>
        </div>
      <% end %>

sample_controller.rb

     def create
        respond_to do |format|
          if @sample.save
            format.js
          end
       end
     end

create.js.erb

     // Display a Javascript alert
      alert('success!');
      <% if remotipart_submitted? %>
        alert('submitted via remotipart')
      <% else %>
        alert('submitted via native jquery-ujs')
      <% end %>

Tài liệu tham khảo

https://github.com/JangoSteve/remotipart