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


All Rights Reserved