Building a Base64 Encoder/Decoder with File Support in Next.js

Base64 is everywhere — data URLs, email attachments, API payloads, JWTs. But the browser's built-in btoa() and atob() have a well-known limitation: they choke on Unicode. I built a Base64 tool that handles UTF-8 text, file uploads, and binary downloads — all client-side. Here's how it works. The live tool is at ultimatetools.io/tools/coding-tools/base64-encoder-decoder/. The UTF-8 problem with btoa btoa() only accepts characters in the Latin-1 range (U+0000 to U+00FF). Try encoding anything outside that range and it throws: btoa("hello") // "aGVsbG8=" ✅ btoa("hello 🌍") // DOMException: The string contains characters outside Latin-1 ❌ The standard workaround is to pipe through encodeURIComponent and unescape first: // Encode: string → UTF-8 bytes → Base64 btoa(unescape(encodeURIComponent("hello 🌍"))) // "aGVsbG8g8J+MjQ==" ✅ // Decode: Base64 → UTF-8 bytes → string decodeURIComponent(escape(atob("aGVsbG8g8J+MjQ=="))) // "hello 🌍" ✅ Here's what happens step by step: encodeURIComponent(