Make File Uploader/Preview Handle Multiple Files

I did quick Codesandbox example from your Codepen

Yes, you just need to iterate over your files and for each file add a preview. You can use for loop or just use Array.from and then .forEach (because FileList is not really an array, you need to convert it to array first to be able to use array inbuilt methods)

    Array.from(fileUploader.files).forEach((file) => {
      updateThumbnail(dropZone, file);
    });

As for previews and updateThumbnail function - it all depends on how you want to use it. If you want users to be able to add more files after first selection then you can just append new previews. If you want to clear the old ones if the user select new ones then you would need to delete old previews. Or maybe you could add "Delete" button for each preview so the user could delete one of them after adding.

Here is the variant when you just want to append new previews:

function updateThumbnail(dropZone, file) {
  if (file.type.startsWith('image/')) {
    var reader = new FileReader();

    reader.readAsDataURL(file);

    reader.onload = () => {
      var thumbnailElement = document.createElement('img');
      thumbnailElement.classList.add('drop-zone__thumb');
      thumbnailElement.src = reader.result;
      showSelectedImages.appendChild(thumbnailElement);
    };
  }
}

For drop you basically do the same:

dropZone.addEventListener('drop', (e) => {
  e.preventDefault();

  // .. do whatever you want or need here

  Array.from(e.dataTransfer.files).forEach((file) => {
    updateThumbnail(dropZone, file);
  });
});

As you can see functions for handling drop and select are quite similar, you can even make separate function which accepts fileList and then do something with it, so would not need to duplicate your code for both cases.

Made some minor changes to @Danila's version

Most notable differences is the use of es6 and a way to load image faster using URL.createObjectURL. The File reader is pretty much a legecy thing now when there is object urls + new promise based read methods on the prototype itself. Using bae64 is a waste of time decoding/encoding to/from base64

https://codesandbox.io/s/httpsstackoverflowcomquestions68416563-forked-o5spy?file=/src/index.js

import "./styles.css";

// Query all needed elements in one go
const [dropZone, showSelectedImages, fileUploader] = document.querySelectorAll(
  "#standard-upload-files, #drop-zone, #show-selected-images"
);

dropZone.addEventListener("click", (evt) => {
  // assigns the dropzone to the hidden input element so when you click 'select files' it brings up a file picker window
  fileUploader.click();
});

// Prevent browser default when draging over
dropZone.addEventListener("dragover", (evt) => {
  evt.preventDefault();
});

fileUploader.addEventListener("change", (evt) => {
  // Clear the already selected images
  showSelectedImages.innerHTML = "";
  // this function is further down but declared here and shows a thumbnail of the image
  [...fileUploader.files].forEach(updateThumbnail);
});

dropZone.addEventListener("drop", (evt) => {
  evt.preventDefault();
  // Clear the already selected images
  showSelectedImages.innerHTML = "";

  // assign dropped files to the hidden input element
  if (evt.dataTransfer.files.length) {
    fileUploader.files = evt.dataTransfer.files;
  }

  // function is declared here but written further down
  [...evt.dataTransfer.files].forEach(updateThumbnail);
});

// updateThumbnail function that needs to be able to handle multiple files
function updateThumbnail(file) {
  if (file.type.startsWith("image/")) {
    const thumbnailElement = new Image();
    thumbnailElement.classList.add("drop-zone__thumb");
    thumbnailElement.src = URL.createObjectURL(file);
    showSelectedImages.append(thumbnailElement);
  }
} // end of 'updateThumbnail' function