Rails 4: Cách tải tệp lên bằng AJAX

Question

Tôi muốn tải tệp lên bằng AJAX. Trong quá khứ tôi đã hoàn thành điều này bằng cách sử dụng phép thuật jQuery form plugin và nó hoạt động rất tốt. Hiện tại tôi đang xây dựng một ứng dụng Rails và cố gắng làm mọi thứ "The Rails Way" vì vậy tôi đang sử dụng Trình trợ giúp biểu mẫu và đá quý kẹp giấy để thêm tệp đính kèm.

Các rails docs cảnh báo rằng Helper Mẫu không làm việc cho tập tin cập nhật AJAX:

Không giống như các hình thức khác làm cho một hình thức tập tin tải lên không đồng bộ không phải là đơn giản như cung cấp form_for với từ xa: true. Với biểu mẫu Ajax, việc tuần tự hóa được thực hiện bằng JavaScript chạy bên trong trình duyệt và vì JavaScript không thể đọc tệp từ ổ cứng của bạn, tệp không thể tải lên được. Cách giải quyết phổ biến nhất là sử dụng khung nội tuyến vô hình làm mục tiêu cho việc gửi biểu mẫu.

Dường như không có giải pháp nào có sẵn. Vì vậy, tôi tự hỏi điều gì là thông minh nhất để làm. Có vẻ như tôi có một số tùy chọn:

1. Sử dụng trình trợ giúp biểu mẫu và thủ thuật iframe.
2. Sử dụng trình trợ giúp biểu mẫu + tải biểu mẫu jQuery plugin để gửi tệp (không chắc chắn nếu điều này sẽ phát đẹp với mã thông báo xác thực của Rails, v.v.)
3. Sử dụng trình trợ giúp biểu mẫu + kẹp giấy + [một số đá quý khác] để mở rộng chức năng của nó để cho phép gửi biểu mẫu AJAX.

Cả ba đều có thể. Tôi biết ít nhất về # 3, đặc biệt là phần [một số đá quý khác]. Tôi đã tìm thấy hai câu hỏi tương tự (this và this) đề cập đến một nhánh Pic-Upload có tên là Uploadify nhưng cả hai đều được 2 tuổi và xử lý Rails 2 và 3 (và Uploadify chưa được cập nhật trong nhiều năm). Vì vậy, cho bao nhiêu đã thay đổi, tôi nghĩ rằng đây thực sự là một câu hỏi hoàn toàn mới:

Cách tốt nhất để tải tệp lên bằng AJAX trong Rails 4 là gì?

Answer 1

Hãy nhìn vào viên đá quý remotipart: https://github.com/JangoSteve/remotipart - có thể giúp bạn có được tất cả các cách có rất ít công việc!

Answer 2

IMHO Rails không hoàn hảo khi xử lý các tệp tải lên bằng AJAX, đặc biệt nếu bạn muốn có thanh tiến trình. Đề xuất của tôi là sử dụng Javascript để gửi biểu mẫu qua yêu cầu AJAX như bạn đã đề xuất trong (2). Nếu bạn cảm thấy thoải mái với Javascript, bạn sẽ không gặp nhiều vấn đề.

Gần đây tôi đã sử dụng phương pháp tương tự bằng cách sử dụng này thư viện JS rất đơn giản https://github.com/hayageek/jquery-upload-file và tôi đã viết thêm chi tiết ở đây http://www.alfredo.motta.name/upload-video-files-with-rails-paperclip-and-jquery-upload-file/

Đối với một ứng dụng với một hình thức để tải lên một bộ phim với tiêu đề và mô tả mã JS trông giống như sau:

$(document).ready(function() { 
    var uploadObj = $("#movie_video").uploadFile({ 
    url: "/movies", 
    multiple: false, 
    fileName: "movie[video]", 
    autoSubmit: false, 
    formData: { 
     "movie[title]": $('#movie_title').text(), 
     "movie[description]": $('#movie_description').text() 
    }, 
    onSuccess:function(files,data,xhr) 
    { 
     window.location.href = data.to; 
    } 
    }); 

    $("#fileUpload").click(function(e) { 
    e.preventDefault(); 
    $.rails.disableFormElements($($.rails.formSubmitSelector)); 
    uploadObj.startUpload(); 
    }); 
}); 

Xa hoàn hảo, nhưng mang lại sự linh hoạt cho lối vào của bạn.