Base64 problem solved

#javascript #webdev #programming #opensource

I just published an npm package that tackles the challenges associated with Base64 encoding and decoding in both browser and Node.js environments, while also offering support for handling binary files.

Problem 🤔

If you've ever encountered issues with the atob and btoa methods when working with utf-8 strings on the frontend, you know the kind of challenges they can pose. These built-in methods do not handle utf-8 characters correctly and can result in errors. The base64-transcode npm package aims to address this problem and provide a solution.

How It Solves the Problem 🛠️

The package enables seamless Base64 encoding and decoding on both the frontend and backend. This means you can use the same package and syntax in both the browser and Node.js environments. Furthermore, the package supports handling binary files, making it easy to work with them on the backend.

Compatibility 🌟

This package supports CommonJS, ES Modules, and IIFE (Immediately Invoked Function Expression) formats. You can safely use both require and import statements in any environment. TypeScript also supported.

A simple example of how to use it 🚀

It's a simple way to convert data to and from Base64 encoding in modern JavaScript.

// Don't forget to install the package...
// "yarn add base64-transcode" or "npm i base64-transcode"
import Base64 from 'base64-transcode';

// Decoding
const decodedData = Base64.decode('SGVsbG8gV29ybGQh');
console.log(decodedData); // "Hello World!"

// Encoding
const encodedData = Base64.encode('Hello World!');
console.log(encodedData); // "SGVsbG8gV29ybGQh"

How you can use it with traditional html 💪

And the same example for raw html, in case you don't use any bundler.

<script src="https://unpkg.com/base64-transcode/dist/browser.js"></script>
<script>
  // Decoding
  const decodedData = Base64.decode('SGVsbG8gV29ybGQh');
  console.log(decodedData); // "Hello World!"

  // Encoding
  const encodedData = Base64.encode('Hello World!');
  console.log(encodedData); // "SGVsbG8gV29ybGQh"
</script>

API documentation 📚

You can find documentation and detailed information

on the GitHub Repo
on the Npm Package

Final words 🌈

In a world where data encoding and decoding are vital tasks for web development, the base64-transcode package emerges as a savior. It seamlessly resolves the quirks and challenges of Base64 operations, making life easier for developers on both the frontend and backend.

With its support for binary files and compatibility across various module systems, this package simplifies the handling of data. Embrace base64-transcode and unlock the power of smooth, hassle-free Base64 operations in your projects.

Happy coding! 😊🚀

Top comments (7)

Adaptive Shield Matrix • Oct 26 '23

My current 2 utility methods look like this

export function base64Decode(base64: string) {
  return Buffer.from(base64, "base64").toString("binary")
}
export function base64Encode(str: string) {
  return Buffer.from(str).toString("base64")
}

Looking at your source code, wasn't btoa deprecated?
github.com/toviszsolt/base64-trans...

Zsolt Tövis • Oct 26 '23 • Edited

Thank you for writing, finally someone! 🤗

Yes, Buffer is works in node environment only, but not in browser. 😉

That's how I used it in pure node, but now in a full stack application I can use the same syntax on both sides, which makes development and readability easier.

So now I get a data on the frontend and I decode it like this:

const { text, binary } = response;
const decodedText = Base64.decode(text);
const decodedBinary = Base64.decode(binary, true);

And from node I send the encoded data like this:

const text = 'String data';
const binary = fs.readfileSync('file_name');
const send = {
  text: Base64.encode(text),
  binary: Base64.encode(binary, true),
};

I've tried it of course, and I don't get a deprecated warning either in VSCode or when running the script in the console. 🤩💪

// index.js
const Base64 = require('base64-transcode');
const str = 'Hello, world!';
const testBtoa = btoa(str);
console.log(Base64.encode(str), testBtoa);

// output
D:\tmp\node_test>node index
SGVsbG8sIHdvcmxkIQ== SGVsbG8sIHdvcmxkIQ==