The browser File API in the quite powerful, the requirement of modern website is not just text and images but also video, sound and other binary formats, this has led to an improved support for handling files directly in the browser.

In this article we’ll have a look of how to use the FileReader to read the first four bytes of a file to determine the mime type of the file. This will give us a more accurate way to tell the mime type, and not just examining the file extension, which is browser default behaviour.

Two of the files is missing extension and one has an incorrect one. By using magic number we can still get the correct mime type

What is magic numbers and how to use them

Magic numbers, or file signatures is a byte pattern inside a file that is used to determine which kind of file you are dealing with. In our example we are reading the first four bytes.

A constant numerical or text value used to identify a file format or protocol — Wikipedia

You can read more about file signatures at Wikipedia and Whatwg.

Why not use the file object type

The default browser file type implementation only uses the file extension to determine the file type, in most cases this works pretty well. It doesn’t work very well when the extension is missing or if it’s incorrect.

Using FileReader API

Pretty much 100% support in modern browsers

The support in browsers for files and FileReader is pretty much 100%. It’s only opera mini that doesn’t support FileReader.

How to get the magic number using JavaScript and FileReader

In this example we are using a basic file input to let the user select a file. The steps to calculate mime type for a file in this example would be:

The user selects a file Take the first 4 bytes of the file using the slice method Create a new FileReader instance Use the FileReader to read the 4 bytes you sliced out as an array buffer. Since the array buffer is just a generic way to represent a binary buffer we need to create a TypedArray, in this case an Uint8Array. With a TypedArray at our hands we can retrieve every byte and transform it to hexadecimal (by using toString(16)). We now have a way to get the magic numbers from a file by reading the first four bytes. The final step is to map it to a real mime type.

An example

JSFiddle

Try this out or experiment using this JSFiddle

Code

This example should be runnable directly in your browser.

This is one use case of FileReader API. If you build websites which allows users to upload some types of files, this would be the most secure and accurate way to go.

This is just an example, to run this on a serious website you should definitely go over all known magic numbers that you want to support.

Learn more