Sử dụng gem Remotipart

  1. Giới thiệu
    • Remotipart: Rails jQuery File Uploads
    • Remotipart là 1 Ruby on Rails gem, cho phép AJAX upload file với jQuery trong Rails 3 và Rails 4.
    • Gem này cho cho phép upload File không đồng bộ với ít thay đổi cho ứng dụng của bạn.
    • Gem Remotipart phụ thuộc vào:
      • Rails 3, 4
      • gem jquery-rails(Gem jquery-rails là mặc định được cài đặt trong rails 3 và rails 4, )
      • Cài đặt JqueryRails JQuery UJS
  2. 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
    • Add vào Gemfile
     gem "remotipart"
     bundle install
 + Hoặc
     gem install remotipart
 - Rails 3.1 and Rails 4
     + 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` (sau `//= require jquery_ujs`)
         //= require jquery
         //= require jquery.turbolinks
         //= require jquery_ujs
         //= require jquery.remotipart
         //= require_tree .
 - Rails 3.0
     + Chạy generator của `Remotipart` để thêm mới `jquery.iframe-transport.js` và `jquery.remotipart.js` vào `public/javascripts/`
         rails g remotipart:install
     + Các tập tin `js` cần thiết sẽ được thêm vào ứng dụng của bạn javascript: `defaults`, do đó hãy chắc chắn rằng nó đã được khai báo trong ứng dụng của bạn
         = javascript_include_tag :defaults
  1. Sử dụng
    • Đối với multipart/forms với các file inputs, thiết lập remote trong form_for giống như cho form ajax thông thường:
    = form_for Message.new, html: {id: "messages_image", multipart: true}, remote: true, authenticity_token: true do |f|
        = f.file_field :content, class: "upload_image"
- Khi Javascript được kích hoạt trong trình duyệt, form, bao gồm cả các file sẽ được gửi không đồng bộ với các `controller` bằng:
      def create
        message = current_user.messages.create! mss_params
        respond_to do |format|
          format.js {render layout: false}
        end
      end
- 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?
    + 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)
    + Javascript:
        $(form).on("ajax:remotipartComplete", function(e, data){
          console.log(e, data)
        });
  1. Ví dụ
    • View
   = form_for Message.new, html: {id: "messages_image", multipart: true}, remote: true, authenticity_token: true do |f|
        = f.file_field :content, class: "upload_image"
        i.fa.fa-picture-o
        = f.submit "送信"
  • Controller
    def create
      message = current_user.messages.create! mss_params
      respond_to do |format|
        format.js {render layout: false}
      end
   end
  • Javascrip
   $("#chat").append("<%= j render 'message', message: @message %>");
   $("#supplier-chat").append("<%= j render 'supplier/messages/message', message: @message %>");