What's your biggest current challenge? Have your say in Community Polls along the right column.
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: Creating a metaobject that contains an image

Solved

Creating a metaobject that contains an image

st_consult
Shopify Partner
17 1 9

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

Accepted Solution (1)

st_consult
Shopify Partner
17 1 9

This is an accepted solution.

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

View solution in original post

Replies 6 (6)

st_consult
Shopify Partner
17 1 9

I still would love to get an answer here. 😉

PatriciaHung
Shopify Partner
4 0 2

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

st_consult
Shopify Partner
17 1 9

This is an accepted solution.

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

rattlesnakeMT
Shopify Partner
27 2 1

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?

 

Hank D
rattlesnakeMT
Shopify Partner
27 2 1

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.

 

Hank D
st_consult
Shopify Partner
17 1 9

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