How to enter a file of type to select several images from several directories and view all selected images

Question

Here is my code for downloading multiple files from one directory

    <%= f.fields_for :product_images do |p| %>
          <%= p.file_field :image, :multiple => true, :accept=>'image/*', name: "product_images[image][]" %>
    <% end %>

But now I want to upload multiple images from multiple directories with multiple files.

    <div id="dvPreview" class="preview-area"></div>

I use a div to preview the selected image using a file reader.

   $('.rightInfobutton').on('change','#product_product_images_attributes_0_image' , function(){
  if (typeof (FileReader) != "undefined") {
      var dvPreview = $("#dvPreview");
      dvPreview.html("");
      var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
      $($(this)[0].files).each(function () {
          var file = $(this);
          if (regex.test(file[0].name.toLowerCase())) {
              var reader = new FileReader();
              reader.onload = function (e) {
                  var img = $("<img />");
                  img.attr("style", "height:100px;width: 100px");
                  img.attr("src", e.target.result);
                  dvPreview.append(img);
              }
              reader.readAsDataURL(file[0]);
          } else {
              alert(file[0].name + " is not a valid image file.");
              dvPreview.html("");
              return false;
          }
      });
  } else {
      alert("This browser does not support HTML5 FileReader.");
  }
 });

Answer 1

You can just use the nested_form gel written by Ryan Bates https://github.com/ryanb/nested_form to solve your problem, just simply follow the github page and all that. Hope this helps you.