How to generate a thumbnail image after adding an image inside an input type=“file” in a form and submitting them both on the same form

Question

I have a form which allows the user to upload a picture. After the user has submitted the form, I\'d like to generate on the front-end a thumbnail for each picture and then

Answer 1

Thought it might be worth adding a more contemporary answer and citing MDN Web Docs.

You can add an event listener for "change" on the input element and then show a thumbnail of the selected image by accessing the file list through this.files (as shown in an MDN examples). Here is a recent implementation of mine. uploadWatermark is an

uploadWatermark.addEventListener('change', function(){
  const file = this.files[0];
  if (file.type.startsWith('image/')) {
    const img = document.createElement('img');
    const watermarkPreview = document.getElementById("uploaded-watermark");

    img.classList.add("prev-thumb");
    img.file = file;
    watermarkPreview.appendChild(img);

    const reader = new FileReader();
    reader.onload = (function(aImg) { return function(e) { aImg.src =   e.target.result; }})(img);
    reader.readAsDataURL(file);
  }
  
});