📆 Don't miss our Sanity Showcase virtual meetup on March 20th!

How to render and download a file type in Sanity.io

17 replies
Last updated: May 19, 2022
How to I render a File type that is downloadable
May 19, 2022, 7:58 AM
You’ll need to use a file type as part of your schema. This will enable you to upload documents, such as PDFs in your studio. Then you can get their upload URL in your queries, and create a download feature on your frontend (typically a
<a>
element with the
download
attribute would do).
May 19, 2022, 8:02 AM
I have this as a type
{
            name: "installatiesheet",
            title: "Installatiesheet",
            type: "file",
        },
this works and I can upload a file in sanity studio. But what does the snippet look like to render it as

<a>
May 19, 2022, 8:04 AM
Well, you’ll need to query that data in your query first.
"url": installatiesheet -> url
And then once you have the URL in he frontend, you can do something like:

<a href={url} download>Download</a>
May 19, 2022, 8:05 AM
FYI: the
download
attribute does not work, if the file url has a different origin as the website. See https://html.spec.whatwg.org/multipage/links.html#downloading-resources
That is the case for all files uploaded to Sanity Content Lake.
May 19, 2022, 8:08 AM
There are workarounds for this, like using a server-less api request to proxy the file to the client, but I wouldn’t recommend it.
May 19, 2022, 8:10 AM
Ah yes, you’re right. In that case, using the
?dl
attribute from Sanity asset pipeline is the way to go I guess: https://www.sanity.io/docs/image-urls#dl-9836df902327
May 19, 2022, 8:10 AM
Uhhh, nice! I didn’t knew about this attribute. Thanks!
May 19, 2022, 8:11 AM
hmm interesting, how do i use the
dl
attribute?
May 19, 2022, 8:14 AM
You would pass it as part of the URL to the document, as mentioned in the documentation.
May 19, 2022, 8:14 AM
and how do I fetch the quiry url of that file type?
May 19, 2022, 8:15 AM
I showed you above. :)
May 19, 2022, 8:19 AM
sorry I'm not that bright hahaha I'm not geting this to work do you have a example for how to use that in
return (
)
and do i need to change something in the content type ?
May 19, 2022, 8:25 AM
I mean, I can’t give you much more than what I already shared in that thread. You will need to query the URL to your file as shown in one of my message earlier in this thread, and then you pass that URL to your
<a>
anchor.
May 19, 2022, 8:26 AM
Can I render the PDF document as Iframe instead by download?
May 19, 2022, 8:30 AM
May 19, 2022, 8:35 AM
Thanks
May 19, 2022, 8:37 AM
Thanks alot guys I got it working
May 19, 2022, 8:44 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
Hey all - what’s the quickest way to batch delete all documents of a certain type? It looks like the `sanity` cli tool allows...Jan 29, 2021
Rendering nested block contentJan 18, 2021
In the tutorial, there is samples of what the API returns as JSON. Is there a way to view these ?Jan 11, 2021
DOMParser is not defined at defaultParseHtmlDec 3, 2020
Next.js and Vercel - Error! No Output Directory named "dist" foundAug 8, 2022
Warning: Data for Page Exceeds the Threshold of 128 kBAug 17, 2022
List Arrays - Is it Possible to Fill a List Array Within a Schema Asynchronously?Mar 16, 2021
Custom Document Views - Is it Even Possible to Use the Structure Builder?Apr 21, 2022
How to get the number of nested/children components in a GROQ query.Jan 19, 2024
TypeError: Cannot Read Properties of Null (Reading 'jsonType')Sep 28, 2022

Related contributions

Turbo Start Sanity
- Template

The battle-tested Sanity template that powers Roboto Studio's websites

Go to Turbo Start Sanity

Schema UI - Next.js Sanity Starter
- Template

A Next.js starter template with Next.js 15, Tailwind CSS, shadcn/ui, and Sanity CMS with Live Editing. Get production-ready React components with matching Sanity schemas and queries. Build dynamic pages faster while keeping full control over customization.

Serge Ovcharenko
Go to Schema UI - Next.js Sanity Starter

The Swaddle
- Made with Sanity

A new brand identity to represent a more mature company, to signify The Swaddle’s evolution from publisher to production house, combined with an easier to navigate platform that can surface multiple content types - drawing readers through The Swaddle’s content offering.

Nightjar
Go to The Swaddle