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 File Upload has specified JSON response mentioned here.

Extend your create method to return a JSON response akin to the following output:

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

Also in case of error, just add an error property to the individual file objects:

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

The easiest way to do this is add following code to your Photo model 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

and your JSON response should be like this see here

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