I am looking to display the uploaded images in a div while maintaining their width, height, and spacing between them. They should also be horizontally scrollable if they overflow the div.
document.querySelector("#files").addEventListener("change", (e) => {
if (window.File && window.FileReader && window.FileList && window.Blob) {
const files = e.target.files;
const output = document.querySelector("#result");
const div = document.createElement("ul");
for(let i = 0; i < files.length; i++){
if (!files[i].type.match("image")) continue;
const picReader = new FileReader();
picReader.addEventListener("load", function(event) {
const picFile = event.target;
const div = document.createElement("div");
div.innerHTML = `<img class="thumbnail" src="${picFile.result}" title="${picFile.name}"/>`;
output.appendChild(div);
})
picReader.readAsDataURL(files[i]);
}
} else {
alert("Your browser does not support File API")
}
})#result {
display: flex;
margin-top: -60px;
margin-left: 70px;
height: 65px;
background-color: yellow;
width: 80%;
overflow-x:auto;
overflow-y:hidden;
}
.thumbnail {
height: 60px;
width: 60px;
border-radius: 6px;
}<div id="result"> </div>