Skip to content
🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup
Get help on Slack

Issue with getting file info in custom preview component for array item

8 replies
Last updated: Mar 14, 2023
Hi. I'm currently making a custom 
component.preview
for an array item. For an 
image
type in the array I get the props data I need passed down, specifically the props.media object. For the 
file
type I don't get any useful info apart from the title and the props.media object is undefined. Is this a bug or is there another way to get the 
file
info so I can style a custom preview? It also doesn't return the array key of the item.
Mar 14, 2023, 10:27 AM
Can you share your code?
Mar 14, 2023, 2:37 PM
Hey
user S
. So it's the props inside the preview component of 
video
that is not providing the info like 
image
does.

export default defineField({
  name: 'bookGallery',
  title: 'Gallery',
  type: 'array',
  options: {
    layout: 'grid'
  },
  of: [
    defineArrayMember({
      name: 'image',
      title: 'Image',
      type: 'image',
      options: {
        hotspot: true
      },
      components: {
        preview: BookGalleryImagePreview
      }
    }),
    defineArrayMember({
      name: 'video',
      title: 'Video',
      type: 'file',
      components: {
        preview: BookGalleryVideoPreview
      },
    })
  ]
})
Mar 14, 2023, 3:21 PM
Would you find it useful for me to provide a simple 'BookGalleryVideoPreview' example?
Mar 14, 2023, 3:45 PM
No, that’s ok, thankss! I can put together a minimal example for you after I get out of my morning meetings.
Mar 14, 2023, 3:46 PM
Thanks a lot for looking at this!
Mar 14, 2023, 3:46 PM
Ok, you can grab details from your file’s asset using a 
preview.select
. Below is an example of grabbing the entire asset or just a single field:
{
          name: 'video',
          title: 'Video',
          type: 'file',
          preview: {
            select: {
              media: 'asset',
              title: 'asset.originalFilename',
              url: 'asset.url'
            },
          },
          components: {
            preview: (props) => {
              console.log(props.title, props.media, props.url);
              return props.renderDefault(props);
            },
          },
        },
Mar 14, 2023, 5:38 PM
Nice. Thanks for this!
Mar 14, 2023, 7:38 PM
You’re welcome!
Mar 14, 2023, 9:39 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.

Get started for freeExplore the demo

Was this answer helpful?