Tải lên tệp jQuery "Lỗi - Kết quả tải lên tệp trống" - Ứng dụng đường ray

Question

Tôi không hiểu tại sao tôi gặp phải lỗi này? Tôi đã sao chép chính xác từ ví dụ mã nguồn. Tôi có thể tải mọi thứ, và sau đó khi tôi cố gắng tải lên (bằng cách nhấp vào bắt đầu), tôi nhận được lỗi này.

Nhưng ngay cả khi tôi nhận được lỗi này, nó vẫn tải lên cơ sở dữ liệu của tôi một cách chính xác. Khi tôi làm mới trang của mình, tôi có một trang hiển thị sẽ hiển thị hình ảnh đã tải lên và ở đó. Điều gì gây ra sự cố này?

Vui lòng trợ giúp! Tôi cũng đang sử dụng kẹp giấy để tải lên. Trong môi trường của tôi, tôi đang tải lên cục bộ, nhưng trong quá trình sản xuất, tôi đang tải lên Amazon S3

Đây là bộ điều khiển của tôi trông như thế nào khi tạo hoặc cập nhật biểu mẫu.

def create 
    @project = Project.new(project_params) 

    respond_to do |format| 
    if @project.save 

     if params[:photos] 
     params[:photos].each { |image| 
      @project.project_images.create(photo: image) 
     } 
     end 
     format.html { redirect_to @project, notice: 'Project was successfully created.' } 
     format.json { render :show, status: :created, location: @project } 
    else 
     format.html { render :new } 
     format.json { render json: @project.errors, status: :unprocessable_entity } 
    end 
    end 
end 

def update 
    @project = current_user.projects.find(params[:id]) 

    respond_to do |format| 
    if @project.update(project_params) 

    if params[:photos] 
     params[:photos].each { |image| 
      @project.project_images.create(photo: image) 
     } 
     end  

     format.html { redirect_to @project, notice: 'Project was successfully updated.' } 
     format.json { render :show, status: :ok, location: @project } 
    else 
     format.html { render :edit } 
     format.json { render json: @project.errors, status: :unprocessable_entity } 
    end 
    end 
end 

EDIT:

Dưới đây là hình thức của tôi

<%= simple_form_for @project, html: { multipart: true, id: 'fileupload' } do |f| %> 

<span class="btn btn-success fileinput-button"> 
    <i class="glyphicon glyphicon-plus"></i> 
    <span>Add files...</span> 
    <input type="file" name="photos[]" id='photo_upload_btn', multiple> 
</span> 
<button type="submit" class="btn btn-primary start"> 
    <i class="glyphicon glyphicon-upload"></i> 
    <span>Start upload</span> 
</button> 
<button type="reset" class="btn btn-warning cancel"> 
    <i class="glyphicon glyphicon-ban-circle"></i> 
    <span>Cancel upload</span> 
</button> 

<% end %> 

Edit:

jQuery Mã

<script> 
$(function() { 

    'use strict'; 

    // Initialize the jQuery File Upload widget: 
    $('#fileupload').fileupload(); 
     // Uncomment the following to send cross-domain cookies: 
     //xhrFields: {withCredentials: true},  
    }); 
    // Load existing files: 
    $('#fileupload').addClass('fileupload-processing'); 
    $.ajax({ 
     // Uncomment the following to send cross-domain cookies: 
     //xhrFields: {withCredentials: true}, 
     url: $('#fileupload').fileupload('option', 'url'), 
     dataType: 'json', 
     context: $('#fileupload')[0] 
    }).always(function() { 
     $(this).removeClass('fileupload-processing'); 
    }).done(function (result) { 
     $(this).fileupload('option', 'done') 
      .call(this, $.Event('done'), {result: result}); 
    }); 
}); 
</script> 

<script src="http://blueimp.github.io/JavaScript-Templates/js/tmpl.min.js"></script> 
<script src="http://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script> 
<script src="http://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script> 
<script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script> 

Answer 1

jQuery File Upload đã quy định JSON phản ứng mentioned here.

Mở rộng của bạn tạo ra phương pháp để trả lại một phản ứng JSON giống như đầu ra sau đây:

{"files": [ 
    { 
    "name": "picture1.jpg", 
    "size": 902604, 
    "url": "http:\/\/example.org\/files\/picture1.jpg", 
    "thumbnailUrl": "http:\/\/example.org\/files\/thumbnail\/picture1.jpg", 
    "deleteUrl": "http:\/\/example.org\/files\/picture1.jpg", 
    "deleteType": "DELETE" 
    }, 
    { 
    "name": "picture2.jpg", 
    "size": 841946, 
    "url": "http:\/\/example.org\/files\/picture2.jpg", 
    "thumbnailUrl": "http:\/\/example.org\/files\/thumbnail\/picture2.jpg", 
    "deleteUrl": "http:\/\/example.org\/files\/picture2.jpg", 
    "deleteType": "DELETE" 
    } 
]} 

Cũng trong trường hợp lỗi, chỉ cần thêm một đặc tính lỗi cho các đối tượng tập tin cá nhân:

{"files": [ 
    { 
    "name": "picture1.jpg", 
    "size": 902604, 
    "error": "Filetype not allowed" 
    }, 
    { 
    "name": "picture2.jpg", 
    "size": 841946, 
    "error": "Filetype not allowed" 
    } 
]} 

Cách dễ nhất để thực hiện việc này là thêm mã sau vào mẫu Ảnh của bạn see here

def to_jq_upload 
    { 
     "name" => read_attribute(:attachment_file_name), 
     "size" => read_attribute(:attachment_file_size), 
     "url" => attachment.url(:original), 
     "thumbnailUrl" => attachment.url(:thumb), 
     "deleteUrl" => "/photos/#{self.id}", 
     "deleteType" => "DELETE" 
    } 
    end 

và phản hồi JSON của bạn phải như thế này see here

format.json { render json: {files: [@photo.to_jq_upload] }}