mime

The mime package provides MIME type detection, Content-Type header generation, and compressibility checks. It includes a built-in database of common MIME types and supports registering custom types.

Installation

The MIME type package is included with Remix. No additional installation is needed.

Import

import {
  detectMimeType,
  detectContentType,
  isCompressibleMimeType,
  mimeTypeToContentType,
  defineMimeType,
} from 'remix/mime'

API

detectMimeType(filenameOrPath)

Returns the MIME type for a file based on its extension. Returns undefined if the extension is not recognized.

function detectMimeType(filenameOrPath: string): string | undefined

detectMimeType('photo.jpg')        // 'image/jpeg'
detectMimeType('style.css')        // 'text/css'
detectMimeType('data.json')        // 'application/json'
detectMimeType('/path/to/app.js')  // 'application/javascript'
detectMimeType('unknown.xyz')      // undefined

detectContentType(filenameOrPath)

Returns a full Content-Type header value for a file, including the charset parameter for text types. Returns undefined if the extension is not recognized.

function detectContentType(filenameOrPath: string): string | undefined

detectContentType('index.html')  // 'text/html; charset=utf-8'
detectContentType('style.css')   // 'text/css; charset=utf-8'
detectContentType('photo.jpg')   // 'image/jpeg'
detectContentType('data.json')   // 'application/json; charset=utf-8'

isCompressibleMimeType(mimeType)

Returns true if the MIME type is typically compressible (text, JSON, XML, SVG, JavaScript, CSS, etc.). Useful for deciding whether to apply gzip or brotli compression.

function isCompressibleMimeType(mimeType: string): boolean

isCompressibleMimeType('text/html')           // true
isCompressibleMimeType('application/json')    // true
isCompressibleMimeType('image/svg+xml')       // true
isCompressibleMimeType('image/jpeg')          // false
isCompressibleMimeType('video/mp4')           // false
isCompressibleMimeType('application/wasm')    // false

mimeTypeToContentType(mimeType)

Converts a bare MIME type string into a full Content-Type header value by adding charset=utf-8 for text types.

function mimeTypeToContentType(mimeType: string): string

mimeTypeToContentType('text/html')        // 'text/html; charset=utf-8'
mimeTypeToContentType('application/json') // 'application/json; charset=utf-8'
mimeTypeToContentType('image/png')        // 'image/png'

defineMimeType(extension, mimeType)

Registers a custom MIME type mapping. This overrides any existing mapping for the extension.

function defineMimeType(extension: string, mimeType: string): void

defineMimeType('.mdx', 'text/mdx')
defineMimeType('.avif', 'image/avif')

detectMimeType('page.mdx')  // 'text/mdx'
detectMimeType('photo.avif') // 'image/avif'

Examples

Setting Content-Type on a Response

import { detectContentType } from 'remix/mime'

router.map(fileRoute, async ({ params }) => {
  let file = await readFile(`./public/${params.path}`)
  let contentType = detectContentType(params.path) ?? 'application/octet-stream'

  return new Response(file, {
    headers: { 'Content-Type': contentType },
  })
})

Conditional Compression

import { isCompressibleMimeType } from 'remix/mime'

function shouldCompress(response: Response): boolean {
  let contentType = response.headers.get('Content-Type')
  if (!contentType) return false

  let mimeType = contentType.split(';')[0].trim()
  return isCompressibleMimeType(mimeType)
}

Validating Upload Types

import { detectMimeType } from 'remix/mime'

let allowedTypes = new Set(['image/jpeg', 'image/png', 'image/webp'])

function isAllowedUpload(filename: string): boolean {
  let mimeType = detectMimeType(filename)
  return mimeType != null && allowedTypes.has(mimeType)
}

Register Custom Types

import { defineMimeType, detectMimeType } from 'remix/mime'

// Register at application startup
defineMimeType('.woff3', 'font/woff3')
defineMimeType('.jsonld', 'application/ld+json')

detectMimeType('font.woff3')    // 'font/woff3'
detectMimeType('schema.jsonld') // 'application/ld+json'

Related

• response --- Response helpers that set Content-Type automatically.
• static-middleware --- Serves static files with correct MIME types.
• headers --- Typed Content-Type header parsing.