How to send Document.getFileAsync file object to the server side using officejs

28 views Asked by At

I'm working on a Word Office Add-in project. I need to get the current Office file and upload it to our server. I got the file Object using Document.getFileAsync method. When I upload to the server I get a blank Word document on the server. I do not know how to send the file object to the server. Can anyone help me with this?

Blank Document

FrontEnd:

  async function upload() {
    try {
      //Working but no content
      Office.context.document.getFileAsync(Office.FileType.Compressed,
        async function (result) {
          console.log("result-->", result);
          try {
            if (result.status == "succeeded") {
              const myFile = result.value;
              const blob = new Blob([new Uint8Array(myFile)], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });

              var data = new FormData();

              data.append('file', blob, "document.docx");

              var config = {
                onUploadProgress: function (progressEvent) {
                  var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
                  console.log("percentCompleted--->", percentCompleted);
                },
                headers: {
                  "Accept": "multipart/form-data"
                }
              };

              console.log("Api call Started")
              await axios.post('http://localhost:5000/upload', data, config)
                .then(function (res) {
                  console.log("res-->", res)
                  myFile.closeAsync();
                })
                .catch(function (err) {
                  consol.error("api failed", err);
                  myFile.closeAsync();
                });
              console.log("Api call Ended");
            }
          } catch (error) {
            console.error("Inner Error", error)
          }
        });
    } catch (error) {
      console.error("Outer Error", error);
    }
  }

  return (
    <div>
      <button onClick={upload}>Upload Document</button>
    </div>
  );

server :

const express = require('express');
const multer = require('multer');
const cors = require("cors");
const path = require('path');

const app = express();

// Set the storage engine using multer
const storage = multer.diskStorage({
    destination: './uploads/',
    filename: function (req, file, cb) {
        console.log("Called", new Date().toLocaleDateString(), new Date().toTimeString());
        cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
    }
});

app.use(cors())
// Initialize upload
const upload = multer({
    storage: storage
}).any();

// POST endpoint to handle file upload
app.post('/upload', (req, res) => {
    upload(req, res, (err) => {
        console.log("req.files", req.files);
        if (err) {
            console.log("error--->", err)
            res.status(400).send(err);
        } else {
            if (req.files == undefined) {
                res.status(400).send('Error: No file selected!');
            } else {
                res.send('File uploaded successfully!');
            }
        }
    });
});

// Start server
const PORT = 5000;
app.listen(PORT, () => {
    console.log(`Server started on port ${PORT}`);
});
0

There are 0 answers