flashman
← All posts

Base64 data URL upload bugs: fix prefixes, padding, and size

Fix Base64 data URL upload bugs by checking MIME prefixes, padding, byte size, Unicode text conversion, and double encoding before files reach APIs or storage.

2026-07-06 · 5 min read · Rahul Chitturi

  • base64
  • uploads
  • api

Image previews, PDF uploads, and mobile clients often turn binary files into Base64 data URLs. That is convenient for demos, but production APIs can fail when the prefix is included unexpectedly, padding is stripped, or a large file becomes much larger after encoding.

Before changing storage code, separate the transport shape from the file bytes. Most bugs appear once you compare the data URL prefix, decoded byte size, and API contract side by side.

Know what the API expects

A data URL includes metadata before the comma, such as data:image/png;base64,. Raw Base64 starts after that comma. Some APIs expect the full data URL so they can infer the content type; others expect only the encoded bytes and a separate MIME field.

  • Keep the MIME type if the server uses it for validation
  • Strip the data: prefix when the endpoint expects raw Base64
  • Send binary multipart data when large files are involved
  • Avoid mixing URL encoding with Base64 unless the value is in a query string

Measure the size after encoding

Base64 increases payload size by roughly one third. A file that fits a client-side picker can exceed an API gateway limit after it becomes JSON text. If uploads fail only in production, compare the raw file size, encoded string length, request body size, and platform limit.

Large Base64 strings also make logs, retries, and error reports noisy. Prefer object storage uploads for big files and reserve Base64 JSON fields for small attachments or controlled internal workflows.

Watch for text conversion mistakes

Binary files are bytes, not JavaScript strings. Converting through the wrong text encoding can corrupt images and certificates before Base64 ever reaches the API. If decoded output is close but invalid, test the smallest file that reproduces the issue.

  • Do not run arbitrary binary through UTF-16 string helpers
  • Preserve equals-sign padding unless the API documents otherwise
  • Decode once before comparing checksums or file signatures
  • Validate JSON wrappers separately from the encoded file value

A Flashman workflow

Use the Base64 tool to decode a small redacted sample, the URL tool to check whether query transport changed plus signs or slashes, and the unit converter to compare byte limits. Format the surrounding JSON so request fields are easy to review.

Flashman keeps this debugging loop local to the browser, which is useful when files contain customer data or unreleased assets. Use tiny synthetic files when reproducing upload behavior in public tickets.

Try these tools