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 Jquery và Rails 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 %>");