uploading files to endpoint from a static webpage

I am trying to upload files to an S3 endpoint from a static HTML page but the files are always malformed when I download them from the bucket. The relevant code is below - what am I doing wrong with fetch?

const onSubmitForm = function (e) {
        const file = this.files[0];
        const reader = new FileReader();

        // reader.readAsText(file); // didn't work 
        reader.readAsDataURL(file); // also didn't work 

        reader.onload = async function () {
            const bodyData = {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    file: {
                            // the backend endpoint expects a base64 encoded img
                            // the upload completes but the 
                        "data": reader.result.toString()
                    },
                    "name": file.name
                })

            }

            const response = await fetch(uploadUrl, bodyData).then(
                 res => res.json()
             );

        };

        reader.onerror = function (error) {

            console.log('Error: ', error);

        };



        //

    }