Upload react-pdf dynamically generated file to Sanity using NextJS

Question

I'm working on an e-commerce app built on NextJS and Sanity, so far I've made some mock products with all the necessary requirements, a user login system and checkout. I've been trying to make an invoice system so that when the user confirms an order 3 things must happen:

• send all the order data to a react-pdf component and generate the invoice(working)
• post the invoice file to the sanity schema so that the user has access to it when he goes to his order history page(not working)
• email both the company and the client about the order(not implemented yet but I can do it)

ReactPDF allows me to access the pdf through a hook that returns me the blob of the file and the URL. I've tried to POST both of them but the url returned 404 and the blob didn't upload at all. Searched the docs of both ReactPDF and Sanity and I couldn't find anything, although I think it has to do something with this endpoint from Sanity:

myProjectId.api.sanity.io/v2021-06-07/assets/files/myDataset

This is how I POST the order to my sanity studio

const { data } = await axios.post(
    '/api/orders',
    {
        user: userInfo,
        invoice_id: orders.length + 1,
        orderItems: cartItems.map((item) => ({
            ...item,
            slug: undefined
        })),
        billingData,
        paymentMethod,
        itemsPrice,
        taxPrice,
        totalPrice
    },
    {
        headers: {
            authorization: `Bearer ${userInfo.token}`
        }
    }
);

I've tried making 2 POST requests, one for the invoice_file alone, trying to post the blob or the url but none did work. The schema for invoice file was updated for the type of post each time so I'm 99% sure that wasn't the issue, anyway here's how the schema for invoice_file looks as for file:

        {
            name: 'invoice_file',
            title: 'Invoice',
            type: 'file',
            options: {
                storeOriginalFilename: true
            }
        },

If there would be any other code snippets relevant please let me know. I really don't know how to find the solution for this as it's the first time trying to do such thing, so help would be much appreciated. Thanks in advance!

Answer 1

I apologies as I'm not really active here but it's hard to pass on your question especially as I'm working on something similar. There's probably other ways to do this but I suggest you work use the official Sanity client. There's a specific section in the README that tells us how to do the file uploads or here.

So here's kinda the very small snippet:

import {
  Document,
  pdf,
} from "@react-pdf/renderer";

const doc = <Document />;
const asPdf = pdf([]); // {} is important, throws without an argument
asPdf.updateContainer(doc);
const blob = await asPdf.toBlob();

// `blob` here is coming from your react-pdf blob
const fileName = "customfilename.pdf";
client.assets.upload("file", blob, { filename: fileName }).then((fileAsset) => {
  console.log(fileAsset", fileAsset);

  // you can then use the fileAsset to set and reference the file that we just uploaded to our document
  client.patch("document-id-here").set({
     invoice_file: {
       _type: "file",
       asset: {
         _type: "reference",
         _ref: fileAsset._id,
       },
     },
  }).commit();
});