Get help on Discord

Discussion of a bug with nested fields in the Image schema type in Sanity.io

19 replies
Last updated: Oct 17, 2022
Hi everyone!
We have noticed
another problem with the 
Image
schema type in Sanity. We have created an image with nested fields (with fields like “alternative text” and “image credits”). After re-uploading the image multiple times, the edit button which opens the modal with the nested fields is hidden (no error in the console). After refreshing the page button is back in its place. Have anyone experienced similar problems? Have you solved this issue?
Any help would be appreciated


Sanity version:
"@sanity/base": "^2.30.1",
AI Update

I understand this frustrating issue! This sounds like a UI state bug in Sanity Studio v2 where the edit button for image fields with nested fields (like alt text, credits, etc.) disappears after re-uploading the image multiple times, and only reappears after a page refresh.

First, I need to mention something important: you're running @sanity/base: ^2.30.1, which is Studio v2. Studio v2 support officially ended on December 7, 2023, meaning no further bug fixes or security patches are being released for this version.

Why this happens:

This is typically a state management issue in the v2 Studio where the image input component doesn't properly update its internal state after the asset reference changes during re-upload. The component gets stuck thinking it's still in "uploading" or "processing" mode and hides the edit button accordingly. Since the page refresh fixes it, this confirms it's a component state issue rather than a data problem.

Your options:

  1. Upgrade to Studio v3/v4 (Recommended) - This is really your best path forward. Studio v3 was completely rewritten and many of these UI state management issues from v2 were resolved. The migration guide is straightforward, and your image schema with nested fields will work the same way. You'll move from the @sanity/base package structure to a single sanity package.

  2. Try the latest v2 version - If you absolutely must stay on v2 temporarily, you could try upgrading to the very last v2 release to see if any late bug fixes addressed this, though it's unlikely since v2 only received critical fixes after v3 launched.

  3. Temporary workaround - You could build a custom image input component that forces a re-render after upload, but this is really just a band-aid and not worth the effort given that v2 is no longer supported.

Bottom line: Since Studio v2 is deprecated and unsupported, bugs like this won't be fixed. Your best move is to plan a migration to the current Studio version where this issue doesn't exist. Many community members experienced various UI state issues like this in v2, which was one of the driving reasons for the v3 rewrite.

Side notes: we use 
"sanity-plugin-media"
in our project, and also it’s worth to mention that this bug occurs in different document types/fields.
Hello 🥕! (🙃)Could you share the 
image
schema and one where you have nested the image into? 
Sanity-plugin-media
only helps you display your assets in your studio, it does not have any influence on the inline functions.
Hi,
thanks for the quick response. Here is the image schema (I wanted to keep it short so it’s the lighten version where bug occurs):
```
Hi,
thanks for the quick response. Here is the image schema (I wanted to keep it short so it’s the lightest version where the bug occurs):

{
  title: "Image test",
  name: "imagetest",
  type: "image",
  fields: [
    {
      title: "Alternative text",
      name: "alternativeText",
      type: "string",
      description: `Alt text for the image`,
    },
    {
      title: "Image Credit",
      name: "credit",
      type: "string",
    }
  ],
},
When I was recreating the bug, it was hard for me to find it in localhost, I had to deploy the version for my hosted studio. Maybe that could be a hint.
🙂
Lightest document schema:
export const Testtest = {
  name: "testtest",
  type: "document",
  title: "Test test",
  fields: [
    {
      title: "Image test",
      name: "imagetest",
      type: "image",
      fields: [
        {
          title: "Alternative text",
          name: "alternativeText",
          type: "string",
          description: `Alt text for the image`,
        },
        {
          title: "Image Credit",
          name: "credit",
          type: "string",
        }
      ],
    },
  ]
}
export const imageTest = {
  name: "imageTest",
  type: "object",
  title: "Test Image",
  fields: [
    {
      title: "Image Title",
      name: "imageTitle",
      type: "image",
      fields: [
        {
          title: "Alternative text",
          name: "altText",
          type: "string",
          description: `Alt text for the image`,
        },
        {
          title: "Image Credit",
          name: "credit",
          type: "string",
        }
      ],
    },
  ]
}
  fields: [
    {
      name: 'caption',
      type: 'string',
      title: 'Caption',
      options: {
        isHighlighted: true // <-- make this field easily accessible
      }
    },
    {
      // Editing this field will be hidden behind an "Edit"-button
      name: 'attribution',
      type: 'string',
      title: 'Attribution',
    }
  ]
export const Testtest = {
  name: "testtest",
  type: "document",
  title: "Test test",
  fields: [
    {
      title: "Image test",
      name: "imagetest",
      type: "image",
      fields: [
        {
          title: "Alternative text",
          name: "alternativeText",
          type: "string",
          description: `Alt text for the image`,
        },
        {
          title: "Image Credit",
          name: "credit",
          type: "string",
        }
      ],
    },
  ]
}

So you need to change / understand 2 things:• schemas are objects, not functions, so you need to use the right way to write and export them
🙂 See how I export the schemas? That’s the right way 😉 • Image options, which are these fields are not editable within the upload workflow (which is your browser doing the work) but with the button
✏️ which will also show you the hotspot options etc. Ylou can also make extra fields more accessible by adding a 
isHighlighted: true
and make your editors always fill them in by setting validations. Another Tipp: try to refractor your schemas for readability, especially if you want to reuse your schemas (this makes your code more scalable).


// imageTest.js 
export default {
    name: "imageTest",
    type: "image",
    title: "Test Image",
    fields: [
        {
            title: "Alternative text",
            name: "altText",
            type: "string",
            description: `Alt text for the image`,
            // try setting this 👇 to false and see what happens in your studio 😉
            options: {
                isHighlighted: true // <-- make this field easily accessible
            }
        },
        {
            title: "Image Credit",
            name: "credit",
            type: "string",
            // try setting this 👇 to false and see what happens in your studio 😉
            options: {
                isHighlighted: true // <-- make this field easily accessible
            }
        }
    ],
}


// testDoc.js
export default {
    name: "testDoc",
    type: "document",
    title: "Test Doc",
    fields: [
        {
            title: "Image test",
            name: "imageTest",
            type: "imageTest",
            options: {
                hotspot: true // <-- Defaults to false
            }
        },
    ]
}
Hope that helps!
(pics: one with highlighted and one without highlighted fields -&gt; without makes them editable from a modal….)
Thanks for the response, I think that your recommendations are not answering my problem. Now I realised that I have prepared test schema for you without the
options: {
   isHighlighted: true
}
but of course my production image has it on the fields (as seen on the attached video).
• According to the 1 dot: Is there any difference between 
export default { ... }
from 
export const Testtest = {}
apart from the way how it is imported in other files? I don’t quite get why my approach is bad here.• According to the 2 dot: 
options are not editable within the upload workflow (which is your browser doing the work) but with the button
. I know that image fields marked as highlighted can be modified in modal after clicking the pencil button. My problem described in this thread is that this button is not visible after multiple re-uploads of the image (same as the three dots button)
Thanks for the response, I think that your recommendations are not answering my problem. I have prepared test schema for you without the
options: {
   isHighlighted: true
}
because I would like to have these fields a bit more hidden (as seen on the attached video).
• According to the 1 dot: Is there any difference between 
export default { ... }
from 
export const Testtest = { ... }
apart from the way how it is imported in other files? I don’t quite get why my approach is bad here.• According to the 2 dot: 
options are not editable within the upload workflow (which is your browser doing the work) but with the button
. I know that image nested fields (not highlighted) can be modified in modal after clicking the pencil button. My problem described in this thread is that this button is not visible after multiple re-uploads of the image (same as the three dots button)
Ah now I understand your issue and I can reproduce. I will investigate.(a small tipp: a 1 sentence summary at the top of your 1. message and posting your code in the thread, helps us understand the questions better
🙂 )
When it comes to writing code i would stick to a certain convention, although the other way might work …
I have reported the bug, but no idea, when this will be fixed… until now, you can also try uploading assets in bulk through the media plugin, our HTTP API for assets or with the cli
PS: I will now mark it as resolved, because we do not track issues in the help channel
🙂
Thanks for your help :)
Hi
user J
, is there any progress with the fix for this bug? 🙂 If not, can I get a Github issue/ticket for it to track it?
Friendly reminder
user J
I will have a look now I am back 😊
Hi
user J
, do you know have someone looked into this problem? 🙂
We have! Can you please upgrade your studio to v2.34.2 🙂
(Sorry for the late reply, I was OOO)
Thanks for the response! I will let you know after the update 🙂

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.

Get started for freeExplore the demo

Was this answer helpful?