JavaScript method to detect the type of file

We might think of limiting the uploaded file types through the accept attribute of the input element:

<input type="file" id="inputFile" accept="image/png" />

Although this solution can meet most scenarios, if the user changes the suffix of the JPEG format image to .png, this limitation can be successfully overcome. So how should this problem be solved? In fact, we can identify the correct file type by reading the binary data of the file. Before introducing the specific implementation plan, Brother Abao will first introduce the relevant knowledge by taking picture type files as an example.

1. How to view the binary data of an image

To view the binary data corresponding to the image, we can use some ready-made editors, such as WinHex under Windows platform or Synalyze It! Pro hexadecimal editor under macOS platform. Here we use the editor Synalyze It! Pro to view the binary data corresponding to Abao Ge's avatar in hexadecimal format.

2. How to distinguish the types of pictures

Computers do not distinguish different types of images by the image suffix, but by the "magic number". For some types of files, the contents of the first few bytes are fixed, and the type of the file can be determined based on the contents of these bytes.

The magic numbers corresponding to common image types are shown in the following table:

Use Synalyze It! Pro to verify that the type of Abao's avatar (abao.png) is correct:

As can be seen from the above figure, the first 8 bytes of a PNG type image are 0x89 50 4E 47 0D 0A 1A 0A. After you change the abao.png file to abao.jpeg, and then use an editor to view the binary content of the image, you will find that the first 8 bytes of the file remain unchanged. But if you use the input[type="file"] input box to read the file information, the following results will be output:

Obviously, the correct file type cannot be identified by the file extension or the MIME type of the file. Next, Brother Abao will introduce how to ensure the correct image type by reading the binary information of the image when uploading it.

3. How to detect the type of image

3.1 Define the readBuffer function

After obtaining the file object, we can read the contents of the file through the FileReader API. Because we don't need to read the complete information of the file, Abaoge encapsulates a readBuffer function to read the binary data of the specified range in the file.

function readBuffer(file, start = 0, end = 2) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => {
      resolve(reader.result);
    };
    reader.onerror = reject;
    reader.readAsArrayBuffer(file.slice(start, end));
  });
}

For a PNG type image, the first 8 bytes of the file are 0x89 50 4E 47 0D 0A 1A 0A. Therefore, when we detect whether the selected file is a PNG type image, we only need to read the first 8 bytes of data and determine whether the content of each byte is consistent one by one.

3.2 Defining the check function

In order to achieve byte-by-byte comparison and better reuse, Abaoge defines a check function:

function check(headers) {
  return (buffers, options = { offset: 0 }) =>
    headers.every(
      (header, index) => header === buffers[options.offset + index]
    );
}

3.3 Detect PNG image type

Based on the readBuffer and check functions defined above, we can implement the function of detecting PNG images:

3.3.1 HTML code

<div>
   Select file: <input type="file" id="inputFile" accept="image/*"
              onchange="handleChange(event)" />
   <p id="realFileType"></p>
</div>

3.3.2 JS code

const isPNG = check([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]); // Magic number corresponding to PNG image const realFileElement = document.querySelector("#realFileType");

async function handleChange(event) {
  const file = event.target.files[0];
  const buffers = await readBuffer(file, 0, 8);
  const uint8Array = new Uint8Array(buffers);
  realFileElement.innerText = `${file.name}The file type is: ${
    isPNG(uint8Array) ? "image/png" : file.type
  }`;
}

After the above example runs successfully, the corresponding detection results are shown in the following figure:

As can be seen from the above figure, we can successfully detect the correct image format. If you want to detect the JPEG file format, you only need to define an isJPEG function:

const isJPEG = check([0xff, 0xd8, 0xff])

However, what should you do if you want to detect other types of files, such as PDF files? Here we first use the Synalyze It! Pro editor to browse the binary content of the PDF file:

From the above figure, we can see that the first 4 bytes of the PDF file are 0x25 50 44 46, and the corresponding string is %PDF. In order to allow users to more intuitively identify the type of detection, Abaoge defines a stringToBytes function:

function stringToBytes(string) {
  return [...string].map((character) => character.charCodeAt(0));
}

Based on the stringToBytes function, we can easily define an isPDF function as follows:

const isPDF = check(stringToBytes("%PDF"));

With the isPDF function, you can implement the PDF file detection function. However, in actual work, the file types encountered are diverse. In this case, you can use a ready-made third-party library to implement the file detection function, such as the file-type library.

In fact, based on the binary data of the file, in addition to detecting the file type, we can also read the file-related meta information, such as the image size, bit depth, color type and compression algorithm. Let's continue to take Abao's avatar (abao.png) as an example to see the actual situation:

Okay, that’s all about how to detect file types on the front end. In actual projects, for file upload scenarios, for security reasons, it is recommended that you limit the types of file uploads during the development process. For more stringent scenarios, you can consider using the method introduced by Abao to verify the file type.

The above is the details of how JavaScript detects the type of file. For more information about JavaScript detecting the type of file, please pay attention to other related articles on 123WORDPRESS.COM!