AykutSarac/jsoncrack.com · warning

Unable to load file ${files[0].file.name}

Error message

Unable to load file ${files[0].file.name}

What it means

Same Dropzone onReject pattern as error 5, but on the fullscreen Dropzone overlay (FullscreenDropzone.tsx:16). Fires when a dropped/selected file fails accept validation (application/json, application/x-yaml, text/csv, application/xml) or exceeds maxFiles (1). The rejected file's name is interpolated into the toast.

Source

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

import React from "react";
import { Group, Text } from "@mantine/core";
import { Dropzone } from "@mantine/dropzone";
import toast from "react-hot-toast";
import { VscCircleSlash, VscFiles } from "react-icons/vsc";
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"

View on GitHub (pinned to 3c9af69e23)

Solutions

1. Verify the file's MIME type is in the accept list before dropping.
2. Drop a single file at a time.
3. Widen the accept list if you need more formats.
4. Save the data with a recognized extension first.

Example fix

// before
onReject={files => toast.error(`Unable to load file ${files[0].file.name}`)}

// after — summarize all rejections with reasons
onReject={files => {
  const names = files.map(f => f.file.name).join(", ");
  const reasons = files.map(f => f.errors.map(e => e.message).join("; ")).join(" | ");
  toast.error(`Rejected ${names}: ${reasons}`);
}}

// Check the file against the fullscreen dropzone accept list
const ACCEPTED = ["application/json", "application/x-yaml", "text/csv", "application/xml"];
export function isAcceptable(file: File): boolean {
  return ACCEPTED.includes(file.type) || /\.(json|yaml|yml|csv|xml)$/i.test(file.name);
}

// Narrow the rejection payload
import type { FileRejection } from "@mantine/dropzone";
export function isRejectionArray(x: unknown): x is FileRejection[] {
  return Array.isArray(x) && x.length > 0;
}

// onReject handler with grouped, informative message
onReject={rejections =>
  toast.error(`Rejected: ${rejections.map(r => `${r.file.name} (${r.errors.map(e => e.message).join(", ")})`).join(" | ")}`)
}

When it happens

Trigger: Dragging a file with an unaccepted MIME/extension onto the fullscreen dropzone; dropping multiple files; dragging a folder.

Common situations: OS MIME mismatch (JSON stored as text/plain); unsupported formats like .json5/.toml; batch-dragging several files.

Related errors

• Unable to load file ${files[0].file.name}
• An error occurred while reading the file.
• 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/ff2aeef462006664. Report an issue: GitHub.