This is an issue when using FileReader#readAsArrayBuffer() or FileReader#readAsText() without additional parameters, as these can be replaced with simpler Promise-based alternatives.

Why is this an issue?

The FileReader API was designed before promises became standard in JavaScript. It requires verbose callback-based code with event listeners for 'load' and 'error' events.

The newer Blob#arrayBuffer() and Blob#text() methods return promises directly, making the code much cleaner and easier to understand. They eliminate the need for:

• Creating FileReader instances
• Setting up event listeners
• Wrapping everything in Promise constructors
• Handling both success and error callbacks

This modernization improves code readability and reduces the chance of errors in promise handling. The newer methods are well-supported in modern browsers and provide the same functionality with less boilerplate code.

What is the potential impact?

Using outdated FileReader patterns makes code unnecessarily complex and harder to maintain. The verbose callback-based approach increases the likelihood of errors in promise handling and makes the codebase less consistent with modern JavaScript practices.

How to fix?

Replace FileReader#readAsArrayBuffer() with the simpler Blob#arrayBuffer() method that returns a promise directly.

Non-compliant code example

const arrayBuffer = await new Promise((resolve, reject) => {
  const fileReader = new FileReader();
  fileReader.addEventListener('load', () => {
    resolve(fileReader.result);
  });
  fileReader.addEventListener('error', () => {
    reject(fileReader.error);
  });
  fileReader.readAsArrayBuffer(blob); // Noncompliant
});

Compliant code example

const arrayBuffer = await blob.arrayBuffer();

Documentation

• eslint-plugin-unicorn - Rule prefer-blob-reading-methods
• Blob.arrayBuffer() - MDN - Documentation for the modern Blob.arrayBuffer() method
• Blob.text() - MDN - Documentation for the modern Blob.text() method
• FileReader - MDN - Documentation for the legacy FileReader API