I’m trying to send data via REST API from a client to a server, the client is just an HTML page with JavaScript and HTMX in it, the server is Spring Boot. The endpoint accepts POST requests with an object:
public record FileMetadataDTO(Integer availabilityTime, FileDTO[] files) {}
public record FileDTO(String name, String extension, Integer sizeMB) {}
On the client side I have a button that sends the request to the server:
<button id="upload-button"
hx-post="http://localhost:8080/api/v1/upload/metadata"
hx-headers='{"Content-Type": "application/json"}'
hx-ext="json-enc"
hx-vals='js:{"availabilityTime": 1, "files": getFilesDTO()}'
style="display: none;">Upload</button>
<label for="upload-button" style="border: 1px solid #ccc; padding: 6px 12px; cursor: pointer;">Upload files</label>
The getFilesDTO()
function returns a stringified array:
function getFilesDTO() {
let filesDTO = [];
for (let i = 0; i < tuckedFiles.length; i++) {
filesDTO.push({
name: tuckedFiles[i].name,
extension: tuckedFiles[i].name.split('.').pop(),
sizeMB: tuckedFiles[i].size / 1024 / 1024
});
}
return JSON.stringify(filesDTO);
}
But JSON.stringify
surrounds the array with quotes and the server cannot deserialize it:
{"availabilityTime":"1","files":"[{"name":"a.txt","extension":"txt","sizeMB":0.00022220611572265625},{"name":"another_file.txt","extension":"txt","sizeMB":0.000003814697265625}]"}
A valid payload would be:
{"availabilityTime":"1","files":[{"name":"a.txt","extension":"txt","sizeMB":0.00022220611572265625},{"name":"another_file.txt","extension":"txt","sizeMB":0.000003814697265625}]}
But I can’t make JSON.stringify
do it like that no matter what. I tried it in the console of Chrome and Edge to see if my code is at fault, but JSON.stringify([])
in the console of both browsers returns '[]'
.
How can I fix this? I’ve been on multiple websites and can’t find a solution.