Save Word document (.docx) using Office.js API to back-end server

Question

I'm having some troubles saving a byte array (fetched from a Microsoft Office's task pane using Office.js) to a Word document file (on the server side). This is what I'm doing:

• I'm getting the content of the Word document using this library

JavaScript

$('#push').click(function () {
  $.when(OffQuery.getContent({ sliceSize: 1000000 }, function (j, data, result, file, opt) {
    // ...nothing interesting here
  })).then(function (finalByteArray, file, opt) {
    // (1) this line is changed...see the answer
    var fileContent = Base64.encode(finalByteArray); //encode the byte array into base64 string.

    $.ajax({
      url: '/webcontext/api/v1/documents',
      // (2) missing setting (see the answer)
      data: fileContent,
      type: 'POST'
    }).then(function () {
      // updateStatus('Done sending contents into server...');
    });
  }).progress(function(j, chunkOfData, result, file, opt){
    // ...nothing interesting here
});

• Then in a Spring controller I'm doing this:

Java / Spring

@RequestMapping(method = RequestMethod.POST) // As OOXML
public void create(@RequestBody String fileContent, HttpServletRequest request) throws Exception { // TODO
  LOGGER.debug("{} {}", request.getMethod(), request.getRequestURI());
  //LOGGER.debug("fileContent: {}", fileContent);
  try {
    val base64 = Base64.decodeBase64(fileContent); // From Apache Commons Codecs

    FileUtils.writeByteArrayToFile(new File("assets/tests/output/some_file.docx"), base64);
  } catch (IOException e) {
    LOGGER.error("Crash! Something went wrong here while trying to save that...this is why: ", e);
  }
}

...but the file is getting saved as-is; basically is saving the byte array into the file as a text document.

Am I missing something? Do you have any clues? Somebody that has worked with Office.js, Task Panes and things like that?

Thanks in advance...

UPDATE 1

Turns out that the finalByteArray is getting converted into a Base64 string (fileContent), but when I try to do the reverse operation in Java is not working...if somebody has done that before, please let me know. I have tried:

1. The sample in this Mozilla page
2. Unibabel
3. base64-js

...on the Java side (to decode the Base64 String into a byte array):

1. The default Base64 encoder/decoder
2. The Base64 Apache codec

Answer 1

Actually, I found the error. It was on the client side. There is a function included in the Office.js SDK that does the conversion between the byte array into a Base64 string ― although I'm not sure if it's shipped with all versions, I'm using Office.js SDK 1.1.

So I changed the conversion to:

var fileContent = OSF.OUtil.encodeBase64(finalByteArray);

...and in the AJAX call I added the contentType setting:

  $.ajax({
    //...
    contentType: 'application/octet-stream',
    // ...
    type: 'POST'
  }).finish(function () {
    // ...
  });

By setting the content type correctly I was able to post "the right content" to the server.

Even if I do the correct Base64 conversion without setting the correct Content Type, the received data in the Spring controller is different (larger in this case) than the one reported in the client side.

I hope this may help someone else in the future. The examples in the Microsoft Web are quite clear, but for some reason "there is always something different between environments".

Answer 2

There is no obvious error in your code, except (as commented) that I don't know why you cut off the last character from your code.

Why don't you use a javascript debugger like Firebug and a remote Java debugger for your Webserver to check every step in your processing and control the content of the various variables (Javascript fileContent, Java fileContent, Java base64) to find out where the error creeps in.