How to Check File MIME Type With JavaScript Before Upload

Many websites and web applications allow users to upload files and images of their choice. But it is advisable to check file MIME type before uploading to make sure that the right file type is being used for uploads. For example, if your website allows users to upload images and if a user uploads a large text file instead, it will unnecessarily tax your server. Therefore, it is better to check the file type (MIME type) before uploading the file itself. In this article, we will learn how to check file MIME type with JavaScript before upload.

How to Check File MIME Type With JavaScript Before Upload

You can easily determine the file type of a file using FileReader API available in most web browsers.

Here is a simple JS code snippet to quickly check if web browser supports FileReader. We basically check for support for File and Blob data types, as these cover most file types.

if (window.FileReader && window.Blob) {
    // All the File APIs are supported.
} else {
    // File and Blob are not supported
}

Let us say you have the following input tag for file upload. We have setup an input tag that accepts multiple file uploads. You can remove multiple keyword if you want to upload only one file.

<input type="file" id="my_files" multiple>

Next, add the following JavaScript code to your page.

<script>
var control = document.getElementById("my_files");
control.addEventListener("change", function(event) {
    // When the control has changed, there are new files
    var files = control.files,
    for (var i = 0; i < files.length; i++) {
        console.log("Filename: " + files[i].name);
        console.log("Type: " + files[i].type);
        console.log("Size: " + files[i].size + " bytes");
    }
}, false);
</script>

We have basically added an event listener to our file input element, which is called when ‘change’ event is triggered in our input.

The uploaded files are stored in files property of our input control. We loop through this property and in each iteration display its filename, type and size. Among them, the type property contains MIME information of each file. This is determined using the file extension. For example, the MIME type of file sample.png will be image/png.

This approach is great for most use cases. But it can be fooled if a user simply renames the file with a different extension. In such cases, you may need to check the header information also to determine its MIME type correctly. Each MIME file type has a different set of characters (known as file signature) at the beginning and end. Here is how to retrieve the file signature ( first 4 unsigned characters).

To be honest, checking file signature is unnecessary in most cases and can be avoided. We have included it here only for the sake of completion.

var arr = (new Uint8Array(file[i])).subarray(0, 4);
var header = "";
  for(var i = 0; i < arr.length; i++) {
     header += arr[i].toString(16);
  }

Once you have retrieved the header, you can check it against common file types.

switch (header) {
    case "89504e47":
        type = "image/png";
        break;
    case "47494638":
        type = "image/gif";
        break;
    case "ffd8ffe0":
    case "ffd8ffe1":
    case "ffd8ffe2":
    case "ffd8ffe3":
    case "ffd8ffe8":
        type = "image/jpeg";
        break;
    default:
        type = "unknown"; // Or use blob.type as fallback
        break;
}

In this article, we have learnt how to check file MIME type with JavaScript before upload, on client side. Of course, you also need to validate this information on server side before processing the file. But client side validation saves a lot of time and avoids unnecessary server processing.

How to Check File MIME Type With JavaScript Before Upload

How to Check File MIME Type With JavaScript Before Upload

Related posts:

Leave a Reply Cancel reply