JSFiddle - React, Tailwind, and code Playground

by moshfeu

HTML

<label for="multipleImageUpload">Upload your Image</label>
<input accept="image/*" type="file" name="multiple_images[]" size=20 id="multipleImageUpload" class="multipleImageUpload" style="display:none" multiple>
<div class="imgPreview">
</div>
<div id="multipleFilesPH"></div>

JavaScript

$(function() {

  // Multiple images preview with JavaScript
  var multiImgPreview = function(input, imgPreviewPlaceholder, clonedInput) {

    if (input.files) {
      $("#multipleImageUpload").on("change", function(e) {
        var filesAmount = input.files.length;

        for (i = 0; i < filesAmount; i++) {
          var reader = new FileReader();

          reader.onload = function(event) {
            $("<span class=\"pip\">" +
              "<span class=\"remove_icon\">Remove</span>" +
              "<img src=\"" + event.target.result + "\" title=\"" + "\"/>" +
              "</span>").appendTo(imgPreviewPlaceholder);

            $(".remove_icon").click(function() {
              $(this).parent(".pip").remove();
              console.log(1111, clonedInput);
              clonedInput.remove();
            });
          }

          reader.readAsDataURL(input.files[i]);
        }
      });
    }
  };


  $(document).on('click', '#multipleImageUpload', function() {


    //clone

    var originalInput = $(this),
      cloned = originalInput.clone();
      
    // add to preview
    multiImgPreview(this, 'div.imgPreview', originalInput);


    // move
    originalInput.attr("id", Date.now());
    originalInput.removeClass('multipleImageUpload');
    originalInput.appendTo($('#multipleFilesPH'));

    cloned.attr("id", "multipleImageUpload");
    cloned.insertAfter($('#multipleFilesPH'));

    originalInput = null;
    cloned = null;

  });
});