Unable to display multiple uploaded images in HTML

I’m trying to upload multiple images onto my webpage but I’m having trouble understanding how to get a valid URL for the source of the image and to check if the number of files uploaded is correct. How should I go about doing so? Here is a sample of the code I have written:

<div id = "image_display">
    <input type="file" id="image" name="image" multiple>
</div>
const img = document.getElementById('image');
const display = document.getElementById('image_display');

img.onchange = evt =>{
    const [file] = img.files;
    if(file){
        const newImg = document.createElement('img',{
            src : URL.createObjectURL(file)
        })
        display.appendChild(newImg)
    }
}

Answer

You need to break-up the creation of the image.

  1. use document.createElement to create the image

  2. set the new image’s src

     const newImg = document.createElement('img');
     newImg.src = URL.createObjectURL( file );