Check the File's Real Type

ProNew

Reads the first bytes of a file to confirm it really is a PNG, JPEG, GIF, WebP or PDF rather than trusting its name or MIME type, and rejects renamed files with a precise message. Use this when a mislabelled upload would cause problems downstream.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Uploaded files are processed or shown to others, and a renamed executable or HTML file posing as an image is a risk.

Do not use it when: Client checks are for helpful errors, not security. Validate again on the server, always.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`allowed`	`SniffedType[]`	`image/png`, `image/jpeg`, `image/gif`, `image/webp`, `application/pdf`.
`onAccepted`	`(files) => void`	Called with the files that passed.

sniffBytes(bytes) and sniffFile(file) are exported.

Accessibility

Each result is a line with the file name and the verdict in words; failures are alerts that explain the mismatch ("The name says .png, but the content is PDF") so the person knows what to fix.
The accepted types are listed before choosing, in plain text, so nobody has to guess.
This is a convenience for honest mistakes. It does not make an upload safe: always sniff and scan on the server.

Testing

The pattern ships with a Testing Library test (file-type-sniffing-validation.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

Uploaded files are processed or shown to others, and a renamed executable or HTML file posing as an image is a risk.

Do not use it when: Client checks are for helpful errors, not security. Validate again on the server, always.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`allowed`	`SniffedType[]`	`image/png`, `image/jpeg`, `image/gif`, `image/webp`, `application/pdf`.
`onAccepted`	`(files) => void`	Called with the files that passed.

sniffBytes(bytes) and sniffFile(file) are exported.

Accessibility

Each result is a line with the file name and the verdict in words; failures are alerts that explain the mismatch ("The name says .png, but the content is PDF") so the person knows what to fix.
The accepted types are listed before choosing, in plain text, so nobody has to guess.
This is a convenience for honest mistakes. It does not make an upload safe: always sniff and scan on the server.

Testing

The pattern ships with a Testing Library test (file-type-sniffing-validation.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.