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

How to I render a File type that is downloadable

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).

I have this as a type
this works and I can upload a file in sanity studio. But what does the snippet look like to render it as

Well, you’ll need to query that data in your query first.
And then once you have the URL in he frontend, you can do something like:

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.

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.

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

Uhhh, nice! I didn’t knew about this attribute. Thanks!

hmm interesting, how do i use the
attribute?

You would pass it as part of the URL to the document, as mentioned in the documentation.

and how do I fetch the quiry url of that file type?

I showed you above. :)

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
and do i need to change something in the content type ?

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.

Can I render the PDF document as Iframe instead by download?

You could check this: https://mozilla.github.io/pdf.js/

Thanks

Thanks alot guys I got it working