0

I'm using react-pdf library and it generates me a blob and url as shown in the docs: https://react-pdf.org/advanced#on-the-fly-rendering Blob object copied from the console:

{blob: Blob}
blob: Blob
size: 3597607
type: "application/pdf"
[[Prototype]]: Blob
[[Prototype]]: Object

I try to upload this to S3. Frontend code:

            const fileName = Date.now().toString() + ".pdf";
            const file = new File([blob], fileName);

            axios
              .post("api/upload-poster", {
                fileName,
                file,
              })
              .then(({ data }) => console.log(data));

Backend code (nextjs handler):

      const { fileName, file } = req.body;

      const params = {
        Bucket: "my-bucket-name",
        Key: fileName,
        Body: file,
        contentType: "application/pdf",
      };

      const uploaded = await S3.upload(params).promise();
      res.status(200).json({ uploaded });

I get the error Error: Unsupported body payload object

Karolis
  • 143
  • 3
  • 12
  • 1
    Q: Can you show us more of the code that's uploading the file? Is it doing any error checking? Does it give an error? SUGGESTION: try this: https://javascript.plainenglish.io/how-to-upload-files-to-aws-s3-in-react-591e533d615e – paulsm4 Oct 04 '21 at 15:46

1 Answers1

1

Based on the documentation for AWS.S3.Upload, you need to be passing a buffer, blob object or a stream.

Pass the blob object - not the blob URL - back to your API as part of params and the rest of your code should work perfectly fine.

Ermiya Eskandary
  • 15,323
  • 3
  • 31
  • 44
  • I get `err: Error: Unsupported body payload object` – Karolis Oct 04 '21 at 16:17
  • 1
    Please add how you're generating the blob to the question and I can take a look – Ermiya Eskandary Oct 04 '21 at 16:20
  • If I go to this url it shows me a pdf file `blob:http://localhost:3000/663bebbc-f5ea-41d5-991e-c44c36af2254` This is provided by the react-pdf library when pdf is created. They also provide `blob` object. Doc reference: https://react-pdf.org/advanced#on-the-fly-rendering – Karolis Oct 04 '21 at 16:28
  • 2
    If your blob object is an actual blob, the above code works as I've tested it - if you don't add your blob generating code to the question, I'm afraid I can't help anymore – Ermiya Eskandary Oct 04 '21 at 16:38
  • So blob here should be a string or an object? var file = new File([blob], filename); – Karolis Oct 04 '21 at 18:02
  • 1
    @Karolis It's an object - check my updated answer, you need to get the raw blob not the URL for it - if you shared how you generated your PDF, I could give you a more succinct answer – Ermiya Eskandary Oct 04 '21 at 18:21
  • 1
    Thanks for all the help. I have updated my post. The react-pdf does it's magic and generates the pdf as shown in that url from docs. – Karolis Oct 05 '21 at 05:36
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/237809/discussion-between-ermiya-eskandary-and-karolis). – Ermiya Eskandary Oct 05 '21 at 07:01