PUT request to signed URL generated by stagedUploadCreate throws MalformedSecurityHeader

[pavindu]

I'm trying to upload a .glb file to a product in a Shopify store through Shopify GraphQL Admin API. For that, it first returns a google cloud storage signed URL, to where I should upload my file through an HTTP PUT request. After uploading, I should attach the same URL to the product with another API call.

This question is about that file uploading to the cloud storage signed URL. I include all these details to make this question easy to be getting answered. So, please read till the end.

1. What data Shopify stagedUploadCreate mutation provides me with is mentioned below.

{ "data": { 
  "stagedUploadsCreate": { 
     "stagedTargets": [ { 
       "parameters": [ {
           "name": "GoogleAccessId", 
           "value": "threed-model-service--6bgx7cbe@shopify-applications.iam.gserviceaccount.com" 
          }, 
         { "name": "key", 
         "value": "models/a6436c066064bac3/windmill.glb" 
         }, 
         { "name": "policy", 
            "value": "eyJleHBpcmF0aW9uIjoiMjAyMC0wNy0yMVQwOToxNjoxMFoiLCJjb25kaXRpb25zIjpbWyJlcSIsIiRidWNrZXQiLCJ0aHJlZWQtbW9kZWxzLXByb2R1Y3Rpb24iXSxbImVxIiwiJGtleSIsIm1vZGVscy9hNjQzNmMwNjYwNjRiYWMzL3dpbmRtaWxsLmdsYiJdLFsiY29udGVudC1sZW5ndGgtcmFuZ2UiLDE5NzE3MiwxOTcxNzJdXX0=" 
           }, 
          { 
            "name": "signature", 
            "value": "vz+OdcEmD9Kbv2FbXdxWNUk59XO2GmXzhvtDswXbDQNcyZpUufI85z5x2PFGv/XZ+tSBsl/S393pmy0Bu9xG7oVgOZcMIWEbOIm9kXgQunbjKQY3Ff3BBpMocB0xazzlYmckZozdJ8ZZkyox/c/gEe1QaxqW4+419iufuFHy4Bp3LL/aUr+ATNChwn9Dn8+XnHMOckZxDlbiggcF3dx+yBuTFia8FneaVSiU0M5DIWmHqHb2YDCV0KtEP6jfTj/PQVUjS8pn8EGhrRaMx7Q2A5G8Pycgc9H35hqJnnUKCTa3AYeyI45RbhddYnIWw9YrAADXuQYlVCo6LYBHjxsCWA==" }
 ], 
"resourceUrl": "https://storage.googleapis.com/threed-models-production/models/a6436c066064bac3/windmill.glb?external_model3d_id=bW9kZWwzZC00MDg5Ng==",
 "url": "https://storage.googleapis.com/threed-models-production/models/a6436c066064bac3/windmill.glb?external_model3d_id=bW9kZWwzZC00MDg5Ng==" } 
],
 "userErrors": [] } } }

2. Using these parameters, I construct a signed URL as follows.

resourceUrl+"&signature="+signature+"&key="+key+"&policy="+policy+"&GoogleAccessId="+GoogleAccessId

Eg:

https://storage.googleapis.com/threed-models-production/models/a6436c066064bac3/windmill.glb?externa...

3. Then I try to make a PUT request to this URL with the .glb file in POSTman as shown in this image

with the following headers.

4. But I don't get a success response. In fact, I get a 400 error with the following message.

<?xml version='1.0' encoding='UTF-8'?> 
   <Error>
         <Code>MalformedSecurityHeader</Code>
        <Message>Your request has a malformed header.</Message> 
        <ParameterName>signature</ParameterName> 
        <Details>Signature was not base64 encoded</Details>
  </Error>

Can someone point me out what I'm doing wrong here? I have been dealing with this error for days and read a lot of questions and articles, but couldn't get this to work. Therefore, any helpful suggestion is highly appreciated.

[kjdointhings]

Did you ever figure this out? I'm trying to do something similar, uploading a file from a Polaris DropZone component, using stagedUploadCreate, and I can't get it to work either.

[pavindu]

Unfortunately no. I even contacted Shopify support, but didn't get a helpful response. There isn't even any updated and detailed tutorial about this. The only tutorial I could find was also very outdatated. When I contacted Shopify, they promised me to update those asap, but still nothing promised has been done.