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?
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}`);
});
