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