Connor Rowland
Jun 24, 2021
Updated: Mar 1, 2022
We can begin by adding a PDF to the Contentful media library. First, navigate to the 🖼️ Media tab and click the blue button in the top right corner that says Add Asset.
It should look something like this:
This is where you can drag and drop your PDF, and give it a title and description.
Now that you've uploaded it, let's say you want to get a URL you can use to send people to your PDF: click on the ⬇️ download icon, which will open the PDF in a new tab.
You can then use this link to share your PDF 🎉
One issue with this solution is how Contentful updates these URLs over time.
"Contentful updates the URL for the asset every time you update the asset itself. So what should I do for PDFs that change over time?"
Fortunately, there's a solution to this issue.
You can create a 🧩 Content Type for a PDF that looks like the following:
When using this Content Type, you can either reference an existing PDF in the Contentful media library in this PDF file or create a new one.
To connect this component to a live web page, you can pull this data from the Content Delivery API and funnel it into a native HTML PDF viewer (note the type="application/pdf"):
<object
width="100%"
data={//data from Contentful}
type="application/pdf"
style={{ height: '100vh', minHeight: '100vh' }}
>
<iframe
width="100%"
style={{ height: '100vh', minHeight: '100vh' }}
src={//data from Contentful}
>
<p>Unfortunately, this browser does not support PDF rendering</p>
</iframe>
</object>
Then, you can publish this page to a URL on your site and send visitors there. Whenever the PDF updates in Contentful, it will automatically pull the most recent version of the asset.
It's called the Waterfall method.
Why? Because the process uses your current challenges to inform a vision their entire team can work towards, and make Contentful the tool to pull it all together.