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.
20
It may be that you have not imported the json-enc extension.
But also whatever is returned from getFilesDTO() is what is added to the payload, so don’t return a string if you don’t want a string!
If I replicate the code, adding an explicit import (after the htmx import), it works ok.
express server
app.get('/', (req, res) => {
res.send(`
<!DOCTYPE html>
<html>
<head>
...
<script src="https://unpkg.com/htmx.org"></script>
<script src="https://unpkg.com/htmx.org/dist/ext/json-enc.js"></script>
getFilesDTO()
<script>
// dummy files for testing
const files = [
{name: "abc.js", size: 100 * 1024 * 1024},
{name: "def.js", size: 200 * 1024 * 1024}
]
function getFilesDTO() {
return files.map((file) => {
return {
name: file.name,
extension: file.name.split('.').pop(),
sizeMB: file.size / 1024 / 1024
}
})
}
</script>
In the console network tab, it shows a non-quoted files array
Alternatively you can <script> in the json-enc code (it’s quite small) and use that to debug
<script>
htmx.defineExtension('json-enc', {
onEvent: function (name, evt) {
if (name === "htmx:configRequest") {
evt.detail.headers['Content-Type'] = "application/json";
}
},
encodeParameters : function(xhr, parameters, elt) {
console.log('parameters', parameters)
xhr.overrideMimeType('text/json');
return (JSON.stringify(parameters));
}
});
</script>
1