Image tag not getting src attribute using JS

Question

I am trying to get files from user using <input type="file"/> . Multiple files can be uploaded. After upload I have used this code I found on stack which allows me to show the uploaded images. Initially the code was to upload one image and show it.

For multiple display, I have tried to clone the main div element and assign a new id to it and using the FileReader object I have tried to assign src to image tag. This is my code.

HTML code:

<div id="picsContainer" style="display:flex;">
  <div style="display:none;" id="showPic">
    <img class="file-upload-image" src="#" id="imgTag0" alt="your image" />
    <div class="image-title-wrap">
      <button type="button" onclick="removeUpload()" class="remove-image">Remove <span class="image-title"> Image</span></button>
  </div>
</div>
</div>

JS Code:

function previewImage(element){
    if(element.files[0]){
        console.log(element)
        for(i=0;i<element.files.length;i++){
        var main=document.getElementById("showPic");
            var cloned=main.cloneNode(true)
            const reader = new FileReader();
            console.log(reader)
            reader.readAsDataURL(element.files[i])
            cloned.id="showPic"+i;
            cloned.children[0].id=i;
            reader.onload=()=>{
                cloned.children[0].src=reader.result;
            }
            cloned.style.display="block";
            document.getElementById("picsContainer").appendChild(cloned);
        }
}
}

The function gets called at the time of image upload using onchange. Problem is that in this code only the last added clone element is showing the image preview and all the other elements before that are not even getting anything in their src attribute. It just shows a "#" in src attribute.

What am I doing wrong here?

Answer 1

It seems to me that you might be overwriting your images array, but I can't say for sure without taking a look at the rest of your code.

My suggestion is instead of cloning the div, map your images array and create the comoponents as needed.

Maybe something like this (ES6):

const previewImage = (element) => {
 const container = document.GetElementById('picsContainer')
 const reader = new FileReader();
 return element.file.map((image, index) => {
  // Create a new div
  const element = document.createElement('div')
  element.key = index
  element.id = `showPic${index}`
  element.style.display = 'block'
  // Create the image component
  const img = document.createElement('img')
  element.appendChiled(img)
  reader.readAsDataURL(image)
  reader.onload = () => {
   img.src = reader.result;
  }
  container.appendChild(element)
 }
}

This should work, but if you get any errors let me know and I'll try to help you again. Also, instead of using file reader, you could create a blob for each new image and get a custom url for them.