CODEWITHSUNDEEP
node.jsreactjs
PRS
PRS

Reputation: 11

Display PDF file in ReactJS that is received from a Node.js server?

I am trying to build a system where a user can store pdf files on a server, and another user can view those pdf files by using a simple click on a file link.

I am trying to store a file in a MySQL database and retrieve it using app.get(). I have successfully stored the file in the database using BLOB, but when I try to retrieve it, it is in some other format.

I have also tried to store the file in local folder ./uploads using 'express-fileupload', but that also doesn't seem to work when I try to retrieve the file location. After receiving the file location I am sending it back to my React app, and then try to open it using embed and iframe tags.

I have also tried 'react-pdf', 'simple-react-pdf', but nothing seems to work.

Below is the code that is written on server side that is sending the pdf file. I have also tried sending the location of pdf file that is stored in location provided in the code below. But that also doesn't work.

app.get('/getFile', (req, res) => {
    const {email, courseid, filename} = req.query;
    console.log(email);
    console.log(courseid);
    console.log(filename);

    var filePath = `${__dirname}`+'/uploads/'+`${filename}`;

    fs.readFile(filePath , function (err,data){
        console.log(data);
        res.contentType("application/pdf");
        res.send(data);

    });

});

Upvotes: 1

Views: 2300

Answers (1)

ASHISH R
ASHISH R

Reputation: 4189

This worked for me:

Node:

app.get("/getFile", function(req, res) {
  res.sendFile(__dirname + "/test.pdf");
});

React:

      axios(`http://localhost:5000/getFile `, {
        method: "GET",
        responseType: "blob"
        //Force to receive data in a Blob Format
      })
        .then(response => {
          //Create a Blob from the PDF Stream
          const file = new Blob([response.data], {
            type: "application/pdf"
          });
          //Build a URL from the file
          const fileURL = URL.createObjectURL(file);
          //Open the URL on new Window
          window.open(fileURL);
        })
        .catch(error => {
          console.log(error);
        });

Upvotes: 2

Related Questions