Budibase/budibase · warning

File too large. 20mb limit

Error message

File too large. 20mb limit

What it means

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.

Solutions

1. Compress or resize the image below 20MB before uploading (e.g. export as optimized PNG/WebP at display resolution).
2. Use an SVG for logos where possible — they are small and scale cleanly.
3. Run the image through a tool like ImageOptim, squoosh, or ImageMagick convert.

Example fix

// before: 25MB raw photo
convert logo.png -resize 1024x1024 -quality 85 logo-small.png
// after: upload the optimized file
// logo-small.png is well under the 20MB limit

const MAX = 20 * 1024 * 1024
if (file && file.size > MAX) {
  notifications.warn("File too large. 20mb limit")
  return
}

When it happens

Trigger: 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.

Common situations: Uploading high-resolution exported PNGs or unoptimized photography as a company logo; dragging a print-quality asset into the branding page.

Understand the failure class

Background: "File too large" / "file size exceeds limit" errors: why libraries cap file sizes and how to fix them — this error's family across 46 libraries.

Related errors

• automationId and appId are required
• Exactly one OpenAPI template file is required
• Failed to generate a unique name for the row action
• file is required
• gotoFunc must be a function, found a

AI-assisted analysis of Budibase/budibase@a81a902e9a (2026-08-29). Data as JSON: /api/errors/0e6e02fc80fd80d0. Report an issue: GitHub.

Appendix: source

Thrown at packages/builder/src/settings/pages/branding.svelte:228

<LockedFeature
  title={"Branding"}
  planType={"Premium"}
  description={"Add and manage branding for your account"}
  enabled={brandingEnabled}
  upgradeButtonClick={async () => {
    licensing.goToUpgradePage()
  }}
  showContentWhenDisabled
>
  {#if sdk.users.isAdmin($auth.user) && mounted}
    <Layout noPadding gap="S">
      <div class="branding fields">
        <div class="field">
          <Label size="L">Logo</Label>
          <File
            title="Upload image"
            handleFileTooLarge={() => {
              notifications.warn("File too large. 20mb limit")
            }}
            extensions={imageExtensions}
            previewUrl={logoPreview || logo?.url}
            on:change={e => {
              let clone = { ...config }
              if (e.detail) {
                logoFile = e.detail
                logoPreview = null
              } else {
                logoFile = null
                clone.logoUrl = ""
              }
              config = clone
            }}
            value={logoFile || logo}
            disabled={!brandingEnabled || saving}
            allowClear={true}
          />

View on GitHub (pinned to a81a902e9a)