Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • PDF Invoice Generator
Menu

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

Posted on March 26, 2023

 

 

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

 

 

CSS
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

 

 

JavaScript
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

 

 

 

 

Recent Posts

  • Node.js Express Project to Remove Background of Images Using Rembg & Formidable Library in Browser
  • Node.js Tutorial to Remove Background From Image Using Rembg & Sharp Library in Command Line
  • Python 3 Flask Project to Remove Background of Multiple Images Using Rembg Library in Browser
  • Python 3 Rembg Library Script to Bulk Process Multiple Images and Remove Background in Command Line
  • Python 3 Rembg Library Script to Remove Background From Image in Command Line
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme