How do I restrict file types in an Uploadcare uploader?

To restrict which file types users can upload with Uploadcare, use the accept prop on the File Uploader component when configuring it or set up server-side validation rules in your Uploadcare dashboard to enforce MIME type filtering.

MIME types are standardized labels like image/jpeg or application/pdf that identify the format of a file — browsers and servers use them to know what kind of content they’re dealing with. The accept prop accepts MIME types (comma-separated), file extensions, or both. Users cannot select files outside these types in the file picker, though determined users can still override OS-level file picker restrictions by changing the file extension.

Restricting file types with the accept prop

Set the accept prop on the File Uploader component to a comma-separated list of allowed MIME types and/or file extensions.

<uc-config
  ctx-name="my-uploader"
  pubkey="YOUR_PUBLIC_KEY"
  accept="image/*,application/pdf,.pdf"
  >
</uc-config>

This also works for both the JavaScript and React File Uploader components

Restricting file types with dashboard rules

To restrict file types at the server level from your Uploadcare dashboard, follow these steps:

1. Log in to your Uploadcare dashboard
2. Navigate to Settings
3. Under Uploading, toggle MIME type filtering on
4. Check the boxes next to the MIME types you want to allow (e.g., image/jpeg, text/csv, application/pdf) to create your whitelist
5. Click Apply to save your changes

The dashboard rules act as the authoritative enforcement layer, rejecting any files that don’t match your whitelist before they’re stored in your project.

Common issues and troubleshooting

• Problem: Users see “file not allowed” after selecting a valid file
  Cause: The dashboard MIME type whitelist and the component’s accept prop are out of sync
  Fix: Ensure both match — your dashboard whitelist should allow the same types as your accept string

• Problem: PDF uploads work in development but fail in production
  Cause: The MIME type for PDFs is application/pdf, not .pdf alone
  Fix: Use both in your accept prop: "application/pdf,.pdf" to cover all cases

• Problem: Custom file extensions are rejected
  Cause: Uploadcare’s dashboard validates by MIME type first, and unusual extensions may not have a recognized MIME type
  Fix: Configure your uploader to accept by MIME type instead of file extensions alone

Next steps

Explore how to combine file type restrictions with file size limits for more granular control over uploads. You can also build custom validators for checks the accept prop cannot cover, or set up server-side validation and moderation to inspect file contents after the upload completes.

Further reading

• How do I add signed uploads to an existing Next.js app?
• How do I use Uploadcare with React Hook Form?