Alt Text for Images (type 'file') not returned for subField items in custom components

Technical Questions
, ,
1

When you define an image upload as a top-level input for a custom component (e.g.):

{
  name: 'image'
  type: 'file',
  allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg', 'webp', 'gif'],
}

the consuming frontned componet will automatically receive an altText prop, if the image has alt text defined on it in the asset library.

However, when an image upload for a custom component is declared as a subFields item on a type: 'object' input (e.g.):

{
  name: 'card'
  type: 'object',
  subFields: [
    {
      name: 'title',
      type: 'string'
    },
    {
      name: 'image',
      type: 'file',
      allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg', 'webp', 'gif'],
    },
  ],
}

then suddenly the altText for the associated image file in the asset library is not passed to the frontend component; all that gets passed is the url of the asset as a string.

How then do we retrieve the altText for image files declared as a subFields item?

2

Hi Jon​,

Thank you for contacting Builder.io Support! I look forward to helping you with your request.

altText is missing in subFields because

When you use:

{
  name: 'image',
  type: 'file',
  allowedFileTypes: [...],
}

Builder stores the image as an object, typically like:

{
  src: 'https://cdn.builder.io/api/v1/image/assets%2Fabc...jpg',
  alt: 'Description from asset library'
}

…but only if the type: 'file' input is top-level. When it’s inside subFields, Builder treats it as a plain string (just the src), and does not pass the altText.

Solution >>

You need to use type: 'image' instead of type: 'file' inside subFields.

Here’s the fixed example:

{
  name: 'card',
  type: 'object',
  subFields: [
    {
      name: 'title',
      type: 'string',
    },
    {
      name: 'image',
      type: 'image', // use 'image' instead of 'file'
    },
  ],
}

The difference:

  • type: 'image' returns an object with both src and alt (and sometimes other metadata).
  • type: 'file' in subFields just returns a string (the src only).

Thank you,