{"record":{"id":"ff2aeef462006664","repo":"AykutSarac/jsoncrack.com","slug":"unable-to-load-file-files-0-file-name-ff2aee","errorCode":null,"errorMessage":"Unable to load file ${files[0].file.name}","messagePattern":"Unable to load file (.+?)","errorType":"validation","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"apps/www/src/features/editor/FullscreenDropzone.tsx","lineNumber":16,"sourceCode":"import React from \"react\";\nimport { Group, Text } from \"@mantine/core\";\nimport { Dropzone } from \"@mantine/dropzone\";\nimport toast from \"react-hot-toast\";\nimport { VscCircleSlash, VscFiles } from \"react-icons/vsc\";\nimport { FileFormat } from \"../../enums/file.enum\";\nimport useFile from \"../../store/useFile\";\n\nexport const FullscreenDropzone = () => {\n  const setContents = useFile(state => state.setContents);\n\n  return (\n    <Dropzone.FullScreen\n      maxFiles={1}\n      accept={[\"application/json\", \"application/x-yaml\", \"text/csv\", \"application/xml\"]}\n      onReject={files => toast.error(`Unable to load file ${files[0].file.name}`)}\n      onDrop={async e => {\n        try {\n          const fileContent = await e[0].text();\n          let fileExtension = e[0].name.split(\".\").pop() as FileFormat | undefined;\n          if (!fileExtension) fileExtension = FileFormat.JSON;\n          setContents({ contents: fileContent, format: fileExtension, hasChanges: false });\n        } catch (err) {\n          toast.error(\"An error occurred while reading the file.\");\n          console.error(err);\n        }\n      }}\n    >\n      <Group\n        justify=\"center\"\n        ta=\"center\"\n        align=\"center\"\n        gap=\"xl\"\n        h=\"100vh\"","sourceCodeStart":1,"sourceCodeEnd":34,"githubUrl":"https://github.com/AykutSarac/jsoncrack.com/blob/3c9af69e23c635356293b6b28cf4cd0af10d1059/apps/www/src/features/editor/FullscreenDropzone.tsx#L1-L34","documentation":"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.","triggerScenarios":"Dragging a file with an unaccepted MIME/extension onto the fullscreen dropzone; dropping multiple files; dragging a folder.","commonSituations":"OS MIME mismatch (JSON stored as text/plain); unsupported formats like .json5/.toml; batch-dragging several files.","solutions":["Verify the file's MIME type is in the accept list before dropping.","Drop a single file at a time.","Widen the accept list if you need more formats.","Save the data with a recognized extension first."],"exampleFix":"// before\nonReject={files => toast.error(`Unable to load file ${files[0].file.name}`)}\n\n// after — summarize all rejections with reasons\nonReject={files => {\n  const names = files.map(f => f.file.name).join(\", \");\n  const reasons = files.map(f => f.errors.map(e => e.message).join(\"; \")).join(\" | \");\n  toast.error(`Rejected ${names}: ${reasons}`);\n}}","handlingStrategy":"validation","validationCode":"// Check the file against the fullscreen dropzone accept list\nconst ACCEPTED = [\"application/json\", \"application/x-yaml\", \"text/csv\", \"application/xml\"];\nexport function isAcceptable(file: File): boolean {\n  return ACCEPTED.includes(file.type) || /\\.(json|yaml|yml|csv|xml)$/i.test(file.name);\n}","typeGuard":"// Narrow the rejection payload\nimport type { FileRejection } from \"@mantine/dropzone\";\nexport function isRejectionArray(x: unknown): x is FileRejection[] {\n  return Array.isArray(x) && x.length > 0;\n}","tryCatchPattern":"// onReject handler with grouped, informative message\nonReject={rejections =>\n  toast.error(`Rejected: ${rejections.map(r => `${r.file.name} (${r.errors.map(e => e.message).join(\", \")})`).join(\" | \")}`)\n}","preventionTips":["Drop a single file at a time.","Confirm the MIME matches the accept list.","Widen accept for additional formats as needed."],"tags":["dropzone","file-upload","mime","mantine","import"],"backgroundTag":null,"analyzedSha":"3c9af69e23c635356293b6b28cf4cd0af10d1059","analyzedAt":"2026-08-12T19:00:27.891Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}