Creating a metaobject that contains an image

Retired Boards Appdev Metafields
,

Topic summary

Issue: A developer is working with Shopify’s GraphQL Admin API to programmatically add images to metaobjects. While they successfully created metaobject definitions with file_reference type fields and uploaded images to Shopify’s staging storage, they couldn’t connect the uploaded images to metaobject fields.

Key Challenge: Images uploaded via the staging process receive temporary URLs and appear in Shopify’s Content > Files with unique IDs, but the developer needed to understand how to reference these files in metaobject fields programmatically.

Solution Found:

  • Upload the file to Shopify using the documented media upload process
  • Retrieve the file’s GID (global ID) from the upload response
  • Use the GraphQL metaobjectUpdate mutation to assign the image by passing the file’s GID to the metaobject’s file field

Code Example Provided: A TypeScript mutation showing how to update a metaobject with the file GID, where the key is “file” and the value is the image’s GID.

Status: Resolved through community collaboration and reference to a GitHub gist documenting the multi-step process.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

I am using Typescript and the GraphQL admin API in a Node.js application to create a metaobject definition and to create metaobjects of that definition. That works very well in general, except for images.

This is the field definition part that I use to define the image as a field of the metaobject:

    {
      key: 'image',
      name: 'My image',
      description: `An image`,
      type: 'file_reference',
      validations: [
        {
          name: 'file_type_options', //
          value: '["Image"]'
        }
      ],
      required: false
    }

I followed this documentation to upload image files. The result is that my image files are available on resourceUrls like this: https://shopify-staged-uploads.storage.googleapis.com/tmp/77518813149/products/some-uuid/myimage.jpg.

That’s also cool. But now I don’t understand how to programmatically get the uploaded images into my metaobjects.

It looks like this is only possible when creating products, but I would like to use the image for a metaobject. Also, using the Shopify admin UI, it is very simple to assign an already existing image to the field of one of these metaobject.

So what am I missing here?

In an ideal scenario, I would like to have an automated process that takes the images from my hard drive and pushes them into Shopify in such a way that they are available under Content --> Files and each image has a Shopify ID of the form “gid://shopify/MediaImage/34852281779213”.

2

I still would love to get an answer here. :wink:

3

{{ your_metaobject_name.image | metafield_tag | replace: ‘<img’, ‘<img class=“your-class”’ }}

1 Like
4

I finally found a good summary about what has to be done. It’s really not just one or two steps.

5

Thanks for this. I understand getting the file up to Shopify’s file, but then how do you get into the Metaobject’s file datatype field? Do you pass the gid of the uploaded file?

6

Again, thanks for the help. Looks like that’s all you need. Push the file up from source URL, and grab the id and post that to the metaobject.

7

That’s correct. I used the GraphQL API to update the metaobject. In my Typescript code, the mutation and the variables part look like this:

const mutation = (key: string): string => `
mutation UpdateMetaobject($id: ID!, $metaobject: MetaobjectUpdateInput!) {
  metaobjectUpdate(id: $id, metaobject: $metaobject) {
    metaobject {
      handle
      field: field(key: "${key}") {
        value
      }
    }
    userErrors {
      field
      message
      code
    }
  }
}`

const variables = (metaobjectId: string, key: string, value: string) => {
  return {
    id: metaobjectId,
    metaobject: {
      fields: [
        {
          key,
          value,
        },
      ],
    },
  }
}

In this case, metaobjectId is the GID of the metaobject, key is the string file, and the value is the GID of the image (which you get as return value when you do the upload of the image).