HTML Input File Accept Attribute Checker

Common errors

• TypeError: attrAccept is not a function

  cause Incorrect import syntax for CommonJS or ESM environments, or attempting a named import when the library uses a default export.
  fix For ES Modules: `import attrAccept from 'attr-accept';`. For CommonJS: `const attrAccept = require('attr-accept');`.

• My files are being rejected, but they should be accepted based on the accept string!

  cause This can be due to case-sensitivity issues with MIME types (fixed in v2.2.2) or incorrect handling of empty accept arrays (fixed in v2.2.3).
  fix Ensure you are on `attr-accept@2.2.3` or newer to benefit from fixes for case-insensitive MIME type checking and correct handling of empty `accept` parameters.

• Module parse failed: Unexpected token / You may need an appropriate loader to handle this file type.

  cause Your bundler or Node.js environment might be struggling with the ES Module syntax of the library, particularly if you are on an older version and the library's ESM compatibility was not fully robust.
  fix Upgrade to `attr-accept@2.2.1` or newer. If the problem persists, ensure your build tool (e.g., webpack, Rollup) is configured to transpile `node_modules` if targeting older environments that don't natively support ESM.

Warnings

• breaking Version 2.0.0 removed `core-js` from its direct dependencies. Applications targeting older environments that previously relied on `attr-accept` to indirectly provide `core-js` polyfills will now need to explicitly include `core-js` or equivalent polyfills if required.
  Fix: If your application relies on polyfills for older JavaScript features, ensure `core-js` or an alternative polyfill library is included as a direct dependency in your project.
• gotcha Before version 2.2.1, there were known issues with ES module compatibility, potentially leading to import errors or unexpected behavior in certain build environments when using ESM syntax.
  Fix: Upgrade to `attr-accept@2.2.1` or newer to ensure proper ES module compatibility.
• gotcha In versions prior to 2.2.3, if the 'accepted files' parameter was passed as an empty array, it incorrectly prevented all files from being accepted, instead of the intended behavior of accepting any file.
  Fix: Update to `attr-accept@2.2.3` or later to correctly handle empty accept arrays (i.e., accept all files).
• gotcha MIME type checks were case-sensitive in versions prior to 2.2.2. This could lead to valid files being rejected if their reported MIME type had a different casing than the one specified in the `accept` attribute.
  Fix: Upgrade to `attr-accept@2.2.2` or later for case-insensitive MIME type matching, which aligns with standard browser behavior.

Install

• npm install attr-accept npm
• yarn add attr-accept yarn
• pnpm add attr-accept pnpm

Imports

• attrAccept
  wrong:

  const attrAccept = require('attr-accept');

  correct:

  import attrAccept from 'attr-accept';

  The library primarily uses a default export. While CommonJS `require` works, ESM `import` is preferred for modern applications, especially since v2.2.1 improved ESM compatibility.
• attrAccept
  wrong:

  import { attrAccept } from 'attr-accept';

  correct:

  const attrAccept = require('attr-accept');

  For CommonJS environments, use `require` for the default export. Do not use named imports as the primary export is default.
• attrAccept

  import type { File } from 'attr-accept'; // Type definition example, 'File' is a global type

  The library ships with TypeScript type definitions, providing type safety for its function signature. The `File` object itself is a standard Web API global type.

Quickstart

Demonstrates how to use the `attrAccept` function to validate different file types against various 'accept' attribute strings, including MIME types, extensions, and wildcards.

import attrAccept from 'attr-accept';

interface MyFile extends File {
  path?: string;
}

// Example 1: Check a JPEG file against an image accept string
const jpegFile: MyFile = new File([''], 'test.jpeg', { type: 'image/jpeg' });
const acceptsImages = attrAccept(jpegFile, 'image/*');
console.log(`'test.jpeg' accepts 'image/*': ${acceptsImages}`); // true

// Example 2: Check a PDF file against multiple accept types
const pdfFile: MyFile = new File([''], 'document.pdf', { type: 'application/pdf' });
const acceptsDocs = attrAccept(pdfFile, '.pdf, application/msword');
console.log(`'document.pdf' accepts '.pdf, application/msword': ${acceptsDocs}`); // true

// Example 3: Check a text file against a specific extension
const txtFile: MyFile = new File([''], 'notes.txt', { type: 'text/plain' });
const acceptsPng = attrAccept(txtFile, '.png');
console.log(`'notes.txt' accepts '.png': ${acceptsPng}`); // false

// Example 4: Accepting all files if the accept string is empty or undefined (or empty array)
const anyFile: MyFile = new File([''], 'data.json', { type: 'application/json' });
const acceptsAny = attrAccept(anyFile, ''); // or undefined, or []
console.log(`'data.json' accepts an empty accept string: ${acceptsAny}`); // true (since v2.2.3)