Check Image Width, Height and its Type before Uploading using JavaScript

← PrevNext →

If, a web application (that you are working on) requires uploading of images (or files), then it is important to do some validations on the files before uploading. Here in this post, I’ll show how quickly and efficiently you can check the width, height and format of multiple images using plain JavaScript.
See this demo

👉  You can also do this using jQuery. However, knowing how to do this using plain JavaScript is always good.

Along with the image width, height and its format, I’ll show you how to check the file’s last modified date.

You may also like... FileReader API – Resize an Image on your Computer with FileReader and HTML5 Canvas without Losing Image Quality

The Markup

In my markup section, I have an input box of type file. I want to check multiple files at a time, therefore I have added the multiple attribute to the input type.

I’ll check the details of the file(s) as soon as I select it. Therefore, I am using the onchange event to call a function to check the file details.

<html>
<body>
    <input type="file" id="file" multiple onchange="checkFileDetails()" accept="image/*" />
    <p id="fileInfo"></p>   <!--show the details-->
</body>

👉 Also try this... How to add text to an image and save the image using CSS and JavaScript.
Add text to image and save the image

The Script
<script>
  function checkFileDetails() {
    var fi = document.getElementById('file');
    if (fi.files.length > 0) {      // FIRST CHECK IF ANY FILE IS SELECTED.

      for (var i = 0; i <= fi.files.length - 1; i++) {
        var fileName, fileExtension, fileSize, fileType, dateModified;

        // FILE NAME AND EXTENSION.
        fileName = fi.files.item(i).name;
        fileExtension = fileName.replace(/^.*\./, '');

        // get image info using fileReader()
        readImageFile(fi.files.item(i));
      }

      // GET THE IMAGE WIDTH AND HEIGHT USING fileReader() API.
      function readImageFile(file) {
        var reader = new FileReader();    // Create a new instance.

        reader.onload = function (e) {
          var img = new Image();      
          img.src = e.target.result;

          img.onload = function () {
            var w = this.width;
            var h = this.height;

            document.getElementById('fileInfo').innerHTML =
              document.getElementById('fileInfo').innerHTML + '<br /> ' +
              'Name: <b>' + file.name + '</b> <br />' +
              'File Extension: <b>' + fileExtension + '</b> <br />' +
              'Size: <b>' + Math.round((file.size / 1024)) + '</b> KB <br />' +
              'Width: <b>' + w + '</b> <br />' +
              'Height: <b>' + h + '</b> <br />' +
              'Type: <b>' + file.type + '</b> <br />' +
              'Last Modified: <b>' + file.lastModifiedDate + '</b> <br />';
          }
        };
        reader.readAsDataURL(file);
      }
    }
  }
</script>
</html>
Try it

First, I’ll create a file object and loop through each files in the object. To get the file extension, I am using the replace() method with Regular Expressions.

Do you know... there are 3 simple ways to find the File extension in JavaScript.

The HTML DOM item() method provides some properties, using which you can get other details of the file(s). For example, add the below code inside the for loop.

console.log(fi.files.item(i));

The size property returns the file size in bytes. I am converting it into KB or Kilo Bytes by dividing it with 1024. Since 1 Kilo Byte equals 1024 bytes.

Math.round((fsize / 1024))

However, if its an image file, we'll have to use the fileReader API to get the width and height of image.

See this demo

And, if you want you can do this using a super-duper method using jQuery. Check this out.

Happy coding. 😀

← PreviousNext →