attr-accept
JavaScript implementation of the HTML5 file input accept attribute.
Repository Health
Technical Analysis
attr-accept is a tiny, focused JavaScript utility that replicates the matching behavior of the HTML5 <input type="file" accept="..."> attribute. Given a file’s name and MIME type plus a set of accepted types, it returns whether that file should be allowed, supporting wildcard MIME types like image/*, exact MIME types, and file extensions such as .srt.
With zero runtime dependencies and a single exported function, attr-accept is the validation core behind react-dropzone and countless custom file-upload components. It ships as both ES modules and CommonJS with bundled TypeScript definitions, making it trivial to drop into any project that needs to filter dropped or selected files client-side.
What You Get
- A single accept(file, acceptedFiles) function with no dependencies
- Support for wildcard MIME types (image/, video/), exact MIME types, and file extensions
- Accepted types as either a comma-delimited string or an array
- Dual ES module and CommonJS builds with bundled TypeScript type definitions
- Battle-tested behavior used in production by react-dropzone
Common Use Cases
- Validating files selected or dropped into a custom upload component
- Filtering a drag-and-drop file list against an allowed set of types
- Reimplementing native accept-attribute behavior in a headless uploader
- Guarding form submissions so only permitted file types are sent
Under The Hood
Architecture - The entire library is a single function in src/index.ts. It normalises the accepted types into an array (splitting a comma string when needed), lower-cases the file’s MIME type, derives the base type before the slash, and uses Array.prototype.some to test each accepted entry: extensions (leading dot) match via endsWith on the file name, wildcard types (trailing /*) match against the base MIME type, and everything else is compared as an exact MIME string. When no file or no accept value is supplied, it returns true.
Tech Stack - Written in TypeScript with zero runtime dependencies. It is built with tsdown into dual ESM and CommonJS outputs with bundled type definitions, and tested with Vitest. The public interface is a FileWithType structural type requiring only optional name and type fields, so it works with real File objects or plain stand-ins.
Code Quality - The implementation is a few dozen lines and paired with a co-located src/index.spec.ts test suite run under Vitest. Code is thoroughly JSDoc-documented, strictly typed, and deliberately dependency-free, which keeps the surface area and failure modes minimal.
API Design - The API could hardly be simpler: import the default export and call it with a file and an accept spec. Flexible input handling (string or array, MIME or extension, missing fields default to accept) makes it forgiving, and the bundled types give editors full autocomplete. There is essentially no boilerplate or learning curve.