Blob data renders as blank doc when sent to server

Hi,

I’m rendering a pdf document on a client, which I then subsequently want to sent to a storage server. The PDF displays correctly on the browser (using the URL object) but when the blob data is sent to the server using formdata the pdf renders as a blank page.

Client Code:

<BlobProvider document={doc} filename={filename}>
        {({ blob, url, loading }) => (
          !loading && <FontAwesomeIcon icon={faFileDownload} onClick={() =>  sendToServer(blob) }/>)}
</BlobProvider>

const sendToServer = (blob) => {
    var formData = new FormData();
    formData.append('pdf', blob);

    fetch('/files', {
      method: 'POST',
      body: formData,
    })
  };

Server Code:

var upload = multer();
var processUpload = upload.single('pdf');

app.post('/files', processUpload, function(req, res) {
  fs.writeFileSync('buffer.pdf', req.file); // or req.file.buffer

  // file is a valid, but blank pdf
});

Am I doing something wrong in encoding the file or not waiting for the render to finish? I can’t see what it is. If I examine the pdf on the server side I can see the meta data has correctly been written by react-pdf so I don’t believe its getting corrupted on the fly.

Many thanks, Darragh

[darraghpjones]

Found alternative solution

[makeupsomething]

Cool, yeah we almost had the exact same approach 👍