Issue
<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.
Solution
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>
Answered By - Hezy Ziv
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.