I'm working on a REST web application that manages documents between users and uploaders. The backend is written in Java and my Document entity contains, besides various attributes, a byte[] content. I was able to send a file created at server side by

@GET
...
document.setContent(Files.readAllBytes(Paths.get("WEB-INF/testFile.txt")));
return Response.ok(document).build();

and retrieve it at front-end (vueJs) through

async function download(file) {
  const fileURL = window.URL.createObjectURL(new Blob([atob(file.content)]));
  const fileLink = document.createElement("a");

  fileLink.href = fileURL;
  fileLink.setAttribute("download",`${file.name}.${file.type}`);
  document.body.appendChild(fileLink);
  fileLink.click();
  fileLink.remove;
  window.URL.revokeObjectURL(fileURL);
}

the problem is that when I try to upload a file and then download it, its content is not parsed correctly (is shown undefined, string in Base64 or numbers depending on how I try to solve it). The file is sent by a post request and is retrieved through an input form bound to an onFileSelected function.

function onFileSelected(e) {

  var reader = new FileReader();
  reader.readAsArrayBuffer(e.target.files[0]);
  reader.onloadend = (evt) => {
    if (evt.target.readyState === FileReader.DONE) {
      var arrayBuffer = evt.target.result;
      this.file.content = new Uint8Array(arrayBuffer);
      //this.file.content = arrayBuffer;
    }
  };
  
}

axios.post(...,document,...)

and I have tried using atob and btoa as well before assigning the value to this.file.content. If I print the file on server Welcome.txt it gives B@ae3b74d and if I use Arrays.toString(welcome.getContent()) it gives an array of numbers but as soon as it passed to the frontend its content become in Base64 welcome: { ... content: IFRoaXMgaXMgYSB0ZXN0IGZpbGUhIAo...}. Any idea? Thank you a lot!