{"record":{"id":"72fc66f59d6b091e","repo":"AykutSarac/jsoncrack.com","slug":"unable-to-load-file-files-0-file-name","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/modals/ImportModal/index.tsx","lineNumber":71,"sourceCode":"      onClose={() => {\n        setFile(null);\n        setURL(\"\");\n        onClose();\n      }}\n      centered\n    >\n      <Stack py=\"sm\">\n        <TextInput\n          value={url}\n          onChange={e => setURL(e.target.value)}\n          type=\"url\"\n          placeholder=\"URL of JSON to fetch\"\n          data-autofocus\n        />\n        <Paper radius=\"md\" style={{ cursor: \"pointer\" }}>\n          <Dropzone\n            onDrop={files => setFile(files[0])}\n            onReject={files => toast.error(`Unable to load file ${files[0].file.name}`)}\n            maxFiles={1}\n            p=\"md\"\n            accept={[\"application/json\", \"application/x-yaml\", \"text/csv\", \"application/xml\"]}\n          >\n            <Stack justify=\"center\" align=\"center\" gap=\"sm\" mih={220}>\n              <AiOutlineUpload size={48} />\n              <Text fw=\"bold\">Drop here or click to upload files</Text>\n              <Text c=\"dimmed\" fz=\"sm\">\n                {file?.name ?? \"None\"}\n              </Text>\n            </Stack>\n          </Dropzone>\n        </Paper>\n      </Stack>\n      <Group justify=\"right\">\n        <Button onClick={handleImportFile} disabled={!(file || url)}>\n          Import\n        </Button>","sourceCodeStart":53,"sourceCodeEnd":89,"githubUrl":"https://github.com/AykutSarac/jsoncrack.com/blob/3c9af69e23c635356293b6b28cf4cd0af10d1059/apps/www/src/features/modals/ImportModal/index.tsx#L53-L89","documentation":"Toast from the Mantine Dropzone onReject callback in the Import modal. onReject fires when the dropped/selected files fail validation: MIME type not in the accept list (application/json, application/x-yaml, text/csv, application/xml), or more than maxFiles (1) are dropped. files[0].file.name is the rejected file's name.","triggerScenarios":"Dropping a .txt, .md, .xml with a non-listed MIME, a binary file, or multiple files at once. The Dropzone validates accept + maxFiles and routes failures to onReject rather than onDrop.","commonSituations":"File extension registered to a different MIME on the user's OS (e.g. a JSON file served/stored as text/plain); dropping a folder; trying to import a .json5 or .toml which is not in the accept list.","solutions":["Confirm the file's actual MIME type matches one of the accepted types before dropping.","Drop files one at a time (maxFiles is 1).","Widen the accept list in Dropzone if you legitimately need additional formats.","Convert/save the file with a standard extension before importing."],"exampleFix":"// before\naccept={[\"application/json\", \"application/x-yaml\", \"text/csv\", \"application/xml\"]}\n\n// after — also accept common JSON/YAML extensions and text variants\naccept={{\n  \"application/json\": [\".json\"],\n  \"application/x-yaml\": [\".yaml\", \".yml\"],\n  \"text/csv\": [\".csv\"],\n  \"application/xml\": [\".xml\"],\n  \"text/plain\": [\".json\", \".yaml\", \".yml\"],\n}}","handlingStrategy":"validation","validationCode":"// Verify MIME/extension against the accept list before dropping\nconst ACCEPTED = [\"application/json\", \"application/x-yaml\", \"text/csv\", \"application/xml\"];\nexport function isAccepted(file: File): boolean {\n  return ACCEPTED.includes(file.type) || /\\.(json|yaml|yml|csv|xml)$/i.test(file.name);\n}","typeGuard":"// Narrow a Dropzone FileReject array\nimport type { FileRejection } from \"@mantine/dropzone\";\nexport function hasRejections(files: FileRejection[] | null): files is FileRejection[] {\n  return Array.isArray(files) && files.length > 0;\n}","tryCatchPattern":"// onReject is event-driven, not thrown; enrich the message\nonReject={rejections =>\n  toast.error(`Rejected: ${rejections.map(r => r.file.name).join(\", \")}`)\n}","preventionTips":["Drop one file at a time (maxFiles is 1).","Confirm the OS-detected MIME matches the accept list.","Widen accept if you legitimately need extra formats."],"tags":["dropzone","file-upload","mime","mantine","import"],"backgroundTag":null,"analyzedSha":"3c9af69e23c635356293b6b28cf4cd0af10d1059","analyzedAt":"2026-08-12T19:00:27.891Z","schemaVersion":2},"datasetVersion":"2026-08-13T04:17:16.726Z"}