CODEWITHSUNDEEP
javascriptfirebase-storage
Shivam Sahil
Shivam Sahil

Reputation: 4921

Firebase: Upload pdfFileFormat string as bytes/uint array to firestore

I have a pdfFileFormat string as shown below:

"%PDF-1.5
4 0 obj
<</Type /Page/Parent 3 0 R/Contents 5 0 R/MediaBox [0 0 612 792]/Resources<</Font<</FAAAAH 7 0 R/FAAAAJ 9 0 R/
FAAABD 13 0 R>>/XObject<</X1 11 0 R/X2 15 0 R>>>>/Group <</Type/Group/S/Transparency/CS/DeviceRGB>>>>
endobj
5 0 obj
<</Length 16 0 R/Filter /FlateDecode>>stream
...

When I view this request via postman, it appears as a pdf: enter image description here

I am trying to upload this to firebase and I can extract the text part as I showed below.

I tried these two methods:

uploadBytes uploadString

const getBytesData = () => {
    if (user) {
      console.log('Getting');
      getInvoicePDFStringByInvoiceId('129', user.token).then((data) => {
        console.log('Data = ', data);
        const blob = new Blob([data.message], { type: 'application/pdf' });
        const storageRef = ref(
          storage,
          'invoices/' + user.uid + '/' + '129.pdf'
        );
        console.log('Uploading the file now');
        uploadBytes(storageRef, blob)
          .then(() => {
            console.log('Uploaded a blob or file!');
          })
          .catch((error) => {
            console.log("Oops we're failing=  ", error.message);
          });
      });
    }
  };

  const uploadFromString = () => {
    if (user) {
      console.log('Getting');
      getInvoicePDFStringByInvoiceId('129', user.token).then((data) => {
        const storageRef = ref(
          storage,
          'invoices/' + user.uid + '/' + '129.pdf'
        );
        console.log('Uploading the file now');
        uploadString(storageRef, data.message)
          .then(() => {
            console.log('Uploaded a string');
          })
          .catch((error) => {
            console.log("Oops we're failing=  ", error.message);
          });
      });
    }
  };

but none seemed to be working. Can someone tell me how to achieve this? Or has someone already done something similar? Note that the above string is neither UTF-08 or base64 encoded, its just known as pdfFileFormat.

Upvotes: 0

Views: 161

Answers (1)

Shivam Sahil
Shivam Sahil

Reputation: 4921

I was able to sort this issue. Instead of converting the response into .text, I used .blob().then(data => {}) and then emitted the data back to frontend. Here's the complete code:

getInvoice().then((response) => {
    if (response.status !== 200)
      return {
        error: true,
        message: 'The requested invoice is unavailable at the moment',
      };
    else
      return response
        .blob()
        .then((data) => {
          return {
            error: false,
            message: 'Blob acquired successfully',
            blob: data,
          };
        })
        .catch((error) => ({ error: true, message: error.message }));
  })

And here's how I am emitting it:

const getUserInvoicePDFString: express.Handler = async (req, res) => {
  const invoiceId = req.params.id as string;
  const invoicePdf = await getInvoiceAsPdf(invoiceId);
  if (invoicePdf.blob) {
    const blob = invoicePdf.blob;
    res.type(blob.type);
    return blob.arrayBuffer().then((buf) => {
      res.send(Buffer.from(buf));
    });
  } else
    return res.status(400).json(
      synthesizeSuccessResponse({
        payload: invoicePdf,
      })
    );
};

Upvotes: 1

Related Questions