# File types

> File type helpers for React that tell what a file is from its name or mime type: kind, icon, tile colors, a type label and a localized size.

- Type: React helper (Hooks & Utilities)
- Access: Pro (the source needs a Wingo UI Pro plan, see https://wingo-ui.com/pricing)
- Version: 1.0.0
- Install: `npx wingo-ui@latest add file-types`
- Docs: https://wingo-ui.com/components/file-types

## Interaction

Type any file name (or pick a sample) and see the kind, icon tile, type label and size the helpers produce. Switch the locale to compare "2.4 MB" with "2,4 MB".

## Installation

```bash
npx wingo-ui@latest add file-types
```

Pro item: run `npx wingo-ui@latest login` once with a Pro account. The CLI adds the files, their dependencies and a version record for updates.

With shadcn: `npx shadcn@latest add @wingo-ui/file-types` (needs the @wingo-ui registry with your API key in components.json)

Files:

- `lib/file-types.ts`

npm dependencies: `npm i lucide-react`

Wingo UI dependencies (installed automatically):

- [Number format](https://wingo-ui.com/components/number-format) ([Markdown](https://wingo-ui.com/components/number-format.md))
- [Tones](https://wingo-ui.com/components/tones) ([Markdown](https://wingo-ui.com/components/tones.md))

## Usage

```tsx
import { FILE_KIND_CLASSES, FILE_KIND_ICONS, formatFileSize, getFileKind } from "@/lib/file-types"

export function Attachment({ name, size }: { name: string; size: number }) {
  const kind = getFileKind(name)
  const Icon = FILE_KIND_ICONS[kind]
  return (
    <div className="flex items-center gap-3">
      <span className={`flex size-10 items-center justify-center rounded-[12px] ${FILE_KIND_CLASSES[kind]}`}>
        <Icon className="size-5" />
      </span>
      <span>{name}</span>
      <span>{formatFileSize(size, "en-US")}</span>
    </div>
  )
}
```

## API

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `name?` | `string` | `""` | The demo's file name. The extension wins over the mime type because browsers often report none. |
| `locale?` | `string` | `"en-US"` | The locale formatFileSize uses in the demo. |
| `getFileKind?` | `(file: { name?: string; type?: string } \| string) => FileKind` |  | The main helper: image, video, audio, pdf, document, spreadsheet, presentation, archive, code, design or other. Reads the extension first (browsers often report no mime type), then the mime type. Accepts a File, an UploadFile, any { name, type } or a plain name or URL. |

## Parts

### formatFileSize (function)

A size in the locale: "2.4 MB" in en-US ("2,4 MB" in de-DE), "320 KB". Binary steps, one decimal below 10 from MB up, and "" for missing or invalid sizes.

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `bytes` | `number \| null \| undefined` |  | The size in bytes. |
| `locale?` | `string` |  | Intl locale for the number; the browser's when left out. |
| `returns?` | `string` |  | The formatted size, or an empty string. |

### getFileTypeLabel (function)

A short type badge: "PDF", "XLSX"; the mime subtype when there is no extension; "" when neither says anything.

### getFileExtension (function)

The lowercase extension without the dot: "pdf" for "Invoice 2026-0412.PDF". Ignores query strings and returns "" for names like ".env".

### splitFileName (function)

Splits "Q3 proposal.pdf" into ["Q3 proposal", ".pdf"], so a long name can truncate in the middle and still show its extension.

### isPreviewableImage (function)

Whether a browser can draw the file as an image thumbnail. HEIC and TIFF return false, so they get an icon tile instead.

### FILE_KIND_ICONS (constant)

The lucide icon for each kind: FileImage, FileText, FileSpreadsheet, Presentation, FileArchive and the rest.

### FILE_KIND_CLASSES (constant)

Tile classes for each kind: red PDF, blue document, green spreadsheet, amber slides and archives, neutral media. The same colors file-upload uses.

### FILE_KIND_TONES (constant)

The tone for each kind, for a Badge or any component that takes tone: danger for PDF, info for documents, success for spreadsheets.

### FILE_KIND_LABELS (constant)

English names for screen readers and captions ("PDF document", "Spreadsheet"). Pass your own map for other languages.

### FileKind (type)

The kind union getFileKind returns.

### FileLike (type)

What the helpers accept: a file name or URL, or any { name?, type? } like a File.

## Examples

- **Every kind**: The icon tile, label and kind getFileKind gives each family of files.
- **Thumbnail or icon**: isPreviewableImage keeps HEIC and TIFF on an icon tile; the lease has no extension, so its mime type decides.
- **Long names**: splitFileName truncates the base and keeps the extension visible in a narrow column.
- **Sizes by locale**: formatFileSize in binary steps, with one decimal below 10 from MB up.

## See also

- [File Upload](https://wingo-ui.com/components/file-upload) ([Markdown](https://wingo-ui.com/components/file-upload.md))
- [Number format](https://wingo-ui.com/components/number-format) ([Markdown](https://wingo-ui.com/components/number-format.md))
- [Tones](https://wingo-ui.com/components/tones) ([Markdown](https://wingo-ui.com/components/tones.md))

---

Canonical: https://wingo-ui.com/components/file-types
More components: https://wingo-ui.com/components · Index for agents: https://wingo-ui.com/llms.txt