EncodeDecodeBase64.js

base64 = (() => {
    const encodeAsync = async (str, mimeType = { type: 'text/html' }) => {
        return new Promise((resolve, reject) => {
            // Create the Blob object (of course, it can be of any type and defined in any way)
            var blob = new Blob([str], mimeType); // , { type: 'text/html' } is default if not specified
            // Define the FileReader which is able to read the contents of Blob
            var reader = new FileReader();
            // The magic always begins after the Blob is successfully loaded
            reader.onload = () => {
                // Since it contains the Data URI, we should remove the prefix and keep only Base64 string
                resolve(reader.result.replace(/^data:.+;base64,/, ''));
            };
            reader.onerror = error => reject(error);
            // Since everything is set up, let’s read the Blob and store the result as Data URI
            reader.readAsDataURL(blob);
        });
    };

    const encodeFileToBase64Async = (blobOrfile) => {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.readAsDataURL(blobOrfile);
            reader.onload = () => resolve(() => {
                var arr = reader.result.split(','),
                    mime = arr[0].match(/:(.*?);/)[1],
                    strb64 = arr[1];
                return { mime, strb64 };
            });
            reader.onerror = error => reject(error);
        });
    };

    // While ArrayBuffer, Uint8Array and other BufferSource are “binary data”, a Blob represents “binary data with type”.
    const blobToArrayBuffer = (blob) => { // get arrayBuffer from blob
        return new Promise((resolve, reject) => {
            let reader = new FileReader();
            reader.readAsArrayBuffer(blob);

            reader.onload = function (event) {
               resolve(fileReader.result);
            };
            reader.onerror = error => reject(error);
        }      
    };

    const decodeDataUrlToFile = (dataurl, filename = "NoFileNameProvided.ext") => {

        var arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);

        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }

        return new File([u8arr], filename, { type: mime });
    };

    const decodeDataUrlToFileAsync = (dataurl, filename = "NoFileNameProvided.ext") => { return Promise.resolve(decodeDataUrlToFile(dataurl, filename)); };

    const decodeAsync = async (b64) => { return Promise.resolve(atob(b64)); };

    const encode = (text) => btoa(unescape(encodeURIComponent(text))); // encode
    var decode = (str_b64) => decodeURIComponent(escape(window.atob(str_b64)));  // decode

    var ret = { encode, decode, decodeAsync, encodeAsync, encodeFileToBase64Async, decodeDataUrlToFileAsync, decodeDataUrlToFile };

    return ret;
})();

// Usage: async/await, in order to use async/await we have ti wrap the whole code into an async function
(async () => {
    var enc;
    console.log(enc = await base64.encodeAsync("hallo"));
    console.log(await base64.decodeAsync(enc));
    console.log(await base64.decodeAsync("PG5vdGU+Cjx0bz5Ub3ZlPC90bz4KPGZyb20+SmFuaTwvZnJvbT4KPGhlYWRpbmc+UmVtaW5kZXI8L2hlYWRpbmc+Cjxib2R5PkRvbid0IGZvcmdldCBtZSB0aGlzIHdlZWtlbmQhPC9ib2R5Pgo8L25vdGU+"));
})();

// Usage: promise, results in unreadable chaining
base64.encodeAsync("hallo").then(enc => { console.log(enc); return base64.decodeAsync(enc); }).then(dec => console.log(dec));

// Sync version, but different implementation: ---------------------------------------------------------------------

var str_b64 = btoa(unescape(encodeURIComponent("hallo"))); // encode
var decodedAgain = decodeURIComponent(escape(window.atob(str_b64)));  // decode
    
    // example image:-->  data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs