How to check file MIME type with JavaScript before upload?

In this digital era, uploading files has become a fundamental aspect of web applications. It's crucial to verify the MIME type of uploaded files to ensure that they conform to the server's expectations and avoid unnecessary resource wastage.

Despite initial skepticism, JavaScript empowers us to readily check file MIME types on the client side. This article will delve into the how-tos, armed with a practical demonstration and a comprehensive list of widely used file signatures.

Setting the Stage

Before embarking on the technicalities, we'll first establish a foundation. File and Blob APIs are indispensable for file manipulation in JavaScript. Fortunately, these APIs enjoy widespread support across major browsers.

Step 1: Extracting File Information

To retrieve information about selected files, we can leverage input elements:

var input = document.getElementById("file-input");

input.addEventListener("change", function(e) {
  var files = e.target.files;
  
  // Iterate through the 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");
  }
});

Step 2: Determining MIME Type

There are two approaches to determine the MIME type:

• Quick Method: The JavaScript Blob object inherently provides a MIME type property:

var blob = files[i]; // File from Step 1
console.log(blob.type);

• Header Inspection Method: For a more reliable approach, we can inspect the file header:

var blob = files[i]; // File from Step 1
var fileReader = new FileReader();

fileReader.onloadend = function(e) {
  var header = "";
  
  // Extract the first four bytes of the file
  var arr = (new Uint8Array(e.target.result)).subarray(0, 4);
  for (var i = 0; i < arr.length; i++) {
    header += arr[i].toString(16);
  }
  
  console.log(header);
};

fileReader.readAsArrayBuffer(blob);

Next, we need to match the obtained header against known file signatures to determine the MIME type.

Common File Signatures

Once the MIME type is identified, we can accept or reject the file upload based on predefined criteria.

Demo Showcase

To illustrate the concepts discussed, here's a working demo:

// Get file header
function getFileHeader(blob, callback) {
  var fileReader = new FileReader();
  fileReader.onloadend = function(e) {
    var arr = (new Uint8Array(e.target.result)).subarray(0, 4);
    var header = "";
    for (var i = 0; i < arr.length; i++) {
      header += arr[i].toString(16);
    }
    callback(header);
  };
  fileReader.readAsArrayBuffer(blob);
}

// Determine MIME type
function getMimeType(header) {
  switch (header) {
    case "89504e47":
      return "image/png";
    case "47494638":
      return "image/gif";
    case "ffd8ffe0":
    case "ffd8ffe1":
    case "ffd8ffe2":
      return "image/jpeg";
    default:
      return "unknown";
  }
}

// Handle file selection
document.getElementById("file-input").addEventListener("change", function(e) {
  var file = e.target.files[0];
  getFileHeader(file, function(header) {
    var mimeType = getMimeType(header);
    console.log("File: " + file.name);
    console.log("MIME Type: " + mimeType);
  });
});

Benefits of Client-Side MIME Type Checking

1. Reduced Server Load: Eliminates unnecessary server requests for invalid files.
2. Enhanced User Experience: Prevents frustrating error messages and delays caused by uploading incompatible files.
3. Robust File Validation: Ensures files adhere to server expectations, minimizing security and integrity risks.

Conclusion

JavaScript offers an effective means of checking file MIME types on the client side, complementing server-side validation. By leveraging the File and Blob APIs, developers can efficiently determine a file's MIME type, enhancing the security, efficiency, and user experience of their web applications.

The above is the detailed content of How can I check a file's MIME type using JavaScript before uploading it?. For more information, please follow other related articles on the PHP Chinese website!