Loading MODEL_3D media with productCreate

GraphQL Admin API Troubleshooting
1

I am trying to create a Shopify product with an image, video and 3D media.
(mediaContentType “IMAGE”, “EXTERNAL VIDEO” and “MODEL_3D”)

I can create a product with images and video, but the Shopify sample watch 3D (.glb) file produces 'MEDIA Upload failed. 3D Model: Model Failed Validation
Any thoughts or guidance on how to use graphql to upload and attach 3D media files would be most appreciated:

Step 1: Upload 3D Media file

I first use stagedUploadsCreate to get a URL for the watch.glb media file:

mutation stagedUploadsCreate($input: [StagedUploadInput!]!) {
stagedUploadsCreate(input: $input) {
stagedTargets {
url
resourceUrl
parameters {
name
value
}
}
}
}

{
“input”: [
{
“filename”: “https//cdn.shopify.com/3d/models/o/e38516a2d6824caa/watch.glb”,
“mimeType”: “model/gltf-binary”,
“resource”: “MODEL_3D”,
“fileSize”: “3846680”
}
]
}
result:
{
“data”: {
“stagedUploadsCreate”: {
“stagedTargets”: [
{
“url”: “https//storage.googleapis.com/threed-models-production/models/9465bf851f3009b8/https_cdn_shopify_com_3d_models_db67eef5a10e0fab_watch.glb?external_model3d_id=bW9kZWwzZC0xMDg4ODY2”,
“resourceUrl”: “https//storage.googleapis.com/threed-models-production/models/9465bf851f3009b8/https_cdn_shopify_com_3d_models_db67eef5a10e0fab_watch.glb?external_model3d_id=bW9kZWwzZC0xMDg4ODY2”,
…

Step 2 : Create product with media

I then use the url above as OriginalSource for the shopify sample watch:
mutation CreateProductWithNewMedia($input: ProductInput!, $media: [CreateMediaInput!]) {
productCreate(input: $input, media: $media) {
product {
id
title
media(first: 10) {
nodes {
alt
mediaContentType
}
}
}
userErrors {
field
message
}
}
}

{
“input”: {
“title”: "11-16 Helmet, Video, and Shopify 3d Watch "
},
“media”: [
{
“originalSource”: “https//cdn.shopify.com/shopifycloud/brochure/assets/sell/image/image-@artdirection-large-1ba8d5de56c361cec6bc487b747c8774b9ec8203f392a99f53c028df8d0fb3fc.png”,
“alt”: “Gray helmet for bikers”,
“mediaContentType”: “IMAGE”
},
{
“originalSource”: “https//www.youtube.com/watch?v=4L8VbGRibj8&list=PLlMkWQ65HlcEoPyG9QayqEaAu0ftj0MMz”,
“alt”: “Testing helmet resistance against impacts”,
“mediaContentType”: “EXTERNAL_VIDEO”
},
{
“originalSource”:“https//storage.googleapis.com/threed-models-production/models/e0c9b8dd3f52a8fb/https_cdn_shopify_com_3d_models_db67eef5a10e0fab_watch.glb?external_model3d_id=bW9kZWwzZC0xMDg4ODY5”,
“alt”:“3D Desk Google Source”,
“mediaContentType”:“MODEL_3D”
}
]
}

… and get

{
“data”: {
“productCreate”: {
“product”: {
“id”: “gid//shopify/Product/8144445538501”,
“title”: “11-16 Helmet, Video, and Shopify 3d Watch”,
“media”: {
“nodes”: [
{
“alt”: “Gray helmet for bikers”,
“mediaContentType”: “IMAGE”
},
{
“alt”: “Testing helmet resistance against impacts”,
“mediaContentType”: “EXTERNAL_VIDEO”
},
{
“alt”: “3D Desk Google Source”,
“mediaContentType”: “MODEL_3D”
}
]
}
},
“userErrors”:
}
},
“extensions”: {
“cost”: {
“requestedQueryCost”: 16,
“actualQueryCost”: 14,
“throttleStatus”: {
“maximumAvailable”: 2000,
“currentlyAvailable”: 1986,
“restoreRate”: 100
}
}
}
}

However, the product is created with the image and video media, but the MODEL_3D Shopify watch.glb media is not attached it fails with:
'MEDIA Upload failed. 3D Model: Model Failed Validation

2

Are you using a trial plan or paid plan?

File format requirements

If a shop is on a paid plan, then you can upload most file formats other than HTML.

If a shop is on a trial plan, then you can upload only the following file formats:

  • JavaScript (JS)
  • CSS
  • GIF
  • JPEG
  • PNG
  • JSON
  • CSV
  • PDF
  • WebP
  • HEIC
3

I appreciate the reply, Amal. I am working with development shops, and it did not occur to me that the failed validation error could be subscription-related.

I am able to upload .glb files and add them to products in my development stores using the Shopfy UI; my errors occur only when I try to do this programmatically.

I am now looking into the cURL operation that I’m using to upload the .glb files, using the parameters from the stagedUploadsCreate mutation. I believe this may be the area where I have issues to resolve, but I will also look into whether there are validation errors related to subscription.

Thanks again!

4

I have already checked the documentation and followed the guidelines, but I am still receiving a validation error. I am using a trial plan and have referenced the following document: Shopify Docs - 3D Models POST Request.

5

AMal,

The document you listed is the same procedure that I followed; I am receiving the same validation error with my development shops, using the sample .glb files provided by Shopify (watch, water bottle, desk, tote…)

Hopefully somebody at Shopify will see this thread and provide a fresh example of how to successfully upload and attach 3D media to a product.

I appreciate your response,
Tom

6

I have downloaded a glb file from the Porsche 718 GT4 RS - DownloadFree3D.com URL and try to upload the file in the file path source/2022_porsche_718_cayman_gt4_rs.glb using programatically.

Step 1: Generate the upload URL and parameters

Query:

mutation stagedUploadsCreate($input: [StagedUploadInput!]!) {
  stagedUploadsCreate(input: $input) {
    stagedTargets {
      url
      resourceUrl
      parameters {
        name
        value
      }
    }
  }
}

Variables:

{
  "input": [
    {
      "filename": "2022_porsche_718_cayman_gt4_rs.glb",
      "mimeType": "model/gltf-binary",
      "resource": "MODEL_3D",
      "fileSize": "19082036"
    }
  ]
}
  • ls -l 2022_porsche_718_cayman_gt4_rs.glb: Run the command to check the file size and replace with fileSize field.

Step 2: Upload the asset

Replace the parameters with the above query response:

curl -v \
  -F "GoogleAccessId=threed-model-service-prod@threed-model-service.iam.gserviceaccount.com" \
  -F "key=models/186459da1e7eaadd/2022_porsche_718_cayman_gt4_rs.glb" \
  -F "policy=eyJleHBpcmF0aW9uIjoiMjAyNC0xMS0xOFQxNzowMDoxOFoiLCJjb25kaXRpb25zIjpbWyJlcSIsIiRidWNrZXQiLCJ0aHJlZWQtbW9kZWxzLXByb2R1Y3Rpb24iXSxbImVxIiwiJGtleSIsIm1vZGVscy8xODY0NTlkYTFlN2VhYWRkLzIwMjJfcG9yc2NoZV83MThfY2F5bWFuX2d0NF9ycy5nbGIiXSxbImNvbnRlbnQtbGVuZ3RoLXJhbmdlIiwxOTA4MjAzNiwxOTA4MjAzNl1dfQ==" \
  -F "signature=k7wzhLa6vg0A10W6+RqXKORbxdnsrqqKYhM/lD8tGMfQJYdRNhL2s8BNq+BKK9c+BK7sycIfeqfY9ce/jr/Ied+w5tDmtnn+mtfDQP8YKc1d2bQCJXXE1BFgD0j4hy+TL4nQAzfydKxs6OwafR+8MDxQIZfNnyGi/qgmw3VYz6f8vfASdnKqyHlX+wDKE7uSKIytz+Vk99HAoT7bZEJ+q4lBdIi/55TuUjxvB5HPq1tekzHk4SSc1e8Zy1BwgTHK11uxFNNAsMILY+PvRWF2r9vIN26hWvsJlh2K2XakKVGefPr0Fiw/IYx/a236W60anJ3KrwpFbRneD/Y1369cNA==" \
  -F "file=@/2022_porsche_718_cayman_gt4_rs.glb" \
  "https://storage.googleapis.com/threed-models-production/models/186459da1e7eaadd/2022_porsche_718_cayman_gt4_rs.glb?external_model3d_id=bW9kZWwzZC0xMDkwMjA5"
  • file=@/2022_porsche_718_cayman_gt4_rs.glb" : Replace with your filename in your local machine.
  • Open the terminal where the file is located and run the curl command.

Step 3: Add media to a product

Query:

mutation createProduct($productSet: ProductSetInput!, $synchronous: Boolean!) {
  productSet(synchronous: $synchronous, input: $productSet) {
    product {
      id
      media(first: 5) {
        nodes {
          id
          alt
          mediaContentType
          status
        }
      }
    }
    userErrors {
      field
      message
    }
  }
}

Variables:

{
  "synchronous": true,
  "productSet": {
    "title": "Winter hat",
    "files": [
      {
        "originalSource": "https://storage.googleapis.com/threed-models-production/models/186459da1e7eaadd/2022_porsche_718_cayman_gt4_rs.glb?external_model3d_id=bW9kZWwzZC0xMDkwMjA5",
        "alt": "An elegant grey hat",
        "contentType": "MODEL_3D"
      }
    ]
  }
}

Replace the originalSource.

Successfully executed the query, created the product with uploaded file. Its worked.

1 Like
7

AMaL,

Your solution worked for me!

Thanks so much for your assistance.
I was running through the same steps, however I believe I was hitting Policy Expiration issues because of delays between my execution of stagedUploadsCreate and the curl upload. (I believe you have to execute within 10 minutes - not an issue if I code this up to work quickly).

Once again, I am grateful for your help and expertise.

Tom

8

I’m so glad to hear that the solution worked for you!