I display images before submitting a button it looks like this: one after the other images
But I want it to line up as side by side How can I do it? here's my js code
let fileInput = document.getElementById('file-input');
let imageContainer = document.getElementById('images');
function preview() {
imageContainer.innerHTML = '';
for (i of fileInput.files) {
let reader = new FileReader();
let figure = document.createElement('figure');
let figCap = document.createElement('figcaption');
figCap.innerText = i.name;
figure.appendChild(figCap);
reader.onload = () => {
let img = document.createElement('img');
img.setAttribute('class', 'col-sm-5');
img.setAttribute('src', reader.result);
figure.insertBefore(img, figCap);
};
imageContainer.appendChild(figure);
reader.readAsDataURL(i);
}
}
here's my HTML code
<div class="form-group col-md-12">
<label>File upload</label>
<div class="input-group col-xs-12">
<input type="file" accept="image/*" id="file-input" onchange="preview()"
class="form-control btn btn-primary mb-xl-4" multiple>
</div>
<div class="row">
<div class="form-group col-md-12">
<div id="images" onclick="myFunc()">
</div>
I hope this will solve your problem, adding col-sm-5 to figure tag and setting the width for image;
let fileInput = document.getElementById("file-input");
let imageContainer = document.getElementById("images");
function preview() {
imageContainer.innerHTML = "";
for (i of fileInput.files) {
let reader = new FileReader();
let figure = document.createElement("figure");
let figCap = document.createElement("figcaption");
figCap.innerText = i.name;
figure.appendChild(figCap);
reader.onload = () => {
let img = document.createElement("img");
figure.setAttribute("class", 'col-sm-5');
img.setAttribute("src", reader.result);
img.style.width = "inherit";
figure.insertBefore(img, figCap);
}
imageContainer.appendChild(figure);
reader.readAsDataURL(i);
}
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="form-group col-md-12">
<label>File upload</label>
<div class="input-group col-xs-12">
<input type="file" accept="image/*" id="file-input" onchange="preview()" class="form-control btn btn-primary mb-xl-4" multiple>
</div>
<div class="row">
<div class="form-group col-md-12">
<div class="row" id="images" onclick="myFunc()">
</div>
</div>
</div>
</div>