Get Uploads as Base64

Hello All,

I need help integrating this into a web app that I have. Everything renders and works as expected but I am trying to get the uploaded images (through drag and drop) as a base64.

Using an endpoint is not an option I can use.

This is the code that I have

    var editor = grapesjs.init({
            height: '100%',
            container: '#buildy_' + instanceID, //Current Instance of the editor
            plugins: ['gjs-preset-newsletter'], //Load Newsletter plugin
            components: '<div class="txt-red">Hello world!</div>',
            style: '.txt-red{color: red}',
            assetManager: {
                assets: [],
				uploadFile: (e) => {
                    var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
                    for (var i = 0, f; f = files[i]; i++) {
					
						// Only process image files.
						if (!f.type.match('image.*')) {
							continue;
							}
							var reader = new FileReader();
							console.log(reader.readAsDataURL(f))
							//NEED Each File as Base64 to upload via external function
                      }
                },
                dropzone: 1,
                openAssetsOnDrop: 0,
            },
            storageManager: {
                id: storageid, // Prefix identifier that will be used on parameters
                type: 'local', // Type of the storage  (can be set to null)
                autosave: true, // Store data automatically
                autoload: true, // Autoload stored data on init
                stepsBeforeSave: 1, // If autosave enabled, indicates how many changes are necessary before store method is triggered
            }
    });

Also after I process my external upload function do I just call the add asset to make the image available?

Appreciate any support on this...