Convert Document.getFileAsync data to FormData for Office file uploading

Question

I'm working on Office Add-in project, I need to get current Office file and upload to our server. Below is upload file from File Browser to our server

var fdata = new FormData();
fdata.append('data', file);
fdata.append('totalFileSizeBytes', file.size);
fdata.boundary = '----boundary';

xhr.send(fdata);

And I got Office file info via function: Document.getFileAsync (https://dev.office.com/reference/add-ins/shared/document.getfileasync)

But I don't know how to convert File info from Document.getFileAsync to FormData. I tried read File info slice by slice then concat to an array and pass to FormData, but it wasn't success.

I've added that tag so that the right people are more likely to see your question. — Cindy Meister, Jun 18 '18 at 14:18
Does this help? https://learn.microsoft.com/en-us/office/dev/add-ins/word/get-the-whole-document-from-an-add-in-for-word#add-the-javascript-to-get-the-document — João Pimentel Ferreira, Aug 28 '20 at 15:20

score 6 · Answer 1 · edited Aug 28 '20 at 20:33

The answer is a bit late, but hopefully might help future folks looking for this - I wasted some time trying to figure this out.

The File object returned by the Document.getFileAsync is not usable with FormData. Also what the Microsoft Documentation shows you does not get you a file that you can just drop into FormData.

First, you'll have to combine the slices returned to a docdata array as per the Microsoft example shows (https://learn.microsoft.com/en-us/javascript/api/office/office.document?view=office-js#getfileasync-filetype--options--callback-). But then instead of creating a string out of it by using charCodeAt, you'll want just use the combined docdata array and do this:

const file = new File(
  [new Uint8Array(docdata)], 
  'testfile.docx', 
  { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' }
);

Which you can then proceed to append to your FormData:

const fd = new FormData();
fd.append('file', file);

score 2 · Answer 2 · answered Jul 23 '21 at 01:05

The new File() gave me an error. But the a new Blob() did the trick

var aFile = new Blob(
    [new Uint8Array(docdata)],
    { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' }
);

formData.append('file', aFile, 'testfile.docx');

Convert Document.getFileAsync data to FormData for Office file uploading

2 Answers2