AykutSarac/jsoncrack.com · info

Allowed formats are JSON, YAML, CSV, XML

Error message

Allowed formats are JSON, YAML, CSV, XML

What it means

Helper text under the Dropzone.Reject state listing the four accepted formats. Static UI copy clarifying the 'Invalid file' reject message. It must stay in sync with the accept prop or it will mislead users.

Source

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

        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. Keep this string in sync with the accept prop whenever formats change.
  2. If adding a format (e.g. JSON5), update both accept and this label.
  3. Derive the label from a single source of truth to prevent drift.
Defensive patterns

Strategy: validation

Validate before calling

const ACCEPTED_FORMATS = ["JSON", "YAML", "CSV", "XML"] as const;
// Render the helper label from the same source as the accept prop
const allowedLabel = `Allowed formats are ${ACCEPTED_FORMATS.join(", ")}`;

Prevention

When it happens

Trigger: Same as the Invalid file reject state — a dropped file whose MIME is not accepted.

Common situations: Same as the reject state; additionally the list can drift from the actual accept array if one is edited and the other is not.

Related errors


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