{"id":10525,"library":"attr-accept","title":"HTML Input File Accept Attribute Checker","description":"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.","status":"active","version":"2.2.5","language":"javascript","source_language":"en","source_url":"https://github.com/react-dropzone/attr-accept","tags":["javascript","html5","input","tag","attribute","attr","accept","file","typescript"],"install":[{"cmd":"npm install attr-accept","lang":"bash","label":"npm"},{"cmd":"yarn add attr-accept","lang":"bash","label":"yarn"},{"cmd":"pnpm add attr-accept","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"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.","wrong":"const attrAccept = require('attr-accept');","symbol":"attrAccept","correct":"import attrAccept from 'attr-accept';"},{"note":"For CommonJS environments, use `require` for the default export. Do not use named imports as the primary export is default.","wrong":"import { attrAccept } from 'attr-accept';","symbol":"attrAccept","correct":"const attrAccept = require('attr-accept');"},{"note":"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.","symbol":"attrAccept","correct":"import type { File } from 'attr-accept'; // Type definition example, 'File' is a global type"}],"quickstart":{"code":"import attrAccept from 'attr-accept';\n\ninterface MyFile extends File {\n  path?: string;\n}\n\n// Example 1: Check a JPEG file against an image accept string\nconst jpegFile: MyFile = new File([''], 'test.jpeg', { type: 'image/jpeg' });\nconst acceptsImages = attrAccept(jpegFile, 'image/*');\nconsole.log(`'test.jpeg' accepts 'image/*': ${acceptsImages}`); // true\n\n// Example 2: Check a PDF file against multiple accept types\nconst pdfFile: MyFile = new File([''], 'document.pdf', { type: 'application/pdf' });\nconst acceptsDocs = attrAccept(pdfFile, '.pdf, application/msword');\nconsole.log(`'document.pdf' accepts '.pdf, application/msword': ${acceptsDocs}`); // true\n\n// Example 3: Check a text file against a specific extension\nconst txtFile: MyFile = new File([''], 'notes.txt', { type: 'text/plain' });\nconst acceptsPng = attrAccept(txtFile, '.png');\nconsole.log(`'notes.txt' accepts '.png': ${acceptsPng}`); // false\n\n// Example 4: Accepting all files if the accept string is empty or undefined (or empty array)\nconst anyFile: MyFile = new File([''], 'data.json', { type: 'application/json' });\nconst acceptsAny = attrAccept(anyFile, ''); // or undefined, or []\nconsole.log(`'data.json' accepts an empty accept string: ${acceptsAny}`); // true (since v2.2.3)\n","lang":"typescript","description":"Demonstrates how to use the `attrAccept` function to validate different file types against various 'accept' attribute strings, including MIME types, extensions, and wildcards."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Upgrade to `attr-accept@2.2.1` or newer to ensure proper ES module compatibility.","message":"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.","severity":"gotcha","affected_versions":"<2.2.1"},{"fix":"Update to `attr-accept@2.2.3` or later to correctly handle empty accept arrays (i.e., accept all files).","message":"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.","severity":"gotcha","affected_versions":"<2.2.3"},{"fix":"Upgrade to `attr-accept@2.2.2` or later for case-insensitive MIME type matching, which aligns with standard browser behavior.","message":"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.","severity":"gotcha","affected_versions":"<2.2.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"For ES Modules: `import attrAccept from 'attr-accept';`. For CommonJS: `const attrAccept = require('attr-accept');`.","cause":"Incorrect import syntax for CommonJS or ESM environments, or attempting a named import when the library uses a default export.","error":"TypeError: attrAccept is not a function"},{"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.","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).","error":"My files are being rejected, but they should be accepted based on the accept string!"},{"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.","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.","error":"Module parse failed: Unexpected token / You may need an appropriate loader to handle this file type."}],"ecosystem":"npm"}