I am encountering an issue where the base64 array I'm trying to send to an API is coming up empty. Here's a breakdown of what I'm doing:
Firstly, I have an array of files with images in my code:
[0: File {name: '766_generated.jpg', lastModified: 1613057822000, lastModifiedDate: Thu Feb 11 2021 12:37:02 GMT-0300 (Horário Padrão de Brasília), webkitRelativePath: '', size: 191010, …}]
In my function, I iterate over the image array, convert each image into base64, and store it in another array like so:
let filesBody = []
this.files.map(item => {
var reader = new FileReader();
reader.readAsDataURL(item);
reader.onload = function () {
let result = reader.result
return filesBody.push(result)
};
})
Upon console logging the filesBody array, I get the following result:
[0: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD…AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAf/Z"]
The body object containing the filesBody array looks like this:
let body = { "files": filesBody }
After attempting to send the body through a POST request using the billing service:
this.billingService.sendBillingRevaluation(body)
The service function responsible for sending the data is as follows:
sendBillingRevaluation(body): Observable<any> {
return this.http.post<any>(
`${ServicesUrls.URL}/queries/sendBillingRevaluation`,
body
)
}
However, upon inspection, the base64 array within the body object appears to be empty when sent:
{
"files": []
}
Both the network tab in the browser and the backend endpoint log confirm that the base64 array is not being transmitted correctly. Is there another method I should consider for sending base64 data as JSON?