How to Upload and Preview Multiple Images — JavaScript

A step by step guide on uploading multiple images on the frontend

How to upload and display multiple images? I’ll break down all the steps needed to do this easily and efficiently with JavaScript. Before we begin, I want to be clear that we’ll only be uploading the images on the frontend and not the backend (also known as the server). If you want to learn the latter, read this guide instead (teaching you how to do it with Node.js).

What’s the difference? Uploading images on the frontend enables you to preview images and sending them to the backend enables you to save them. Both parts of the equation are equally important as you can’t build a fully functioning image uploading system without both. If your a beginner, I highly recommend you learn how to upload them on the frontend first. If you have some experience with a server side technology like Node.js or Spring Tools then by all means skip this story and go straight to the one I linked above.

For those who stay, this is what you’ll build:

Let’s get started.

HTML:

Create an input and output element. Notice the input has an attribute of multiple, this is needed in order to upload multiple files. We also included an attribute of accept so the user can only upload images of type JPEG, PNG, and/or JPG. The purpose of the output element is simply to act as a container to display the images.

<input type="file" multiple="multiple" accept="image/jpeg, image/png, image/jpg">
<output></output>

JavaScript:

Access the input and output elements created in the HTML file. Also create an array named imagesArray that stores the uploaded images.

const output = document.querySelector("output")
const input = document.querySelector("input")
let imagesArray = []

Add a change event listener to the input field that activates whenever the user uploads images.

input.addEventListener("change", () => {
 
})

Each time they do, grab the images using input.files and store them in a variable named files.

input.addEventListener("change", () => {
   const files = input.files
})

Run a for loop on files to access each image and store it inside the imagesArray.

input.addEventListener("change", () => {
  const files = input.files
  for (let i = 0; i < files.length; i++) {
    imagesArray.push(files[i])
  }
})

Now let’s make a function call to displayImages, a function that will display the images on the screen.

input.addEventListener("change", () => {
  const files = input.files
  for (let i = 0; i < files.length; i++) {
    imagesArray.push(files[i])
  }
  displayImages()
})

Let’s build the displayImages function now. Inside, create a variable named images that will hold the dynamic HTML for each image.

function displayImages() {
  let images = ""
}

Now traverse the imagesArray by using forEach.

function displayImages() {
  let images = ""
  imagesArray.forEach((image, index) => {
    
  })
}

For each image, create a div with a class name of image and a img tag that holds the URL for the image. Creating a URL for an image is easy, just pass the image as a parameter into URL.createObjectURL. Also create a function named deleteImage that removes the image from the screen.

function displayImages() {
  let images = ""
  imagesArray.forEach((image, index) => {
    images += `<div class="image">
                <img src="${URL.createObjectURL(image)}" alt="image">
                <span onclick="deleteImage(${index})">&times;</span>
              </div>`
  })
}

Now set the innerHTML of the output element to the images variable. This will display the images on the screen.

function displayImages() {
  let images = ""
  imagesArray.forEach((image, index) => {
    images += `<div class="image">
                <img src="${URL.createObjectURL(image)}" alt="image">
                <span onclick="deleteImage(${index})">&times;</span>
              </div>`
  })
  output.innerHTML = images
}

We’re almost done, we just need to complete the deleteImage function. Notice that we have index coming in as a parameter, use it to remove the respective image from the imagesArray and call on the displayImages function to display the updated images on the screen.

function deleteImage(index) {
  imagesArray.splice(index, 1)
  displayImages()
}

CSS:

I won’t dive into what each line of code of CSS is doing as it merely acts as the design but feel free to customize this to your liking.

output{
  width: 100%;
  min-height: 150px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 15px;
  position: relative;
  border-radius: 5px;
}

output .image{
  height: 150px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  position: relative;
}

output .image img{
  height: 100%;
  width: 100%;
}

output .image span {
  position: absolute;
  top: -4px;
  right: 4px;
  cursor: pointer;
  font-size: 22px;
  color: white;
}

output .image span:hover {
  opacity: 0.8;
}

output .span--hidden{
  visibility: hidden;
}

Like this story? Applaud and a comment below. Also don’t forget to check out my other stories related to uploading images with JavaScript.

How to Upload and Preview Images — JavaScript

How to Drag & Drop Images — JavaScript

How to Upload Images to a Server with Node.js and Multer — JavaScript

…. or watch the best image uploading system tutorial on the internet below.