How to set content-type both multipart /form-data and json data in the same post request with jquery

Question

I keep getting this error "Content type 'application/octet-stream' not supported"

function createBoard() {
    let formData = new FormData();

    let jsonArr = [];   
    jsonArr.push({           
        "title": $('#title').val(), 
        "writer": $('#writer').val(),
        "content": $('#content').val(),
        "fileName": $('#files').val()   
        });
            
        formData.append('file', $('#files')[0].files[0]);

        const blob = new Blob([JSON.stringify(jsonArr)], {type: "application/json"});
        
                const reader = new FileReader();
        reader.readAsText(blob);

        formData.append('board', reader);


    $.ajax({
      url     : "/api/board",
      method  : "POST",
          enctype: "multipart/form-data",
      data: formData,
          processData: false,
          contentType: false,
      success: function(response) {
                 console.log('Success:', response);
              },
              error: function(error) {
                 console.log('Error:', error);
              }
    });
}

Referense to better solutions but not working for me:

This is what the rest controller looks like:

@PostMapping
public ResponseEntity<BoardVO> create(@RequestPart("board") BoardVO boardVO, @RequestPart("file") MultipartFile file) {
    boardService.add(boardVO, file);
    return new ResponseEntity<>(boardVO, HttpStatus.OK);
}

When i pull the endpoint in postman, as you can see it works.