Html - How can I show different files one under the other when selecting a file?

ckot
December 30, 2023
117 views
3 votes
3 Answers

<div class="selected-file-container align-items-center justify-content-between d-none">
  <div class="selected-file d-flex align-items-center">
     <img id="selectedImage" class="hidden" src="" alt="Selected Image"/>
     <span id="selectedFileName">Filename.jpg</span>
  </div>
  <span>1 MB</span>
</div>
<input type="file" id="fileInput" style="display: none" />
<label for="fileInput" class="choose-file-btn">
  <span>Choose File</span>
</label>

Here, I designed an image selection button with HTML and Bootstrap and an area where an icon can be placed next to the name of the selected image.

<script>
  document.getElementById("fileInput").addEventListener("change", function (event) {
    const selectedFile = event.target.files[0];
    const selectedImageElement = document.getElementById("selectedImage");
    const selectedFileNameElement = document.getElementById("selectedFileName");
    const selectedFileContainer = document.querySelector(".selected-file-container");
    if (selectedFile) {
      const imageIconElement = document.createElement("i");
      imageIconElement.className = "fa-regular fa-image";
      selectedFileNameElement.innerHTML = "";
      selectedFileNameElement.appendChild(imageIconElement);
      selectedFileNameElement.insertAdjacentHTML("beforeend", selectedFile.name);
      selectedImageElement.src = URL.createObjectURL(selectedFile);
      selectedFileContainer.classList.remove("d-none");
      selectedFileContainer.classList.add("d-flex");
    } else {
        // Dosya seçilmediyse selected-file-container'ı gizle
        selectedFileContainer.classList.remove("d-flex");
        selectedFileContainer.classList.add("d-none");
      }
  });
</script>

Here is my script code, in which I select an image with the script and when the image is selected, I add an image icon to the selectedFileContainer and just the name of the selected image (I do not show the image, I use an icon instead).

What I’m trying to do and what I can’t do is this: Let’s say the user selected an image, let it be x.jpg. In the container containing the selectedFileContainer class, there is an icon and the name of the selected image next to it. When the user selects a second image, let’s say it is y.jpg. It overwrites the name x.jpg. What I am trying to do is to list the selectedFileContainer one under the other every time the user adds a new image. Whatever was selected last goes to the bottom. Let them line up in blocks, above the button.

When different images are selected, only the name changes within the same container, as seen in the image. Instead, create selected-file-containers with the name of the selected image one under the other.

Answers

create a separate container for each of the files

document.getElementById("fileInput").addEventListener("change", function (event) {
    const files = event.target.files;
    const filesContainer = document.getElementById("filesContainer");

    for (const file of files) {

        const fileContainer = document.createElement("div");
        fileContainer.className = "selected-file-container align-items-center justify-content-between d-flex";

        const fileDisplay = document.createElement("div");
        fileDisplay.className = "selected-file d-flex align-items-center";

        const imageIconElement = document.createElement("i");
        imageIconElement.className = "fa-regular fa-image";

        const fileNameElement = document.createElement("span");
        fileNameElement.textContent = file.name;

        fileDisplay.appendChild(imageIconElement);
        fileDisplay.appendChild(fileNameElement);
        fileContainer.appendChild(fileDisplay);


        filesContainer.appendChild(fileContainer);
    }


    event.target.value = '';
});

<div id="filesContainer"></div>

<input type="file" id="fileInput" style="display: none" multiple />
<label for="fileInput" class="choose-file-btn">
    <span>Choose File</span>
</label>

So if you want to add more than 1 image you should remove <img> from HTML, because every new image will change the src of the img in HTML.
So every time when you add an image you should create a new element <img>. There is correct JS and HTML code:

document
.getElementById("fileInput")
.addEventListener("change", function (event) {
    const selectedFile = event.target.files[0];

    const selectedImageElement =
        document.getElementById("selectedImage");
    const selectedFileNameElement =
        document.getElementById("selectedFileName");
    const selectedFileContainer = document.querySelector(
        ".selected-file-container"
    );

    if (selectedFile) {
        const imageIconElement = document.createElement("i");
        const image = document.createElement("img");
        image.innerHTML = `<img
            id="selectedImage"
            class="hidden"
            src=""
            alt="Selected Image"
        />`
        image.src = URL.createObjectURL(selectedFile);
        
        imageIconElement.className = "fa-regular fa-image";
    
        selectedFileNameElement.appendChild(image);
        selectedFileNameElement.insertAdjacentHTML(
            "beforeend",
            selectedFile.name
        );

        selectedImageElement.src = URL.createObjectURL(selectedFile);
        selectedFileContainer.classList.add("d-flex");
    } else {
        // Dosya seçilmediyse selected-file-container'ı gizle
        selectedFileContainer.classList.add("d-none");
    }
});

HTML

<div class="selected-file-container align-items-center justify-content-between d-none">
    <div class="selected-file d-flex align-items-center">
        <span id="selectedFileName">Filename.jpg</span>
    </div>
    <span>1 MB</span>
</div>
<input type="file" id="fileInput" style="display: none" />
<label for="fileInput" class="choose-file-btn">
    <span>Choose File</span>
</label>

A simple solution would be to wrap your .selected-file-container in a template tag, and then clone it, add the relevant file data to it before appending it to a container.

const displaySelectedFiles = (event) => {
  const files = event.target.files;
  const container = document.getElementById("file-container");
  const template = document.getElementById("file");
  
  for (file of files) {
    const fileTemplate = template.content.cloneNode(true);
    
    fileTemplate.getElementById("selectedImage").src = URL.createObjectURL(file);
    fileTemplate.getElementById("selectedFileName").textContent = file.name;
  
    container.appendChild(fileTemplate);
  }
}

document.getElementById("fileInput").addEventListener("change", displaySelectedFiles);

.choose-file-btn {
  cursor: pointer;
}

img {
  height: 25px;
}

<template id="file">
 <div class="selected-file-container align-items-center justify-content-between d-none">
    <div class="selected-file d-flex align-items-center">
       <img id="selectedImage" class="hidden" src="" alt="Selected Image"/>
       <span id="selectedFileName">Filename.jpg</span>
    </div>
    <span>1 MB</span>
  </div>
</template>

<input type="file" id="fileInput" multiple style="display: none" />
<label for="fileInput" class="choose-file-btn">
  <span>Choose File</span>
</label>

<div id="file-container"></div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How can I show different files one under the other when selecting a file?

Answers