Javascript masonry-layout Library Example to Show Uploaded Images Using Form Input Element in Browser

Welcome folks today in this blog post we will be using the masonry-layout library to show the uploaded or selected images using the form input element in browser. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

1	<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

First of all we need to include the cdn of the masonry layout library and now we need to define the input field where we allow the users to select the images as shown below

  <input style="position:fixed" type="file" id="file-input" multiple>
    <br><br>
    <div id="masonry-container" class="masonry"></div>

As you can see we have also defined the div container and we have given the masonry class and now we need to style this

.masonry {
  margin: 0 auto;
}

.masonry-item {
  width: 18.33%;
  padding: 10px;
  box-sizing: border-box;
  float: left;
}

.masonry {

margin: 0 auto;

}

.masonry-item {

width: 18.33%;

padding: 10px;

box-sizing: border-box;

float: left;

}

And now we need to define the javascript code where we will be initializing the masonry layout and displaying the selected images as shown below

// Initialize Masonry
var masonry = new Masonry('#masonry-container', {
  itemSelector: '.masonry-item',
  columnWidth: '.masonry-item',
  gutter: 25
});

// Get file input element
var fileInput = document.getElementById('file-input');

// Listen for file input changes
fileInput.addEventListener('change', function() {
  // Get selected files
  var files = fileInput.files;

  // Loop through files
  for (var i = 0; i < files.length; i++) {
    var file = files[i];

    // Create file reader
    var reader = new FileReader();

    // Set reader onload callback
    reader.onload = function(e) {
      // Create image element
      var img = document.createElement('img');
      img.src = e.target.result;
      img.classList.add('masonry-item');

      // Add image element to Masonry container
      masonry.element.appendChild(img);

      // Append new item to Masonry layout
      masonry.appended(img);

      // Layout Masonry container
      masonry.layout();
    };

    // Read file as data URL
    reader.readAsDataURL(file);
  }
});

// Initialize Masonry

var masonry = new Masonry('#masonry-container', {

itemSelector: '.masonry-item',

columnWidth: '.masonry-item',

gutter: 25

});

// Get file input element

var fileInput = document.getElementById('file-input');

// Listen for file input changes

fileInput.addEventListener('change', function() {

// Get selected files

var files = fileInput.files;

// Loop through files

for (var i = 0; i < files.length; i++) {

var file = files[i];

// Create file reader

var reader = new FileReader();

// Set reader onload callback

reader.onload = function(e) {

// Create image element

var img = document.createElement('img');

img.src = e.target.result;

img.classList.add('masonry-item');

// Add image element to Masonry container

masonry.element.appendChild(img);

// Append new item to Masonry layout

masonry.appended(img);

// Layout Masonry container

masonry.layout();

};

// Read file as data URL

reader.readAsDataURL(file);

}

});

As you can see we are looping through all the selected images inside the input field and then we are appending the images to the masonry layout