How do I access an asset's URL when linked via reference in Sanity Studio? - sanity

Question

I want to upload PDFs in Sanity Studio, then link to those PDFs in the main site content.
I've added a reference to a document which has a 'file' field in it to my simpleBlockContent input in Sanity Studio.
I've created a document schema for the PDF:
export default {
title: "PDF Upload",
name: "pdfDocument",
type: "document",
fields: [
{
name: "title",
type: "string",
title: "Title",
description: "This title will be used as a caption for the download.",
},
{
name: "pdfFile",
type: "file",
title: "PDF File",
options: {
accept: ".pdf",
},
validation: (Rule) => Rule.required(),
description: "Note that the file name will be visible to end users downloading the file.",
},
],
};
And I'm attempting to reference it in my input component's schema:
export default {
title: "Simple Block Content",
name: "simpleBlockContent",
type: "array",
of: [
{
title: "Block",
type: "block",
styles: [],
marks: {
annotations: [
{
name: "pdfLink",
type: "object",
title: "PDF download link",
fields: [
{
name: "pdfReference",
type: "reference",
title: "PDF Document",
to: [{ type: "pdfDocument" }],
},
],
},
],
},
},
],
};
However when I add pdfLink to my serializers.js in the frontend, nothing resembling a link to the file is present in the data passed to it from my _rawContent graphql query that handles all other page content.
How can I access the information needed to build a URL that links to the uploaded asset?

Answer 1

I've yet to do this in a serializer, but it looks as though the asset URL should be accessible in the returned document, according to the docs:
Example of returned asset document:
{
"_id": "image-abc123_0G0Pkg3JLakKCLrF1podAdE9-538x538-jpg",
"_type": "sanity.imageAsset", // type is prefixed by sanity schema
"assetId": "0G0Pkg3JLakKCLrF1podAdE9",
"path": "images/myproject/mydataset/abc123_0G0Pkg3JLakKCLrF1podAdE9-538x538.jpg",
"url": "https://cdn.sanity.io/images/myproject/mydataset/abc123_0G0Pkg3JLakKCLrF1podAdE9-538x538.jpg",
"originalFilename": "bicycle.jpg",
"size": 2097152, // File size, in bytes
"metadata": {
"dimensions": {
"height": 538,
"width": 538,
"aspectRatio": 1.0
},
"location":{ // only present if the original image contained location metadata
"lat": 59.9241370,
"lon": 10.7583846,
"alt": 21.0
}
}
}

Answer 2

I was looking for a way to get instant link in sanity studio when someone upload file in sanity and couldn't find any good solution so I came up with my own
Problem
let people upload files to sanity and get instant link that they can copy and paste in blog, case study etc
Solution
use slug as in option you have acces to doc where you can generate link my code
import { tryGetFile } from '#sanity/asset-utils'; // this function creates production link
const pdfUploader = {
name: 'pdfUploader',
title: 'Upload PDF and Get Link',
type: 'document',
preview: {
select: {
title: 'title',
},
},
fields: [
{
name: 'title',
title: 'Title',
description: 'Name displayed on pdf list',
type: 'string',
validation: (Rule) => [Rule.required()],
},
{
name: 'pdfFile',
title: 'Upload PDF File',
description: 'PDF File you want to upload, once you upload click generate URL',
type: 'file',
validation: (Rule) => [Rule.required()],
},
{
name: 'generatedPDFURL',
title: 'Generate URL Link to this pdf',
description:
'Click GENERATE to get Link to pdf file, if you by mistake change it, click generate again. Then Copy link below and paste it anywhere you want',
type: 'slug',
options: {
// this source takes all data that is currently in this document and pass it as argument
// then tryGetFile() - getting file from sanity with all atributes like url, original name etc
source: ({ pdfFile }) => {
if (!pdfFile) return 'Missing PDF File';
const { asset } = tryGetFile(pdfFile?.asset?._ref, {
// put your own envs
dataset: process.env.SANITY_DATASET,
projectId: process.env.SANITY_PROJECT_ID,
});
return asset?.url;
},
// this slugify prevent from changing "/" to "-" it keeps the original link and prevent from slugifying
slugify: (link) => link,
},
validation: (Rule) => [Rule.required()],
},
],
};
export default pdfUploader;
After this in sanity upload file and then click GENERATE to get link
Hope it helps people who are looking for similar solution, slug is not perfect choice but it's working :)