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
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
1 2 3 |
<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
1 2 3 4 5 6 7 8 9 10 |
.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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
// 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