Error codes

Every restriction, validator, and upload failure surfaces as a MediaDropError with a stable code you can switch over.

Every restriction, validator, and upload failure produces a MediaDropError — a stable code plus a human message — so you can switch on code instead of parsing message text.

Code	Fires when	Appears on
`file-invalid-type`	file doesn’t match `restrictions.accept`	`file.errors`
`file-too-large`	`file.size > restrictions.maxSize`	`file.errors`
`file-too-small`	`file.size < restrictions.minSize`	`file.errors`
`too-many-files`	selection exceeds `restrictions.maxFiles`	`file.errors`
`validator-error`	your `validator` function returned an error	`file.errors`
`upload-error`	the transport’s `upload()` rejected	`file.uploadError`

Fail the next upload attempt (upload-error)

Drag files here, or click to browse

Images only, 1 KB–2 MB, max 3 files, no spaces in the name

This demo accepts images only, 1 KB–2 MB, max 3 files, and rejects filenames with spaces — try tripping each rule. Toggle the checkbox to force the next upload to fail with upload-error.

import { useMediaDrop } from "react-mediadrop";

const { files } = useMediaDrop({
  restrictions: { accept: "image/*", minSize: 1024, maxSize: 2_000_000, maxFiles: 3 },
  validator: (file) =>
    file.name.includes(" ")
      ? { code: "validator-error", message: "Filenames can't contain spaces" }
      : null,
  transport, // rejects to produce uploadError: { code: "upload-error", ... }
});

for (const file of files) {
  for (const error of file.errors) {
    console.log(error.code, error.message);
  }
  if (file.uploadError) {
    console.log(file.uploadError.code, file.uploadError.message);
  }
}

upload-error additionally carries status (the HTTP status, when the transport threw via createHttpError) and sourceCode (a transport-specific code, when the transport attached one) — both omitted when not applicable. See Types for the full shape.