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

To render a downloadable file in Sanity, you'll need to query the file URL and handle the download properly on your frontend. Here's how:

Schema Setup

First, define a file field in your schema:

{
  name: "document",
  title: "Document",
  type: "file",
}

Querying the File

In your GROQ query, get the file URL like this:

*[_type == "yourDocType"] {
  "fileUrl": document.asset->url
}

Rendering the Download Link

The key thing to know is that the standard HTML download attribute won't work for files hosted on Sanity's CDN (different origin). Instead, use the ?dl query parameter that Sanity provides:

// React/Next.js example
<a href={`${fileUrl}?dl`}>
  Download File
</a>

Or if you want to specify a custom filename:

<a href={`${fileUrl}?dl=${filename}`}>
  Download {filename}
</a>

Complete Example

export default function FileDownload({ document }) {
  const fileUrl = document.fileUrl;
  const fileName = document.fileName || 'download';
  
  return (
    <a 
      href={`${fileUrl}?dl=${fileName}`}
      className="download-button"
    >
      Download {fileName}
    </a>
  );
}

The ?dl parameter tells Sanity's CDN to set the proper Content-Disposition header, which triggers the browser's download behavior instead of trying to display the file in the browser.

You can find more details in the Sanity file type documentation and this community answer about rendering files.