Добавление файлов в файл Вход в рельсы

Question

Я хочу загрузить несколько файлов, используя paperclip в рельсах. Я создал страницу, которая загружает несколько выбранных файлов одновременно. Теперь я хочу выбрать больше файлов с использованием того же поля и загрузить файлы, которые были выбраны до и в данный момент.

Следуя моей 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

Рассмотрите возможность использования javascript-решений, таких как Dropzone.

Answer 2

У меня была такая же проблема, как и у Carrierwave, но я думаю, что это не имеет значения здесь, поскольку все было сделано на стороне клиента с помощью jQuery. Итак, что я сделал было создать пустой массив:

data = []; 

толкнул загруженный файл в массив на изменение входного файла:

$('#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 
    } 
}); 

А потом, когда у вас есть массив объектов FileList, вы может сформировать объект FormData и передать его представить, как это:

$(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 
}); 

Вот скрипку: https://jsfiddle.net/rp4kup3o/