I am currently developing an Add-in for Word using Angular and the Office Javascript API.
My goal is to retrieve a Word document through the API, convert it to a file, and then upload it to a server via POST method.
The code I have implemented closely resembles the sample code provided by Microsoft in their documentation:
The server endpoint requires multipart form uploads, so I am creating a FormData object and appending the file (as a blob) along with some metadata when making the $http call.
Although the file is successfully transmitted to the server, upon opening it, I discovered that it was corrupted and could not be opened in Word.
After inspecting the output of Office.context.document.getFileAsync, I found that the returned byte array is converted into a string named fileContent. While console logging this string seems to show compressed data as expected.
My assumption is that there might be a preprocessing step required before converting the string to a Blob. However, attempts at Base64 encoding through atob did not yield any positive outcomes.
let sendFile = (fileContent) => {
let blob = new Blob([fileContent], {
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
}),
fd = new FormData();
blob.lastModifiedDate = new Date();
fd.append('file', blob, 'uploaded_file_test403.docx');
fd.append('case_id', caseIdReducer.data());
$http.post('/file/create', fd, {
transformRequest: angular.identity,
headers: {
'Content-Type': undefined
}
})
.success(() => {
console.log('upload succeeded');
})
.error(() => {
console.log('upload failed');
});
};
function onGotAllSlices(docdataSlices) {
let docdata = [];
for (let i = 0; i < docdataSlices.length; i++) {
docdata = docdata.concat(docdataSlices[i]);
}
let fileContent = new String();
for (let j = 0; j < docdata.length; j++) {
fileContent += String.fromCharCode(docdata[j]);
}
// Now all the file content is stored in 'fileContent' variable,
// you can do something with it, such as print, fax...
sendFile(fileContent);
}
function getSliceAsync(file, nextSlice, sliceCount, gotAllSlices, docdataSlices, slicesReceived) {
file.getSliceAsync(nextSlice, (sliceResult) => {
if (sliceResult.status === 'succeeded') {
if (!gotAllSlices) { // Failed to get all slices, no need to continue.
return;
}
// Got one slice, store it in a temporary array.
// (Or you can do something else, such as
// send it to a third-party server.)
docdataSlices[sliceResult.value.index] = sliceResult.value.data;
if (++slicesReceived === sliceCount) {
// All slices have been received.
file.closeAsync();
onGotAllSlices(docdataSlices);
} else {
getSliceAsync(file, ++nextSlice, sliceCount, gotAllSlices, docdataSlices, slicesReceived);
}
} else {
gotAllSlices = false;
file.closeAsync();
console.log(`getSliceAsync Error: ${sliceResult.error.message}`);
}
});
}
// User clicks button to start document retrieval from Word and uploading to server process
ctrl.handleClick = () => {
Office.context.document.getFileAsync(Office.FileType.Compressed, {
sliceSize: 65536 /*64 KB*/
},
(result) => {
if (result.status === 'succeeded') {
// If the getFileAsync call succeeded, then
// result.value will return a valid File Object.
let myFile = result.value,
sliceCount = myFile.sliceCount,
slicesReceived = 0,
gotAllSlices = true,
docdataSlices = [];
// Get the file slices.
getSliceAsync(myFile, 0, sliceCount, gotAllSlices, docdataSlices, slicesReceived);
} else {
console.log(`Error: ${result.error.message}`);
}
}
);
};