jQuery File Upload "Error - Empty file upload result" - Rails Application

Question

I don't get why I'm getting this error? I've copied exactly from the source code example. I'm able to get everything loaded, and then when I try to upload (by clicking start), I get this error.

But even if I'm getting this error, it still uploads to my database correctly. When I refresh my page, I have a show page that will display the uploaded images, and it's there. What's causing this issue?

Please help! I'm also using paperclip to upload. In my environment, I'm uploading locally, but in production, I'm uploading to Amazon S3

This is what my controller looks like when creating or updating the form.

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:

Here's my form

<%= 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 Code

<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文件上传 已指定此处提到的 JSON响应.

扩展create方法以返回类似于以下输出的JSON响应:

 {"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"
  }
]}

如果出现错误,只需将错误属性添加到各个文件对象:

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

最简单的方法是在Photo模型中添加以下代码,请参见此处

  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

你的JSON响应应该像这样看到这里

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