Create Product with raw jpeg Images using graphiQL

Retired Boards Appdev Graphql Basics And Troubleshooting

Topic summary

A developer is attempting to upload JPEG images when creating or updating products via GraphQL mutations (productCreate and productUpdate). The challenge is that the media input only accepts image URLs, not raw base64-encoded images or direct file uploads.

Solution provided:

  • Use the stagedUploadsCreate mutation to first upload the image file
  • Obtain a staged upload URL from this mutation
  • Pass this URL to the media argument (specifically CreateMediaInput.originalSource) in the productCreate mutation
  • The media field requires type CreateMediaInput with properties like mediaContentType: IMAGE and originalSource

Process overview:

  1. Stage the upload using stagedUploadsCreate
  2. Upload the file to the staged URL
  3. Reference the staged URL in productCreate/productUpdate
  4. Complete the product creation

A participant notes this 4-step process is complex and suggests creating documentation to simplify it, contrasting it with the REST API which allows direct image uploads in a single step.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
2

Hi @superstoredev :waving_hand:

To create media for the products using the productCreate mutation , the payload will need to include the media argument of the type CreateMediaInput. If the image needs to be uploaded, you can use the stagedUploadsCreate mutation and provide the staged upload URL as the CreateMediaInput.originalSource field. This guide highlight each step of the process, and the productCreate mutation would result in something similar to the below:

mutation productCreate($input: ProductInput!, $media:[CreateMediaInput!]) {
    productCreate(input: $input, media: $media) {
        product {
            id
            media (first:3)
                nodes {
                    ... on MediaImage {
                        id
                        image {
                            url
                        }
                    }
                }
            }
        }
    }
}

With variables:

{
  "input": {
    "title": "new product"
  },
  "media": {
    "alt": "test",
    "mediaContentType": "IMAGE",
    "originalSource": "https://shopify-staged-uploads.storage.googleapis.com/tmp/1234/products/7c03w39e5-81fa0-44841-8s76e-12fe5eg33026e/shopify.jpg"
  }
}

Hope that helps!