attr-accept

library2.2.5jsnpmunverified

attr-accept is a lightweight JavaScript utility that implements the logic of the HTML5 `<input type="file">` `accept` attribute. It provides a function to programmatically check if a given `File` object matches the criteria specified by an `accept` string, which can include MIME types (e.g., `image/*`, `application/pdf`), file extensions (e.g., `.jpg`, `.png`), and wildcards. The current stable version is 2.2.5. The library maintains a steady, though not rapid, release cadence, primarily focusing on bug fixes and minor improvements. Its key differentiator is providing a robust, standalone, and browser-compatible implementation of a browser's native file acceptance logic, making it suitable for custom file upload components, especially in libraries like react-dropzone.

web-framework serialization

npm install attr-accept

github ↗package ↗

INSTALL

IMPORT

SIG · ATTR-ACCEPT

attr-accept

web-frameworkjavascriptv2.2.5

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

attrAccept

✓ import attrAccept from 'attr-accept';

✗ const attrAccept = require('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

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

✗ import { attrAccept } from '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.

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)

Debug

Known issues

breakingVersion 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.

affects: >=2.0.0

gotchaBefore 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.

affects: <2.2.1

gotchaIn 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).

affects: <2.2.3

gotchaMIME 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.

affects: <2.2.2

Errors

Common errors & fixes

TypeError: attrAccept is not a function

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!

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.

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.

Upgrade

Version history

2.2.5latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

24 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/react-dropzone/attr-accept ↗

packagehttps://www.npmjs.com/package/attr-accept ↗