AykutSarac/jsoncrack.com · warning

Invalid file

Error message

Invalid file

What it means

Dropzone.Reject renders 'Invalid file' when a dropped file's MIME type is not in the accept list (application/json, application/x-yaml, text/csv, application/xml). Mantine's Dropzone matches against the OS-reported MIME type, so mis-detected types also land here even when the extension is correct.

Source

Thrown at apps/www/src/features/editor/FullscreenDropzone.tsx:49

        ta="center"
        align="center"
        gap="xl"
        h="100vh"
        style={{ pointerEvents: "none" }}
      >
        <Dropzone.Accept>
          <VscFiles size={100} />
          <Text fz="h1" fw={500} mt="lg">
            Upload to JSON Crack
          </Text>
          <Text fz="lg" c="dimmed" mt="sm">
            (Max file size: 300 KB)
          </Text>
        </Dropzone.Accept>
        <Dropzone.Reject>
          <VscCircleSlash size={100} />
          <Text fz="h1" fw={500} mt="lg">
            Invalid file
          </Text>
          <Text fz="lg" c="dimmed" mt="sm">
            Allowed formats are JSON, YAML, CSV, XML
          </Text>
        </Dropzone.Reject>
      </Group>
    </Dropzone.FullScreen>
  );
};

View on GitHub (pinned to 3c9af69e23)

Solutions

1. Add text/plain and common subtypes to accept if a permissive policy is desired.
2. Rename the file with the correct extension before dropping.
3. Rely on the onDrop extension-based fallback already present in the code.
4. If MIME is unreliable on the target OS, switch Mantine accept to extension matching.

Example fix

// before
accept={["application/json", "application/x-yaml", "text/csv", "application/xml"]}

// after
accept={["application/json", "application/x-yaml", "text/csv", "text/plain", "application/xml"]}

const ACCEPTED = ["application/json", "application/x-yaml", "text/csv", "application/xml", "text/plain"];
function isAcceptedMime(file: { type: string }): boolean {
  return ACCEPTED.includes(file.type);
}

function isAcceptedFile(file: File): boolean {
  const acceptedExt = ["json", "yaml", "yml", "csv", "xml"];
  const ext = file.name.split(".").pop()?.toLowerCase() ?? "";
  return isAcceptedMime(file) || acceptedExt.includes(ext);
}

When it happens

Trigger: Dropping a .json5, .jsonc, .toml, .txt or .log file; the OS reporting a generic application/octet-stream for a .json file transferred from an archive; dropping an image or PDF; a YAML file identified as text/plain instead of application/x-yaml.

Common situations: Windows reporting no/incorrect MIME for .json; CSV detected as text/plain; user expects extension-based acceptance but the gate is MIME-only.

Related errors

• Allowed formats are JSON, YAML, CSV, XML
• Unable to load file ${files[0].file.name}
• Unable to load file ${files[0].file.name}
• An error occurred while reading the file.
• err

AI-assisted analysis of AykutSarac/jsoncrack.com@3c9af69e23 (2026-08-12). Data as JSON: /api/errors/e25a4918d08e6d46. Report an issue: GitHub.