using blob , prepend an image and upload to firebase storage doesn't work, but saving locally works

[hyson007]

hi,

Thanks for the great work.
I'm trying to prepend a signature image at the bottom, and able to get it work when save locally

var img = resizeBase64(imageURL, 128, 128);
var props = {
        outputType: "blob",
        returnJsPDFDocObject: true,
...
const pdfObject = jsPDFInvoiceTemplate(props);
pdfObject.jsPDFDocObject.addImage(img, "jpeg", 10, 250); 
pdfObject.jsPDFDocObject.save(`${newFileName}.pdf`);  // this works correctly, with the image at the bottom.

var blob = pdfObject.blob; 
var path = `pdfs/${newFileName}.pdf`; 
const pdfRef = ref(storage, path);

uploadBytes(pdfRef, blob) // blob here seems still refer to the original PDF, not the one with addImage
      .then(() => {
        toast.success("PDF uploaded successfully");
      })
      .catch(() => {
        toast.error("PDF upload failed");
      });

However the PDF on the firebase is missing the image (it's the original PDF) , I suspect the way I use blob maybe incorrect, could you advise?

[Edison Neza]

Hi @hyson007,
thanks mate!

Seems an interesting situation actually. Haven't thought about this case.
Just to try it since you have it already in place, can you assign to a variable the new doc object, as .output('blob'), and try to upload the new one?

const pdfObject = jsPDFInvoiceTemplate(props);
pdfObject.jsPDFDocObject.addImage(img, "jpeg", 10, 250); 
let newPdfObject = pdfObject.jsPDFDocObject.output('blobl');  // something like this, not sure if it works

var path = `pdfs/${newFileName}.pdf`; 
const pdfRef = ref(storage, path);
uploadBytes(pdfRef, newPdfObject) // refer here to the new object with the image
      .then(() => {
        toast.success("PDF uploaded successfully");
      })
      .catch(() => {
        toast.error("PDF upload failed");
      });

Let me know if it works, so I can add in the readme.

Thanks!

[hyson007]

@edisonneza it works perfect! thanks again