Utilities for working with MIME types
npm install @remix-run/mimeUtilities for working with MIME types.
Data used for these utilities is generated at build time from mime-db, but only includes standard MIME types. Experimental (x-) and vendor-specific (vnd.) MIME types have been excluded.
``bash`
npm install @remix-run/mime
Detects the MIME type for a given file extension or filename.
`ts
import { detectMimeType } from '@remix-run/mime'
detectMimeType('txt') // 'text/plain'
detectMimeType('.txt') // 'text/plain'
detectMimeType('file.txt') // 'text/plain'
detectMimeType('path/to/file.txt') // 'text/plain'
detectMimeType('unknown') // undefined
`
Detects the Content-Type header value for a given file extension or filename, including charset for text-based types. See mimeTypeToContentType for charset logic.
`ts
import { detectContentType } from '@remix-run/mime'
detectContentType('css') // 'text/css; charset=utf-8'
detectContentType('.json') // 'application/json; charset=utf-8'
detectContentType('image.png') // 'image/png'
detectContentType('path/to/file.unknown') // undefined
`
Checks if a MIME type is known to be compressible.
`ts
import { isCompressibleMimeType } from '@remix-run/mime'
isCompressibleMimeType('text/html') // true
isCompressibleMimeType('application/json') // true
isCompressibleMimeType('image/png') // false
isCompressibleMimeType('video/mp4') // false
`
For convenience, the function also accepts a full Content-Type header value:
`ts
import { isCompressibleMimeType } from '@remix-run/mime'
isCompressibleMimeType('text/html; charset=utf-8') // true
isCompressibleMimeType('application/json; charset=utf-8') // true
isCompressibleMimeType('image/png; charset=utf-8') // false
isCompressibleMimeType('video/mp4; charset=utf-8') // false
`
Converts a MIME type to a Content-Type header value, adding ; charset=utf-8 to text-based MIME types: text/* (except text/xml which has built-in encoding declarations), application/json, application/javascript, and all +json suffixed types. All other types are returned unchanged.
`ts
import { mimeTypeToContentType } from '@remix-run/mime'
mimeTypeToContentType('text/css') // 'text/css; charset=utf-8'
mimeTypeToContentType('application/json') // 'application/json; charset=utf-8'
mimeTypeToContentType('application/ld+json') // 'application/ld+json; charset=utf-8'
mimeTypeToContentType('image/png') // 'image/png'
`
Registers or overrides a MIME type for one or more file extensions.
`ts
import { defineMimeType } from '@remix-run/mime'
defineMimeType({
extensions: ['myformat'],
mimeType: 'application/x-myformat',
})
`
You can also optionally configure the charset and whether the MIME type is compressible:
`ts``
defineMimeType({
extensions: ['myformat'],
mimeType: 'application/x-myformat',
compressible: true,
charset: 'utf-8',
})
MIT