Search code examples
node.jsgoogle-drive-apijspdf

How can I temporarily store a pdf in Firebase filesystem?

I am creating a pdf using JSPDF on server-side, in NodeJS. Once done, I want to create a new folder for the user in Google Drive, upload the pdf to said folder, and also send it to the client-side (browser) for the user to view.

There are two problems that I'm encountering. Firstly, if I send the pdf in the response -via pdf.output()- the images don't display correctly. They are distorted, as though each row of pixels is offset by some amount. A vertical line "|" instead renders as a diagonal "\". An example is shown below.

enter image description here
Before

enter image description here
After

My workaround for this was to instead save it to the filesystem using doc.save() and then send it to the browser using fs.readFileSync(filepath). However, I've discovered that when running remotely, I don't have file permissions to be saving the pdf and reading it. And after some research and tinkering, I'm thinking that I cannot change these permissions. This is the error I get:

Error: EROFS: read-only file system, open './temp/output.pdf'
at Object.openSync (fs.js:443:3)
at Object.writeFileSync (fs.js:1194:35)
at Object.v.save (/workspace/node_modules/jspdf/dist/jspdf.node.min.js:86:50626)
etc...

So I have this JSPDF object, and I believe I need to either, alter the permissions to allow writing/reading or take the jspdf object or, I guess, change it's format to one accepted by Google drive, such as a stream or buffer object?

The link below leads me to think these permissions can't be altered since it states: "These files are available in a read-only directory".
https://cloud.google.com/functions/docs/concepts/exec#file_system
I also have no idea 'where' the server filesystem is, or how to access it. Thus, I think the best course of action is to look at sending the pdf in different formats. I've checked jsPDF documentation for types that pdf.output() can return. These include string, arraybuffer, window, blob, jsPDF.
https://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html#output

My simplified code is as follows:

const express = require('express');
const fs = require('fs');
const app = express();
const { jsPDF } = require('jspdf');

const credentials = require(credentialsFilepath);
const scopes = [scopes in here];
const auth = new google.auth.JWT(
    credentials.client_email, null,
    credentials.private_key, scopes
);
const drive = google.drive({version: 'v3', auth});
//=========================================================================
app.post('/submit', (req, res) => {
  var pdf = new jsPDF();

  // Set font, fontsize. Added some text, etc.
  pdf.text('blah blah', 10, 10);

  // Add image (signature) from canvas, which is passed as a dataURL
  pdf.addImage(img, 'JPEG', 10, 10, 50, 20);

  pdf.save('./temp/output.pdf');

  drive.files.create({
    resource: folderMetaData,
    fields: 'id'
  })
  .then(response => {
    // Store pdf in newly created folder
    var fileMetaData = {
      'name': 'filename.pdf',
      'parents': [response.data.id],
    };
    var media = {
      mimeType: 'application/pdf',
      body: fs.createReadStream('./temp/output.pdf'),
    };
    drive.files.create({
      resource: fileMetaData,
      media: media,
      fields: 'id'
    }, function(err, file) {
      if(err){
        console.error('Error:', err);
      }else{
        // I have considered piping 'file' back in the response here but can't figure out how
        console.log('File uploaded');
      }
   });
  })
  .catch(error => {
    console.error('Error:', error);
  });

  // Finally, I attempt to send the pdf to client/browser
  res.setHeader('Content-Type', 'application/pdf');
  res.send(fs.readFileSync('./temp/output.pdf'));
})

Edit: After some more searching, I've found a similar question which explains that the fs module is for reading/writing to local filestore.
EROFS error when executing a File Write function in Firebase

Solution

  • I eventually came to a solution after some further reading. I'm not sure who this will be useful for, but...

    Turns out the Firebase filesystem only has 1 directory which allows you to write to (the rest are read-only). This directory is named tmp and I accessed it using the tmp node module [installed with: npm i tmp], since trying to manually reference the path with pdf.save('./tmp/output.pdf') didn't work.

    So the only changes to my code were to add in the lines:
    var tmp = require('tmp');
    var tmpPath = tmp.tmpNameSync();

    and then replacing all the instances of './temp/output.pdf' with tmpPath