GraphQL:uploading Image and using imageURL with GraphQL gives "internal error" (ProductAppendImages)

Solved
go4it
Tourist
5 0 0

using private app (python script) to upload images to a product from local files. 

 

Getting internal error when I want to use a URL from the uploaded image to assign to a product. 

----

 

uploading image using the stageUploadTargetGenerate, creates the object and returns a URL. 

 

 

create_img.jpg

the above step works :-)

 

but when i try to use the url to assign it to a product using:

image-append.jpg

 

I'm getting error:

 

int-error.jpg

 

Internal error. Looks like something went wrong on our end.\nRequest ID: 595103de-9f11-4bb7-b5bc-db3f5d8c1d30 (include this in support requests)

 

this is probably something every simple, but don't see it :-( 


Then I click on the url (not sure it you should be able to click on it and see the image, but.. I'm getting a "SIgnatureDoesNotMatch error from AWS. 

aws.jpg

 

so maybe I'm doing something wrong with encoding/decoding/escaping or its just something wrong at the shopify side.


Code is written in Python3, and can share that too, but think the mutations are probably more useful.

Any hints? Anybody?

 

0 Likes
SBD_
Shopify Staff
Shopify Staff
1089 147 199

This is an accepted solution.

Hey @go4it,

 

You'll hit that error if you run a productAppendImages mutation before uploading the image. Try this flow:

 

1. Generate a signed URL

mutation {
  stagedUploadTargetGenerate(input: {resource:PRODUCT_IMAGE, filename: "hello.jpg", mimeType: "image/jpeg" }) {
    url
  }
}


2. Upload an image to the URL generated above. Here's how you can do it with Postman:
20-19-vxa2b-5u4x5.png

3. Attach the new image to a product:

mutation productAppendImages($input: ProductAppendImagesInput!) {
  productAppendImages(input: $input) {
    newImages {
      id
    }
    product {
      id
    }
    userErrors {
      field
      message
    }
  }
}

{
  "input": {
    "id": "gid://shopify/Product/<product id>",
    "images": [
      { "altText": "hello", "src": "<url from step 1>" }
    ]
  }
}


The SignatureDoesNotMatch error is to be expected - you wont be able to read the image.


Let me know how you go.

 

StitchShop
Excursionist
18 0 8

Question. 

To upload and assign an image to a ProductVariant in GraphQL.

Can you go directly to the Variant? or do you have to follow the above pattern of:

  • StageUploadCreate
  • Upload the File
  • productAppendImages
  • productVariantUpdate

In REST you can do this in 1 call.

Cheers

John

 

kkc1
New Member
4 0 0

Hi @SBD_ ,

 

is there a way to automatically to read the image file from /C:/Users/kkc/Desktop/product1.jpeg instead of manually select the file? Thanks

0 Likes
SBD_
Shopify Staff
Shopify Staff
1089 147 199

Hey @kkc1 

From the browser? No, the user will need to give permission/select the file via a file input or drag and drop.

0 Likes
go4it
Tourist
5 0 0

adding an image through the api (instead of graphQL) is way easier. 
For the graphQL you first have to upload the image to an AWS bucket, and then use the url you get from the AWS bucket to add it to the variant.
It's all doable, but an extra step. 


the API  approach lets you do it in 1 step.

I decided NOT to use the graphQL route for now but stick with the API version. 
Hope that future graphQL versions will make it easier too.

0 Likes
kkc1
New Member
4 0 0

Hi @SBD_ ,

Thanks for your reply. i would like to upload the image via postman, my intention is to allow the graphql api to read the image file from a specific directory. 

I have followed your steps mentioned in the previous post with only changing the 2nd step which is i am using the "form-data" instead of using "binary", it seems i always get the error as showed in the last image.  

 

Capture1.PNGCapture2.PNGCapture3.PNG

0 Likes
SBD_
Shopify Staff
Shopify Staff
1089 147 199

Hey @kkc1 

Seems like the upload may have failed. In your second screenshot, I think `resource` needs to be `file`. Also you won't need mimeType or filename for the uploading step. More info.

Let me know how you go.

 

 

0 Likes
kkc1
New Member
4 0 0

Hi @SBD_ 

I have tried to use a multipart form, but  i don't get the idea on how to make it work. do you able to provide an example here? ThanksCapture4.PNG

0 Likes
kkc1
New Member
4 0 0

Hi @go4it ,

can you provide an example here on how you work on it? i am looking for shopify API to read the image file from my local directory and uploaded to the shopify product? Thanks

0 Likes