How to access filename of file object in Sanity preview for list view?

2 replies
Last updated: May 26, 2021
how can you get the filename of an object of type file to preview it in a list view? it is easy to get the nested fields to preview content, but i have no idea how to access the objects data istself

const pdf: IObjectType = {
  name: 'pdf',
  title: 'PDF',
  type: 'file',
  description: 'Upload PDF files.',
  fields: [
    {
      name: 'title',
      title: 'Descriptive Name for PDF in Download Card',
      type: 'string',
      validation: (Rule: IRuleType): IRuleType => Rule.required(),
    },
  ],
  …,
  preview: {
    …
  }
}

AI Update

To access the filename of a file asset in your preview, you need to use the select property with dot notation to reach into the nested asset object. The filename is stored at asset.originalFilename.

Here's how to configure your preview:

const pdf: IObjectType = {
  name: 'pdf',
  title: 'PDF',
  type: 'file',
  description: 'Upload PDF files.',
  fields: [
    {
      name: 'title',
      title: 'Descriptive Name for PDF in Download Card',
      type: 'string',
      validation: (Rule: IRuleType): IRuleType => Rule.required(),
    },
  ],
  preview: {
    select: {
      title: 'title',
      filename: 'asset.originalFilename'  // Access the filename from the asset
    },
    prepare({title, filename}) {
      return {
        title: title || filename,  // Use title if available, otherwise filename
        subtitle: filename  // Show filename as subtitle
      }
    }
  }
}

The key is understanding that file type fields in Sanity store a reference to an asset object, and that asset has properties like originalFilename, size, extension, etc. You can access these nested properties in the select object using dot notation.

If you want to show additional file information, you can select multiple asset properties:

preview: {
  select: {
    title: 'title',
    filename: 'asset.originalFilename',
    extension: 'asset.extension',
    size: 'asset.size'
  },
  prepare({title, filename, extension, size}) {
    return {
      title: title || filename,
      subtitle: `${filename} (${extension?.toUpperCase()}) - ${(size / 1024).toFixed(2)} KB`
    }
  }
}

This works because the preview configuration system allows you to use dot notation to access nested fields and referenced documents. The same pattern works for accessing fields from referenced documents (like author.name) or nested objects (like asset.originalFilename).

Show original thread
2 replies
Actually, I think I get you now. By setting that title in
fields
on
file
, it overrides the default preview (which appears to be
originalFilename
).
In your
file
preview, can you try:

select: {
  title: 'asset.originalFilename'
}
ahh, cool… that works, thanks alot

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?