Adding a downloadable file URL after uploading a PDF in Sanity.io
4 replies
Last updated: Jan 3, 2022
M
hey all! I have a file upload field that content editors can upload the pdf file. But is it possible to show the downloadable file url after the files are uploaded?
Dec 29, 2021, 4:53 PM
M
The idea is to get the accessible file URL so that users can go to sanity file url
Jan 3, 2022, 10:17 PM
Got it. So if I'm understanding correctly: you specifically just want to see a link that will lead to the file? Or do you want a link that opens the file in a separate tab? Either way, you'd use a custom input component below the file upload that is a) hidden if no file has been uploaded b) queries for the asset's url and c) renders some sort of React component. The following will give you a custom input component that opens a link to the asset in a separate tab. If you'd just like to render the url itself, you can change the render method to show the entire url instead.
Note that this does not currently write any data to the document, though.
//in your document schema
//don't forget to import UrlDownload.js at the top
{
name: 'upload',
title: 'Upload',
type: 'object',
fields: [
{
name: 'file',
title: 'File',
type: 'file'
},
{
name: 'link',
title: 'Link',
type: 'string',
hidden: ({parent}) => !parent?.file,
inputComponent:UrlDownload
}
]
}//UrlDownload.js
import React, { useEffect, useState } from 'react'
import sanityClient from "part:@sanity/base/client"
const client = sanityClient.withConfig({apiVersion: '2021-03-25'})
const UrlDownload = props => {
const [link, setLink] = useState()
useEffect(() => {
const getLink = async () => {
const assetLink = await client.fetch(`*[_id == $id][0].url`, { id: props.parent.file.asset._ref})
setLink(assetLink)
}
getLink()
}, [])
return (
<a
href={`${link}`}
target="_blank"
>
Download file
</a>
)
}
export default UrlDownloadJan 3, 2022, 10:57 PM
Got it. So if I'm understanding correctly: you specifically just want to see a link that will lead to the file? Or do you want a link that opens the file in a separate tab? Either way, you'd use a custom input component below the file upload that is a) hidden if no file has been uploaded b) queries for the asset's url and c) renders some sort of React component. The following will give you a custom input component that opens a link to the asset in a separate tab. If you'd just like to render the url itself, you can change the render method to show the entire url instead.
Note that this does not currently write any data to the document, though.
//in your document schema
{
name: 'upload',
title: 'Upload',
type: 'object',
fields: [
{
name: 'file',
title: 'File',
type: 'file'
},
{
name: 'link',
title: 'Link',
type: 'string',
hidden: ({parent}) => !parent?.file,
inputComponent:UrlDownload
}
]
}//UrlDownload.js
import React, { useEffect, useState } from 'react'
import sanityClient from "part:@sanity/base/client"
const client = sanityClient.withConfig({apiVersion: '2021-03-25'})
const UrlDownload = props => {
const [link, setLink] = useState()
useEffect(() => {
const getLink = async () => {
const assetLink = await client.fetch(`*[_id == $id][0].url`, { id: props.parent.file.asset._ref})
setLink(assetLink)
}
getLink()
}, [])
return (
<a
href={`${link}`}
target="_blank"
>
Download file
</a>
)
}
export default UrlDownloadJan 3, 2022, 10:57 PM
M
user M
Thank you very much. I just want to see the link to file.Jan 3, 2022, 11:09 PM
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.