1

I've a front end in Vue.js and I'm using AXIOS to send data to the backend. I need to send some data and a PDF file (generated with jsPDF API). However the backend does not receive the file. What am I doing wrong? Any help would be really appreciated.

Generator.vue code

this.doc = new jsPDF({orientation: "p", unit: "pt", format: "a4"})
// ... doing staff to create the PDF file here... everything is done properly
var file = this.doc.output('url');
this.$axios.post(`/sendmail/`, 

            { "toEmail": "xxx@gmail.com",
              "bccEmail": "",
              "patientName": "Maria",
              "studyType": "Abdominal",
              "attachmentsFile": file
            })
            .then(response => {
                console.log('SUCCESS!', response.status, response.text);
          }).catch((error) => {
            if (error.response) {
              console.log('FAILED...', error);
              alert(error.response.data.items.message)
            } else {
              console.log('FAILED...', error);
              alert(error)
            }
          })// end AXIOS post

Backend Express Code (index.js)

app.post('/sendmail', async (req, res) => {

    const {toEmail, bccEmail, studyType, patientName, attachmentsFile} = req.body;
      // >> attachmentsFile is empty!! not sure what I'm doing wrong
        
    const msg = {
        from: "xxxx@xx.com", // sender address
        to:  `${toEmail}`, // list of receivers
        bcc: `${bccEmail}`, // bcc - hiden
        subject: "subject " + `${patientName}` + " - " + `${studyType}`
        attachments: `${attachmentsFile}`, // PDF Attachment 
        html: "msg here ..."
    }
    // .... more code here working ok!
  } // end post

Any help would be really appreciated. Thanks!

user19267354
  • 51
  • 3
  • 1
    You can't just attach the file to the JSON body. See here for an example: https://stackoverflow.com/questions/43013858/how-to-post-a-file-from-a-form-with-axios – puelo Jun 03 '22 at 22:36
  • Your best bet would be to send two seperate requests. One for the JSON data and another for the File. On your API you can define two seperate routes. For the file route you can use a middleware called Multer to handle the file upload. http://expressjs.com/en/resources/middleware/multer.html. Then you can submit the file and return something like the filename or path. Then submit the form data with the filename/path as an additional field. – Lateralus Jun 03 '22 at 22:57
  • Thanks, I'll check again and let u know if it worked. – user19267354 Jun 04 '22 at 18:00
  • ok, I've updated VUE code as follows, however, express backend server receives an empty body {} and I don-t know why... what Could I be doing wrong? – user19267354 Jun 04 '22 at 19:12
  • Generator.vue code ` `var fd = new FormData(); // To carry on your data fd.append("toEmail", "xxx@xx.com"); fd.append("bccEmail", "xxx@xx.com"); this.$axios.post(`/sendmail/`, fd,{ headers: { 'Content-Type': 'multipart/form-data' } }).then...... .....` – user19267354 Jun 04 '22 at 19:17
  • Sorry I cannot put the code correctly in my comments, not sure why... anyway... I'm just trying to send a FormData (without a file first) and the express server receives it as empty... not sure why. Any help? thanks – user19267354 Jun 04 '22 at 19:23

0 Answers0