Uploading jQuery file "Error - empty file upload result" - Rails application

Question

I do not understand why I get this error? I copied exactly from the source code example. I can download all the content, and then when I try to download (by clicking the "Start" button), I get this error.

But even if I get this error, it still loads into my database correctly. When I refresh my page, I have a display page on which the downloaded images will be displayed, and there it is. What causes this problem?

Please, help! I also use paperclip to download. In my environment, I load locally, but during production I load on Amazon S3

This is what my controller looks like when creating or updating a 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 is 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.imtqy.com/JavaScript-Templates/js/tmpl.min.js"></script> <script src="http://blueimp.imtqy.com/JavaScript-Load-Image/js/load-image.all.min.js"></script> <script src="http://blueimp.imtqy.com/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script> <script src="http://blueimp.imtqy.com/Gallery/js/jquery.blueimp-gallery.min.js"></script> 

Answer 1

The jQuery file download indicated the JSON response specified here ,

Extend your create method to return a JSON response similar 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 an error, simply add the error property to 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 to add the 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 answer should look like this see here

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