CODEWITHSUNDEEP
javascriptnode.jsexpresshttps
greenn
greenn

Reputation: 309

How to send pdf file from front-end to Nodejs server?

I have a pdf generated file on the front end of my application that I got using html2pdf plugin. I have a nodemailer server at my backed where I can attach files and send it to an email of my choice. Is there a way I can send the pdf that is generated in the front end to Nodejs? I am also using express

Edit: Based on your advice I did 

 **On the Client side**
var element = document.getElementById('element-to-print');
const elem = document.getElementById('html');
html2pdf().from(element).toPdf().get('pdf').then(function (pdf) {
            window.open(pdf.output('bloburl'), '_blank');
            var formData = new FormData();
            formData.append("filename", pdf);
            axios.post('/upload',formData).then(res => { console.log(res) })
            // formData.append("uploadedFile", fileInputElement.files[0]);
            })

On express app

app.post('/upload', fileUpload(), function(req, res) {  
    const sampleFile = req.files.uploadedFile;
    // do something with file
    res.send('File uploaded');
  })

But I get this error coming from index.js

TypeError: Cannot read property 'uploadedFile' of null

Upvotes: 0

Views: 9494

Answers (3)

user1176409
user1176409

Reputation: 1

this works for me. Where 'SelectedFile' is the PDF. Using FormData to convert it into a sendable format to a node server. Sorry im also using axios incase its confusing.

const onFileUpload = () => {

const formData = new FormData();

formData.append("file", selectedFile);

client
  .postPdf("/pdf/upload-pdf", formData, false)

  .then((res) => {
    console.log("res", res.data);
    
  })

  .catch((err) => {
    console.error("Unable to upload PDF", err);
  });
};

// Axios

postPdf: (path, data, withToken = true) => {
const url = `${host}${path}`;

const token = localStorage.getItem(tokenKey);
let headers = {};

if (withToken) {
  headers["Authorization"] = `Bearer ${token}`;
}

return axios.post(url, data);
},

Upvotes: 0

Bergur
Bergur

Reputation: 4067

Yes.

  1. Create and endpoint/route in your express app
  2. Use a http agent like superagent, request or axios in your client
  3. Use multipart form or something like FormData to create the data that is supposed to be sent.
  4. Post it to the url you created in express.
  5. Use middlewere such as express-fileupload or busboy to handle the attachment.

So in your client. You have something like

var formData = new FormData();
formData.append("filename", "My awesome file");
formData.append("uploadedFile", fileInputElement.files[0]);

Then you post that with something like Axios

axios.post('/upload',formData).then(res => { console.log(res) })

In your express app you do something like

const express = require('express');
const fileUpload = require('express-fileupload');
const app = express();

app.post('/upload', fileUpload(), function(req, res) {  
  const sampleFile = req.files.uploadedFile;
  // do something with file
  res.send('File uploaded');
})

Upvotes: 3

atl3
atl3

Reputation: 107

<form method="post" enctype="multipart/form-data" action="/">
<div>
  <label for="profile_pic">Choose file to upload</label>
  <input type="file" id="profile_pic" name="profile_pic"
      accept=".pdf">
</div>
<div>
  <button>Submit</button>
</div>

For receive it at node you have to define a new route at the same path.

Upvotes: 1

Related Questions