Go Behind the Experience to see how Tecovas brings the West to life with Sanity 🤠 July 18th

How to display image filename in Sanity.io with fields and preview

10 replies
Last updated: Sep 5, 2022
When using
image
with
fields
the filename gets removed and says "Untitled". Without the
fields
the filename is shown. How can I bring it back when using
fields
?
Sep 3, 2022, 5:58 PM
It sounds like you’ll want to set up a preview to tell the Studio what should be your title.
Sep 3, 2022, 6:00 PM
I see! But I would need to first declare something like a title field for this, right? Or is there a way to use the OG filename (standard behaviour)? Without any additional fields it does work.
Sep 3, 2022, 8:49 PM
You won't need to set a
title
field, but you need to select the field you want as a title in your
preview
. Something like this should be sufficient (setting the right-side to the field you want):

preview: {
  select: {
    title: ‘asset.url’
  }
}
Sep 3, 2022, 9:58 PM
That only works if I have a field to set it to! I want it to revert to the default behaviour and use the image filename
Sep 4, 2022, 10:15 AM
I’m curious if you tried this, as the properties on
asset
are read-only and automatically set (i.e., you don’t need to do anything). That said, I was looking for
asset.originalFilename
rather than
asset.url
.
Sep 4, 2022, 3:33 PM
With no fields, I get `A`:

{
	name: 'myArray',
	title: 'My Array',
	type: 'array',
	of: [
		{
			name: 'myImage',
			type: 'image',
		},
	],
}
Setting an
alt
field, I get `B`:

{
	name: 'myArray',
	title: 'My Array',
	type: 'array',
	of: [
		{
			name: 'myImage',
			type: 'image',
			fields: [
				{
					name: 'alt',
					title: 'Alt Text',
					type: 'string',
				}
			],
		},
	],
}
Adding a preview, I get `C`:


{
	name: 'myArray',
	title: 'My Array',
	type: 'array',
	of: [
		{
			name: 'myImage',
			type: 'image',
			fields: [
				{
					name: 'alt',
					title: 'Alt Text',
					type: 'string',
				}
			],
			preview: {
				select: {
					title: 'asset.originalFilename'
				},
			}
		},
	],
}
I can see that the image is no longer previewed in the list, so I suspect you’ll need to specify a prepare function in your preview and add a
media
property. That’ll be a valid need, but is additional to the original question.
For context, the original suggestion (using
asset.url
) returns the url to the image (e.g.,
<https://cdn.sanity.io/images/PROJECT_ID/DATASET/fileNameHash>…
).
Sep 4, 2022, 3:43 PM
Hey
user A
, thank you for the continuous support and this long answer!
This is how my image field is structured:

{

name: "assetFiles",

type: "array",

title: "Files",

of: [

{

type: "image",

options: {

isHighlighted: true,

},

fields: [

{

name: "caption",

type: "string",

title: "Bildunterschrift",

options: {

isHighlighted: true,

},

},

{

name: "fullscreen",

type: "boolean",

title: "Vollformat",

initialValue: false,

options: {

layout: "checkbox",

isHighlighted: true,

},

},

],

},

],

fieldset: "assets",

preview: {

select: {

title: "asset.originalFilename",

},

},

},
Sep 5, 2022, 12:25 PM
Hey
user A
, thank you for the continuous support and this long answer!
This is how my image field is structured:

{

name: "assetFiles",

type: "array",

title: "Files",

of: [

{

type: "image",

fields: [

{

name: "caption",

type: "string",

title: "Bildunterschrift",

options: {

isHighlighted: true,

},

},

{

name: "fullscreen",

type: "boolean",

title: "Vollformat",

initialValue: false,

options: {

layout: "checkbox",

isHighlighted: true,

},

},

],

},

],

fieldset: "assets",

preview: {

select: {

title: "asset.originalFilename",

},

},

},

As you can see, I implemented your code from
C
.
I then uploaded a fresh image, which automatically results in
Untitled
(and, as you said, no image preview). If I put some text in the caption field, the captions is shown as Image title, but never the image filename.
I’m super sorry if there is some mistake in my code or my understanding of your reply!
Sep 5, 2022, 12:31 PM
No problem, Max! It looks like your preview is on the array. Could you please try putting it on the image (i.e., right after the fields array you set on your image)?
Sep 5, 2022, 2:16 PM
user A
Ahhhh! Yes, this works!! TYSM ❤️
Sep 5, 2022, 3:19 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.

Was this answer helpful?