Multiple show image preview before Upload for Carrierwave

https://stackoverflow.com/questions/43729171/how-to-show-image-preview-before-upload

gem 'jquery-ui-rails'
gem "jquery-rails"
gem 'carrierwave'


//= require jquery





On controller


def create
   

    if params[:master][:image].present?
      params[:master][:image].each do |img|
        @master = Master.new(image: img)
        @master.save
      end
    end
    redirect_to masters_path, notice: 'Master was successfully created.'
  end















===============================================
ON form

remove title or description







<%= form_with(model: master, local: true) do |form| %>
  <% if master.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(master.errors.count, "error") %> prohibited this master from being saved:</h2>

      <ul>
      <% master.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :title %>
    <%= form.text_field :title %>
  </div>

  <div class="field">
    <%= form.label :description %>
    <%= form.text_area :description %>
  </div>

  <div class="field">
    <%= form.label :image %>
    <%= form.file_field :image, id: "uploadBtn", :multiple => true, style: "display: none !important;" %>
    <input type="button" value="Choose File" onclick="document.getElementById('uploadBtn').click();" />

  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
 

<input id="filename" type="hidden" />
<br>
<div id="upload_prev"></div>
<% end %>




<script type="text/javascript">
  $(document).on('click', '.close', function() {
  $(this).siblings("img").toggle();
})

document.getElementById("uploadBtn").onchange = function() {
  document.getElementById("uploadFile").value = this.value;
};

document.getElementById('uploadBtn').onchange = uploadOnChange;

function uploadOnChange() {
  var filename = this.value;
  var lastIndex = filename.lastIndexOf("\\");
  if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
  }
  var files = $('#uploadBtn')[0].files;
  for (var i = 0; i < files.length; i++) {
    (function(i) {
      $("#upload_prev").append('<div><br><div class="col-md-10"><span class="uploadFiles">' + '<a href="">' + files[i].name + '</a>' + '</span></div><div class="col-md-2"><p class="close" style="font-size: 13pt;">削除</p><br></div></div>');
      $("#upload_prev a:contains(" + files[i].name + ")")
        .on("click", function(e) {
          e.preventDefault();
          var close = $(this).closest("div")
            .next("div")
            .find(".close");
          if (!$(this).closest("div")
            .next("div").find("img").length)
            close
            .after(
              $("<img>", {
                src: URL.createObjectURL(files[i])
              })
            )
          else
            close.siblings("img").toggle()
        })
    })(i);
  }

  document.getElementById('filename').value = filename;
}
</script>

==================================================================

https://stackoverflow.com/questions/14069421/show-an-image-preview-before-upload



<%= form_with(model: master, local: true) do |form| %>
  <% if master.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(master.errors.count, "error") %> prohibited this master from being saved:</h2>

      <ul>
      <% master.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :title %>
    <%= form.text_field :title %>
  </div>

  <div class="field">
    <%= form.label :description %>
    <%= form.text_area :description %>
  </div>

  <div class="field">
    <%= form.label :image %>
    <%= form.file_field :image, id: "fileUpload", :multiple => true %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
  <!-- <input id="fileUpload" type="file" multiple /> -->
  <div id="image-holder"></div>
<% end %>


<script type="text/javascript">
  $("#fileUpload").on('change', function () {

     //Get count of selected files
     var countFiles = $(this)[0].files.length;

     var imgPath = $(this)[0].value;
     var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
     var image_holder = $("#image-holder");
     image_holder.empty();

     if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
         if (typeof (FileReader) != "undefined") {

             //loop for each file selected for uploaded.
             for (var i = 0; i < countFiles; i++) {

                 var reader = new FileReader();
                 reader.onload = function (e) {
                     $("<img />", {
                         "src": e.target.result,
                             "class": "thumb-image"
                     }).appendTo(image_holder);
                 }

                 image_holder.show();
                 reader.readAsDataURL($(this)[0].files[i]);
             }

         } else {
             alert("This browser does not support FileReader.");
         }
     } else {
         alert("Pls select only images");
     }
 });
</script>