AykutSarac/jsoncrack.com · error

An error occurred while reading the file.

Error message

An error occurred while reading the file.

What it means

Toast from the fullscreen Dropzone's onDrop async handler when reading the file contents throws. The handler awaits e[0].text() and then setContents; any failure in the read (or, because setContents is inside the try, a downstream store error) surfaces as this generic message. console.error(err) logs the real cause.

Source

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

import { FileFormat } from "../../enums/file.enum";
import useFile from "../../store/useFile";

export const FullscreenDropzone = () => {
  const setContents = useFile(state => state.setContents);

  return (
    <Dropzone.FullScreen
      maxFiles={1}
      accept={["application/json", "application/x-yaml", "text/csv", "application/xml"]}
      onReject={files => toast.error(`Unable to load file ${files[0].file.name}`)}
      onDrop={async e => {
        try {
          const fileContent = await e[0].text();
          let fileExtension = e[0].name.split(".").pop() as FileFormat | undefined;
          if (!fileExtension) fileExtension = FileFormat.JSON;
          setContents({ contents: fileContent, format: fileExtension, hasChanges: false });
        } catch (err) {
          toast.error("An error occurred while reading the file.");
          console.error(err);
        }
      }}
    >
      <Group
        justify="center"
        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">

View on GitHub (pinned to 3c9af69e23)

Solutions

1. Confirm the file is readable and non-empty before dropping.
2. Ensure the content matches the format implied by the extension.
3. Inspect the console (console.error logs the real error) to distinguish read vs conversion failure.
4. Narrow the try block so only the read is caught, surfacing conversion errors separately.

Example fix

// before
try {
  const fileContent = await e[0].text();
  let fileExtension = e[0].name.split(".").pop() as FileFormat | undefined;
  if (!fileExtension) fileExtension = FileFormat.JSON;
  setContents({ contents: fileContent, format: fileExtension, hasChanges: false });
} catch (err) {
  toast.error("An error occurred while reading the file.");
  console.error(err);
}

// after — separate read from conversion errors
let fileContent;
try {
  fileContent = await e[0].text();
} catch (err) {
  console.error(err);
  toast.error("An error occurred while reading the file.");
  return;
}
const fileExtension = (e[0].name.split(".").pop() as FileFormat) ?? FileFormat.JSON;
setContents({ contents: fileContent, format: fileExtension, hasChanges: false });

// Pre-check the file is readable and non-empty
export async function isReadableFile(file: File): Promise<boolean> {
  if (file.size === 0) return false;
  try { await file.slice(0, 1).text(); return true; } catch { return false; }
}

// Confirm File.text() produced a string
export function isTextResult(v: unknown): v is string {
  return typeof v === "string";
}

// Separate file-read from format-conversion failures
let content: string;
try { content = await file.text(); }
catch (err) { console.error(err); toast.error("An error occurred while reading the file."); return; }
try { setContents({ contents: content, format, hasChanges: false }); }
catch { toast.error("Could not import this format."); }

When it happens

Trigger: The File.text() promise rejects (rare: file removed mid-read, permission revoked, device disconnect); setContents throws because contentToJson rejects the content for the detected format (e.g. malformed YAML/XML/CSV). The catch at FullscreenDropzone.tsx:24 covers both.

Common situations: Dropping a malformed YAML/CSV/XML file whose format was inferred from the extension but whose content fails conversion; dropping a 0-byte or unreadable file; browser storage/permission edge cases.

Related errors

• Unable to load file ${files[0].file.name}
• Unable to load file ${files[0].file.name}
• err
• Invalid file
• Allowed formats are JSON, YAML, CSV, XML

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