Solved

Bulk Upload Image Via GraphQL

Notified
Shopify Partner
11 1 0

Untill very recently, GraphQL API version 2023-10 allowed creation of products along with external images using ProductInput .  Now in 2024-02 , you must use media  to add images while creating a product. 

 

The problem is older method was fetching images from external sources. Newer API does not do that .. and perhaps expects you to add a shopify hosted Image. That method is impossible for us as we have a lot of products and uploading images in separately is not an option .

 

So is there a way that we can supply external url of an image, hopefully in bulk , and shopify fetch those like it used to in earlier version ?

Accepted Solution (1)
Notified
Shopify Partner
11 1 0

This is an accepted solution.

I eventually found out that the error was in mutation code for bulk operation to create product. The variable $media  was not passed , and was not used by graphQL back-end , as it was not a required variable, even though the data file correctly had the values set.

View solution in original post

Replies 4 (4)

SomeUsernameHe
Shopify Partner
468 53 88

I 2024-02 Still shows external URLs are usable: 

 

 

originalSource
String!
required
The original source of the media object. This might be an external URL or a staged upload URL.

 

 


Try something like this:

 

 

mutation {
  productCreate(input: {
    title: "Your Product Title",
    media: [
      {
        originalSource: "https://example.com/your-image-url1.jpg",
        alt: "Image description",
        mediaContentType: "IMAGE"
      },
      {
        originalSource: "https://example.com/your-image-url2.jpg",
        alt: "Image description",
        mediaContentType: "IMAGE"
      }
    ]
  }) {
    product {
      id
      title
      media(first: 10) {
        nodes {
          alt
          mediaContentType
          preview {
            status
          }
        }
      }
    }
    userErrors {
      field
      message
    }
  }
}

 

 

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
Notified
Shopify Partner
11 1 0

Thanks for your response. I have a few things to respond to :

 

1. My guess is that when the document says that originalSource can be an External URL, they are referring to External Video URL  and not the Image. The reason I think that way is when you look at the definition of mediaContentType enums.

 

 

 
 
2. Your example has media as a member of input object , which does not conform to the doc and return an error. However I have tried sending the image url : For example some of my input are :
 
{
"input": {
"title": "Letters of Direction: Foreword by Evelyn Underhill",
// omitted for Brevity
},
"media": [
{
"alt": "Image of Front Page",
"mediaContentType": "IMAGE",
"originalSource": "https:\/\/picsum.photos\/200\/300"
}
]
}
 
 
results in :
 
{
"data": {
"productCreate": {
"product": {
"id": "gid:\/\/shopify\/Product\/xxxxxxxxxxxxxxx",
"title": "Letters of Direction: Foreword by Evelyn Underhill",
"mediaCount": 0,
"media": {
"nodes": []
}
},
"userErrors": []
}
},
"__lineNumber": 9
}
 
 
3. I should mention here that I am using bulk operations , hence the output format shows lineNumber. But there is no error returned. 
Also the productCreate has no support for mediaUserErrors .. which leave us in the dark.
 
4. Finally I have tried messing with data values of media array. For example 
And even that does not cause an error,  That lead me to believe The code is not even looking at the media object I supplied.
 
{
"garbage1": "IMAGE",
"garbage2": "https:\/\/picsum.photos\/200\/300"
}

 

Notified
Shopify Partner
11 1 0

Following worked through regular GraphQL call , [not the bulk one] 

 

mutation {
productCreate(input: { title: "Your Product Title" }, media:[ { alt: "Image of Front Page", mediaContentType: IMAGE, originalSource: "https:\/\/picsum.photos\/200\/300.jpg" } ])
{
product { id title media(first: 10) { nodes { alt mediaContentType preview { status } } } }
userErrors { field message }
}
}

 

Notice mediaContentType value is not in quotes,   even though the doc shows it in quotes.  That wasted over a day. and I still don't know how to get the value without quotes in coming in from json as json is required in bulk createProduct 

Notified
Shopify Partner
11 1 0

This is an accepted solution.

I eventually found out that the error was in mutation code for bulk operation to create product. The variable $media  was not passed , and was not used by graphQL back-end , as it was not a required variable, even though the data file correctly had the values set.