ES6 Merge two FileLists, to update a input.files element

Question

I have a form with f.file_field tag:

<div class="forming">
  <%= simple_form_for @product do |f| %>
    <%= f.file_field :photos, multiple: true, name: "product[photos]" %>
    <%= f.hidden_field :photos_cache %>
    <%= f.button :submit, class: "btn-primary" %>
  <% end %>
</div>

I have a JS script, that tries to store the files selected by the user into a window variable:

<script>
  const productPhotos = document.getElementById("product_photos");

  const updateInputFiles = (e) => {
    const input = e.target;

    if (window.postFiles != undefined) {
      console.log(window.postFiles);
      window.postFiles = $.merge(window.postFiles, input.files);
      console.log(window.postFiles);
    } else {
      window.postFiles = input.files;
    }
  }

  productPhotos.addEventListener("change", updateInputFiles)
</script>

I console log the window.postFiles before the merge and after, but the value does not change.

Can someone help me? How can I use ES6 to achieve the same?

Thanks a lot in advance.

score 0 · Answer 1 · answered Sep 19 '18 at 21:13

0

You should use the spread syntax:

window.postFiles = [...window.postFiles, ...input.files];

answered Sep 19 '18 at 21:13

Michał Perłakowski

88,409
26
156
177

thanks, this kind of works, but still the same problem, you convert to arrays, and then merge. This causes that I can not assign this merge to input.files, since input.files needs a FileList, not an array of Files. Any help with this? – AlbertMunichMar Sep 20 '18 at 01:27

ES6 Merge two FileLists, to update a input.files element

1 Answers1