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

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

У меня была та же проблема, я использовал 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 и передать его на submit, например:

 $(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/

Answer 2

Подумайте об использовании JavaScript-решений, таких как Dropzone.