jQuery Caricamento file "Errore - Risultato caricamento file vuoto" - Applicazione Rails

Question

Non capisco perché sto ricevendo questo errore? Ho copiato esattamente dall'esempio del codice sorgente. Sono in grado di ottenere tutto caricato, e poi quando provo a caricare (facendo clic su Start), ottengo questo errore.

Ma anche se sto ricevendo questo errore, si arrivi comunque al mio database in modo corretto. Quando aggiorno la mia pagina, ho una pagina di presentazione che mostrerà le immagini caricate, ed è lì. Cosa sta causando questo problema?

Si prega di aiuto! Sto anche usando paperclip per caricare. Nel mio ambiente, sto caricando localmente, ma in produzione, sto caricando su Amazon S3

Ecco come appare il mio controller durante la creazione o l'aggiornamento del modulo.

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:

Ecco la mia forma

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

<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 ha specificato JSON risposta mentioned here.

Estendere il tuo creare metodo per restituire una risposta JSON simile al seguente 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" 
    } 
]} 

anche in caso di errore, è sufficiente aggiungere una proprietà di errore per i singoli oggetti di file:

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

Il modo più semplice per farlo è aggiungere il seguente codice al tuo modello Photo 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 

e la vostra risposta JSON dovrebbe essere così see here

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