Base64 Encoding & Decoding of Files in the Browser

Encoding a file to base64 can be done using the FileReader API as shown below:

const encodeBase64 = (file: File): Promise<string> =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result as string);
    reader.onerror = (error) => reject(error);
  });

After encoding the file, the returned base64 string can be saved locally through local storage or any storage APIs available at runtime. Note that it is possible to skip the base64 encoding and instead store blobs via IndexedDB.

If you do opt to use base64 encoding, it may be useful to save the mimetype of the file and, if it's relevant, the file name too. We'll see why once we need to decode the base64 string.

Decoding can be done by fetching the base64 string — it's a data URL — and converting it to a blob, then to a File. In the code snippet below, the name is the name of the file and the type is its mimetype.

const decodeBase64 = ({
  base64,
  name,
  type,
}: {
  base64: string;
  name: string;
  type: string;
}): Promise<File> =>
  fetch(base64)
    .then((response) => response.blob())
    .then((blob) => new File([blob], name, { type }));

Base64 encoding a file in the browser and storing the resulting string locally makes it possible to keep track of what files have been input by the user. If the base64 string was persisted, it can be decoded to recover the file contents, even after a page refresh.