jQuery Dosya Yükleme "Hata - Boş dosya yükleme sonucu" - Raylar Uygulama

Question

Neden bu hatayı alıyorum anlamıyorum? Tam olarak kaynak kod örneğinden kopyaladım. Yüklenen her şeyi alabiliyorum ve yüklemeye çalıştığımda (başlatarak), bu hatayı alıyorum.

Ama bu hatayı alıyorum bile, yine de düzgün benim veritabanına yükler. Sayfamı yenilediğimde, yüklenen görselleri gösterecek bir şov sayfam var ve orada. Bu soruna neden olan nedir?

yardım edin! Yüklemek için de ataç kullanıyordum. Çevremde yerel olarak yüklüyorum, ancak üretim aşamasında Amazon S3

'a yüklüyorum. Bu, denetleyicinin formu oluştururken veya güncelleştirirken neye benzediğini gösterir.

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 

DÜZENLEME:

İşte benim 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 %> 

Düzenleme:

jQuery Kod

<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 JSON yanıtını mentioned here belirlemiştir.

aşağıdaki çıkışına benzer bir JSON yanıtı döndürmek için yöntem oluşturmak için uzatın:

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

Ayrıca hata durumunda, sadece tek dosya nesnelere bir hata özelliğini ekleyin:

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

bunu yapmanın en kolay yolu, Fotoğraf modeline aşağıdaki kodu ekleyin 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 

ve bu see here

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