I display images before submitting a button it looks like this [one after the other images][1] [1]: https://i.stack.imgur.com/3K97G.jpg

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>

CodePudding user response：

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>