Asynchronous method when i want to convert image to imageBase64

Question

I have a radiobutton field. When I check it and click the button and if the radiobutton with the id "trademarkLogo" is checked, the image should be converted to base64 and the string I receive should be sent to the field "Your trademark is" in order to write that information in the database. However, for me, the entire code is executed and the image is converted because I set the variable "imageBase64" in console.log, but the variable is not assigned inside the "Trademark image" data. The problem is in the asynchronous function. How can I solve this problem so that my data is written normally in the database?

$(document).on("click", "#applyTrademarkForm", function (e) { e.preventDefault();         e.stopPropagation();



    if ($("#trademarkLogo input:checked").val() === "Logo") { const collectedAdditionalClassLogo = {}; const additionalClassesLogo = $( "#addClassLogoRep .mf-repeater-select-field" );


const numOfAdditionalLogoClass = additionalClassesLogo.length;

for (i = 0; i < numOfAdditionalLogoClass; i++) {
  if (additionalClassesLogo.eq(i).val() !== "") {
    collectedAdditionalClassLogo[`Aditional class ${i + 1}`] = {
      "": additionalClassesLogo.eq(i).val(),
    };`your text`
    forPayment["trademarsk_additional"] = numOfAdditionalLogoClass;
  }
}



const file = $("#mf-input-file-upload-148984e")[0].files[0];
const reader = new FileReader();

reader.onloadend =  function () {
  
  let imageBase64 = reader.result;
  console.log(imageBase64);
  
};
reader.readAsDataURL(file);


data["What would you like to trademark today?"] = {
  Logo: {
    "Your trademark is": $("#trademarkLogo input:checked").val(),
    "Trademark image": imageBase64,
    "Class for logo": $("#trademarkLogoFirstClass .mf_select__single-value").text(),
    "": collectedAdditionalClassLogo, 
  },
};
}

}