Creating a metaobject that contains an image

[st_consult]

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".

[st_consult]

I still would love to get an answer here. 😉

[PatriciaHung]

{{ your_metaobject_name.image | metafield_tag | replace: '<img', '<img class="your-class"' }}

[st_consult · Accepted solution]

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

[rattlesnakeMT]

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?

[rattlesnakeMT]

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.

[st_consult]

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).