Check image width and height before upload using JavaScript

# Table of Contents

# Check image width and height before upload using JavaScript

To check an image's width and height before upload using JavaScript:

Add a change event listener to the file input.
Create an image element and set its src attribute based on the selected image.
Access the width and height attributes of the created image to check its width and height.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin: 100px;
      }
    </style>
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <input id="file-input" type="file" accept="image/*" />

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const fileInput = document.getElementById('file-input');

fileInput.addEventListener('change', event => {
  if (fileInput.files.length > 0) {
    const img = document.createElement('img');

    const selectedImage = fileInput.files[0];

    const objectURL = URL.createObjectURL(selectedImage);

    img.onload = function handleLoad() {
      console.log(`Width: ${img.width}, Height: ${img.height}`);

      if (img.width < 100 || img.height < 100) {
        console.log(
          "The image's width or height is less than 100px",
        );
      }

      URL.revokeObjectURL(objectURL);
    };

    img.src = objectURL;

    document.body.appendChild(img);
  }

  fileInput.value = null;
});

check image width and height before upload

The code for this article is available on GitHub

We used the document.getElementById() method to select the file input and added a change event listener to it.

The next step is to create an img element.

index.js

Copied!
const img = document.createElement('img');

You can access the selected from the user image as fileInput.files[0].

index.js

Copied!
const selectedImage = fileInput.files[0];

The URL.createObjectURL() method creates a string containing a URL that represents the supplied object.

The load event of the img element is triggered when the img successfully loads its resource.

Once the resource is loaded, we can access the width and height properties to get the width and height of the image.

index.js

Copied!
const objectURL = URL.createObjectURL(selectedImage);

img.onload = function handleLoad() {
  console.log(`Width: ${img.width}, Height: ${img.height}`);

  if (img.width < 100 || img.height < 100) {
    console.log(
      "The image's width or height is less than 100px",
    );
  }

  URL.revokeObjectURL(objectURL);
};

img.src = objectURL;

The code for this article is available on GitHub

You can use an if statement if you need to check if the image's width or height values meet a certain condition.

Once you're done, call the revokeObjectURL() method to release the object URL and free up resources.

I've also written articles on:

# Check the width and height of multiple images before upload using JavaScript

The same approach can be used to check the width and height of multiple images before uploading using JavaScript.

You have to:

Iterate over the selected files.
Create an img element for each selected file.
Check the values of its width and height properties.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin: 100px;
      }
    </style>
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <input
      id="file-input"
      type="file"
      accept="image/*"
      multiple
    />

    <br />

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const fileInput = document.getElementById('file-input');

fileInput.addEventListener('change', event => {
  if (fileInput.files.length > 0) {
    const files = fileInput.files;

    for (const file of files) {
      const img = document.createElement('img');

      const objectURL = URL.createObjectURL(file);

      img.onload = function handleLoad() {
        console.log(
          `Width: ${img.width}, Height: ${img.height}`,
        );

        if (img.width < 100 || img.height < 100) {
          console.log(
            "The image's width or height is less than 100px",
          );
        }

        URL.revokeObjectURL(objectURL);
      };

      img.src = objectURL;

      document.body.appendChild(img);
    }
  }

  fileInput.value = null;
});

check width and height of multiple images before uploading

The code for this article is available on GitHub

We set the multiple attribute on the input type file so the user can select multiple images by pressing and holding the Ctrl key.

index.html

Copied!
<input
  id="file-input"
  type="file"
  accept="image/*"
  multiple
/>

In the change event handler function, we used a for...of loop to iterate over the collection of files.

The for...of statement is used to loop over iterable objects like arrays, strings, Map, Set and NodeList objects and generators.

On each iteration, we create an img element and set its src attribute to the created object URL.

When the file's contents are read, the load event is triggered and we can safely access the width and height properties of the selected image.

index.js

Copied!
for (const file of files) {
  const img = document.createElement('img');

  const objectURL = URL.createObjectURL(file);

  img.onload = function handleLoad() {
    console.log(
      `Width: ${img.width}, Height: ${img.height}`,
    );

    if (img.width < 100 || img.height < 100) {
      console.log(
        "The image's width or height is less than 100px",
      );
    }

    URL.revokeObjectURL(objectURL);
  };

  img.src = objectURL;

  document.body.appendChild(img);
}

The code for this article is available on GitHub

You can use an if statement if you need to check if the image's width and height satisfy your requirements.

After you're done, call the revokeObjectURL() method to avoid memory leaks.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Check image width and height before upload using JavaScript

# Table of Contents