How to use file type npm module client side

In JavaScript, detecting file types on the client-side using file-type requires importing the file-type library first. This library enables reading the binary data of files and analyzing it to determine the actual file type. Here are the steps to use the file-type library for file type detection:

Install the file-type library. If you're working with a modern frontend project, you might use npm or yarn to install it. You can run the following command to install it:

bash
npm install file-type
# or
yarn add file-type

Import the file-type module. In your JavaScript module, you can import file-type using import.

javascript
import fileType from 'file-type';

Read the file. In the browser, you typically use <input type="file"> to let users select a file and then use the FileReader API to read its binary data.
Use the file-type library to detect file types. file-type accepts a Buffer or Uint8Array and returns an object containing information about the file type.

Here is a complete example demonstrating how to use file-type in the browser to detect the file type of a user-selected file:

html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>File Type Detection</title>
</head>
<body>

<input type="file" id="fileInput">

<script type="module">
    import fileType from 'file-type/browser';

    document.getElementById('fileInput').addEventListener('change', async (event) => {
        const file = event.target.files[0];
        if (!file) {
            console.log("No file selected!");
            return;
        }

        const arrayBuffer = await file.arrayBuffer();
        const typedArray = new Uint8Array(arrayBuffer);

        const result = await fileType.fromBuffer(typedArray);

        if (result) {
            console.log(`File type: ${result.mime}`);
            console.log(`File extension: ${result.ext}`);
        } else {
            console.log("Could not determine the file type.");
        }
    });
</script>

</body>
</html>

In the above code, we first create a file input element in the HTML file. Then, in the JavaScript module, we import the browser version of file-type and add a change event listener to the file input element. When a user selects a file, we read its content, convert it to a Uint8Array, and use the fromBuffer method of file-type to analyze the array, ultimately outputting the file type information.

Note that updates to the file-type library may alter the API, so you should refer to the latest official documentation when using it.

2024年6月29日 12:07 回复

1个答案

你的答案