ファイルへのファイルの追加レールでの入力

Question

レールでクリップを使用して複数のファイルをアップロードしたいと思います。一度に選択した複数のファイルをアップロードするページを作成しました。今度は、同じファイルフィールドを使用してさらに多くのファイルを選択し、前に選択され、現在選択されているファイルをアップロードします。

私file_fieldに次の

<div class="queue-empty"> 
     <span class="btn btn-primary btn-file"> 
     <span class="fileinput-new">Click to Browse</span> 
      <%= photo.file_field :image,multiple: true,id: "File-Upload"%> 
     </span> 
    </div> 

どのように私は、以前に選択したファイルを失うことなく、このファイルのフィールドにファイルを追加することができますか？誰も助けることができますか？ありがとうございました。

Answer 1

Dropzoneなどのjavascriptソリューションの使用を検討してください。

Answer 2

私は同じ問題を抱えていましたが、Carrierwaveを使用しましたが、クライアント側でjQueryを使用しているため、ここでは問題にはならないと思います。私は空の配列を作成していた何をやったか ので、：あなたがファイルリストオブジェクトの配列を持っているときには、その後、

$('#File-Upload input[type=file]').change(function(e){ 
    var files = $('[type="file"]').get(0).files; 
//checking if it was multiple files upload 
    if (!!$(this).prop('files') && $(this).prop('files').length > 1) {/
    files_array = $(this)[0].files //creating array of uploaded files 
    $.each(files_array, function(indx, file){//iterate over this array, pushing files one by one 
     data.push(file) 
    }) 
    } 
    else { 
    data.push($(this)[0].files[0]);// single file, just uploading 
    } 
}); 

そして、：

data = []; 

ファイル入力変化に列にアップロードされたファイルをプッシュいるFormDataオブジェクトを形成し、そのように、提出の上にそれを渡すことができます：https://jsfiddle.net/rp4kup3o/

：ここ

$(document).on('click', '.some-form input[type=submit]', function(e){ 
     e.preventDefault(); 
     formdata = new FormData(); 
     $.each(data, function(i, file) { 
     formdata.append('files' + i, file); 
    }); 
    //if you need to pass other parameters from your form you can do like this: 
    //var other_data = $('.some-form').serializeArray(); 
    // $.each(other_data,function(key,input){ 
    // formdata.append(input.name,input.value); 
    // }); 
    // ... some ajax call goes here 
}); 

はフィドルです