Image Upload Function in JavaScript

Other Questions JavaScript
1

I am working on a JavaScript function that handles image uploads. In my HTML layout, I’ve set up three designated slots for images. However, when I try to upload images, the files do not populate these three designated slots. Instead, additional slots are created beyond those initial three. Does anyone have insight into why this is happening? Ideally, if I upload four images, I would like it to utilize the three existing slots and only add one extra slot.

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

  $('.image-display-area').sortable();

  $(document).on('click', '.remove-image', function() {
    const index = $(this).data('index');
    $('.image-preview.image-visible-' + index).remove();
  });
});

let indexCount = 1;

function processFiles() {
  if (window.File && window.FileList && window.FileReader) {
    const selectedFiles = event.target.files; // FileList object
    const displayArea = $('.image-display-area');

    for (let j = 0; j < selectedFiles.length; j++) {
      const currentFile = selectedFiles[j];
      if (!currentFile.type.match('image.*')) continue;

      const fileReader = new FileReader();

      fileReader.addEventListener('load', function(event) {
        const fileData = event.target;
        const markup = '<div class="image-preview image-visible-' + indexCount + '">' +
          '<div class="remove-image" data-index="' + indexCount + '">x</div>' +
          '<div class="image-container"><img id="image-' + indexCount + '" src="' + fileData.result + '"></div>' + '</div>';

        displayArea.append(markup);
        indexCount++;
      });

      fileReader.readAsDataURL(currentFile);
    }
    $('#image-input').val('');
  } else {
    console.error('Browser not support');
  }
}
2

Emma, it looks like your current implementation appends new image slots without checking if existing ones can be used. To ensure that you use the three initial slots first and only add additional ones when necessary, you can modify your JavaScript function like this:

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

  $('.image-display-area').sortable();

  $(document).on('click', '.remove-image', function() {
    const index = $(this).data('index');
    $('.image-preview.image-visible-' + index).remove();
  });
});

function processFiles() {
  if (window.File && window.FileList && window.FileReader) {
    const selectedFiles = event.target.files; // FileList object
    const displayArea = $('.image-display-area');
    const existingSlots = displayArea.children('.image-preview');

    for (let j = 0; j < selectedFiles.length; j++) {
      const currentFile = selectedFiles[j];
      if (!currentFile.type.match('image.*')) continue;

      const targetSlot = existingSlots[j];
      const fileReader = new FileReader();

      fileReader.addEventListener('load', function(event) {
        const fileData = event.target;
        const markup = '
x
' +
          '
';
        
        if (targetSlot) {
          $(targetSlot).html(markup);
        } else {
          displayArea.append('
' + markup + '
');
          indexCount++;
        }
      });

      fileReader.readAsDataURL(currentFile);
    }
    $('#image-input').val('');
  } else {
    console.error('Browser not supported');
  }
}

This approach tries to fill existing slots first. If there are more files than slots, it appends the extra images into new slots. Make sure your initial HTML structure already includes the three slots you mentioned.