Javascript Upload function

Question

I have a javascript function to upload. In HTML I have 3 boxes created to insert the images, however when I choose some images to upload, it does not fill me the first 3 boxes (the ones created in HTML) and creates others after those 3. Does anyone know the reason? I always want to insert in the 3 that are created, if you choose 4 it just has to create 1 more.

Codepen

Javascript

$(document).ready(function() {
  document.getElementById('pro-image').addEventListener('change', readImage, false);

  $(".preview-images-zone").sortable();

  $(document).on('click', '.image-cancel', function() {
    let no = $(this).data('no');
    $(".preview-image.preview-show-" + no).remove();
  });
});

var num = 4;

function readImage() {
  if (window.File && window.FileList && window.FileReader) {
    var files = event.target.files; //FileList object
    var output = $(".preview-images-zone");

    for (let i = 0; i < files.length; i++) {
      var file = files[i];
      if (!file.type.match('image')) continue;

      var picReader = new FileReader();

      picReader.addEventListener('load', function(event) {
        var picFile = event.target;
        var html = '<div class="preview-image preview-show-' + num + '">' +
          '<div class="image-cancel" data-no="' + num + '">x</div>' +
          '<div class="image-zone"><img id="pro-img-' + num + '" src="' + picFile.result + '"></div>' + '</div>';

        output.append(html);
        num = num + 1;
      });

      picReader.readAsDataURL(file);
    }
    $("#pro-image").val('');
  } else {
    console.log('Browser not support');
  }
}

Answer 1

To fix your code you can make the following changes:

var num = 1;

function readImage() {
    // ...
    $(".preview-image.preview-show-" + num).remove();
    output.prepend(html);
    // ...
}

If you remove all images you'll end up in a state where there are no placeholders anymore, I'm not sure if this is desired.

Edit

I found a way using your code to get the desired result of always having 3 placeholders. Remove all placeholders in HTML and use this JS code:

var output = $(".preview-images-zone");
var num = 1;

$(document).ready(function() {
  document
    .getElementById("pro-image")
    .addEventListener("change", readImage, false);
  output.append(createNewPreview(num++));
  output.append(createNewPreview(num++));
  output.append(createNewPreview(num++));
  output.sortable();

  $(document).on("click", ".image-cancel", function() {
    removePreview($(this).data("no"));
  });
});

function removePreview(n) {
  if (n) {
    $(".preview-image.preview-show-" + n).remove();
  } else if ($(".preview-image").length > 3) {
    const placeholders = $(".preview-image img:not([src])");
    if (placeholders.length) {
      placeholders
        .eq(0)
        .closest(".preview-image")
        .remove();
    }
  }

  if ($(".preview-image").length < 3) {
    output.append(createNewPreview(num++));
  }
}

function createNewPreview(id, src) {
  return $(
    `<div class="preview-image preview-show-${id}">
  <div class="image-cancel" data-no="${id}">x</div>
  <div class="image-zone"><img id="pro-img-${id}" ${
      src ? `src="${src}"` : ""
    }></div>
</div>`
  );
}

function readImage() {
  if (window.File && window.FileList && window.FileReader) {
    var files = event.target.files; //FileList object
    var output = $(".preview-images-zone");

    for (let i = 0; i < files.length; i++) {
      var file = files[i];
      if (!file.type.match("image")) continue;

      var picReader = new FileReader();

      picReader.addEventListener("load", function(event) {
        output.prepend(createNewPreview(num, event.target.result));
        num++;
        removePreview();
      });

      picReader.readAsDataURL(file);
    }
    $("#pro-image").val("");
  } else {
    console.log("Browser not support");
  }
}