{"record":{"id":"0e6e02fc80fd80d0","repo":"Budibase/budibase","slug":"file-too-large-20mb-limit","errorCode":null,"errorMessage":"File too large. 20mb limit","messagePattern":"File too large\\. 20mb limit","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/builder/src/settings/pages/branding.svelte","lineNumber":228,"sourceCode":"<LockedFeature\n  title={\"Branding\"}\n  planType={\"Premium\"}\n  description={\"Add and manage branding for your account\"}\n  enabled={brandingEnabled}\n  upgradeButtonClick={async () => {\n    licensing.goToUpgradePage()\n  }}\n  showContentWhenDisabled\n>\n  {#if sdk.users.isAdmin($auth.user) && mounted}\n    <Layout noPadding gap=\"S\">\n      <div class=\"branding fields\">\n        <div class=\"field\">\n          <Label size=\"L\">Logo</Label>\n          <File\n            title=\"Upload image\"\n            handleFileTooLarge={() => {\n              notifications.warn(\"File too large. 20mb limit\")\n            }}\n            extensions={imageExtensions}\n            previewUrl={logoPreview || logo?.url}\n            on:change={e => {\n              let clone = { ...config }\n              if (e.detail) {\n                logoFile = e.detail\n                logoPreview = null\n              } else {\n                logoFile = null\n                clone.logoUrl = \"\"\n              }\n              config = clone\n            }}\n            value={logoFile || logo}\n            disabled={!brandingEnabled || saving}\n            allowClear={true}\n          />","sourceCodeStart":210,"sourceCodeEnd":246,"githubUrl":"https://github.com/Budibase/budibase/blob/a81a902e9a8fe55b467d106765f6638f12e35c49/packages/builder/src/settings/pages/branding.svelte#L210-L246","documentation":"The branding settings page registers a handleFileTooLarge callback on the File upload component for the logo image. When the selected file exceeds the component's 20MB max size, the File component invokes this callback instead of uploading, and the page shows a warning notification with this message. It is a client-side size guard, not a server rejection.","triggerScenarios":"Selecting/dropping a logo image larger than 20MB in Settings > Branding, which fires the File component's file-too-large event and calls notifications.warn.","commonSituations":"Uploading high-resolution exported PNGs or unoptimized photography as a company logo; dragging a print-quality asset into the branding page.","solutions":["Compress or resize the image below 20MB before uploading (e.g. export as optimized PNG/WebP at display resolution).","Use an SVG for logos where possible — they are small and scale cleanly.","Run the image through a tool like ImageOptim, squoosh, or ImageMagick convert."],"exampleFix":"// before: 25MB raw photo\nconvert logo.png -resize 1024x1024 -quality 85 logo-small.png\n// after: upload the optimized file\n// logo-small.png is well under the 20MB limit","handlingStrategy":"validation","validationCode":"const MAX = 20 * 1024 * 1024\nif (file && file.size > MAX) {\n  notifications.warn(\"File too large. 20mb limit\")\n  return\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Pre-compress logo assets (PNG/WebP at display resolution)","Prefer SVG logos which are small and scalable","Check file.size before selecting in custom flows"],"tags":["file-upload","builder","validation","svelte"],"backgroundTag":"file-size-limit-exceeded","analyzedSha":"a81a902e9a8fe55b467d106765f6638f12e35c49","analyzedAt":"2026-08-29T01:03:10.972Z","schemaVersion":2},"datasetVersion":"2026-08-29T02:17:18.158Z"}