Large Image upload via REST API

Solved
HardikM
New Member
6 0 0

I'm using Create a new product image with included image data as attachment from https://shopify.dev/docs/admin-api/rest/reference/products/product-image#create-2021-04

small images are not an issue, but uploading large images is impossible I tried to follow File upload as JSON base64 encoded - YouTube, but even that didn't help much as I'm using windows 10 and windows has a variable size limit which is very less then the maximum size of the base64 encoded data,

kindly help

Thank you in advance

0 Likes
CalD
Shopify Staff
Shopify Staff
133 18 20

This is an accepted solution.

Hey @HardikM,

Can you use the "src" field in the payload to specify the image URL? 

Also take a look at this tutorial to upload local images for use in updating product media: https://shopify.dev/tutorials/manage-product-media-with-admin-api

CalD | Developer Support @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

HardikM
New Member
6 0 0

Thank you for reverting

the images are on the local system and need to be uploaded and hence "src" will not work, they are not on any server that shopify can copy from, hence have taken the base64 approach, the issue is the file size goes on the higher side, and then it becomes an issue, small images are not an issue, but the larger ones take up a lot of resource

I sincerely think shopify should give an API to upload via form-data that would be a great help, but that's my opinion.

I'm stuck at this point, any help would be great

0 Likes
HardikM
New Member
6 0 0

I checked your suggestion, I've a few queries

curl -v \ -F "AWSAccessKeyId=AKIAJYM555KVYEWGJDKQ" \ -F "key=tmp/17681717/products/ec24e5f6-ba91-43d7-bb43-4c7174770ac1/watches_comparison.png" \ -F "policy=eyJleHBpcmF0aW9uIjoiMjAxOS0wNi0xNFQxNjo0OTowM1oiLCJjb25kaXRpb25zIjpbeyJidWNrZXQiOiJzaG9waWZ5In0seyJrZXkiOiJ0bXBcLzE3NjgxNzE3XC9wcm9kdWN0c1wvZWMyNGU1ZjYtYmE5MS00M2Q3LWJiNDMtNGM3MTc0NzcwYWMxXC9JR1EucG5nIn0seyJGaWxlbmFtZSI6IklHUS5wbmcifSx7Ik1pbWUtVHlwZSI6ImltYWdlXC9wbmcifSx7IkZpbGUtU2l6ZSI6IjMzNjQ2MSJ9LHsic3VjY2Vzc19hY3Rpb25fc3RhdHVzIjoiMjAxIn0seyJhY2wiOiJwcml2YXRlIn0sWyJjb250ZW50LWxlbmd0aC1yYW5nZSIsMSwyMDk3MTUyMF1dfQ==" \ -F "signature=yZsEky4DDqbbcNnOVFNAagZnlcI=" \ -F "Filename=watches_comparison.png" \ -F "Mime-Type=image/png" \ -F "File-Size=336461" \ -F "success_action_status=201" \ -F "acl=private" \ -F "file=@/Users/shopifyemployee/Desktop/watches_comparison.png" \ "https://shopify.s3.amazonaws.com/"

how do I get the 'AWSAccessKeyId', whats the 'key', 'policy', 'signature'

0 Likes
CalD
Shopify Staff
Shopify Staff
133 18 20

This is an accepted solution.

The form inputs required should be in the response from the stagedUploadsCreate mutation as "parameters".

Here's an example mutation:

 

mutation stagedUploadsCreate($input: [StagedUploadInput!]!) {
  stagedUploadsCreate(input: $input) {
    stagedTargets {
      parameters {
        name
        value
      }
      resourceUrl
      url
    }
    userErrors {
      field
      message
    }
  }
}
{
	"input": [
		{
			"resource": "IMAGE",
			"filename": "transparent_dice.png",
			"mimeType": "image/png",
			"httpMethod": "POST",
			"fileSize": "227963"
		}
	]
}

 

And the response:

 

{
  "data": {
    "stagedUploadsCreate": {
      "stagedTargets": [
        {
          "parameters": [
            {
              "name": "key",
              "value": "tmp\/26258472982\/products\/fea7c275-b972-40bc-85b7-5168cf404690\/transparent_dice.png"
            },
            {
              "name": "Content-Type",
              "value": "image\/png"
            },
            {
              "name": "success_action_status",
              "value": "201"
            },
            {
              "name": "acl",
              "value": "private"
            },
            {
              "name": "policy",
              "value": "eyJleHBpcmF0aW9uIjoiMjAyMS0wMy0xOFQxOTo0NToxMFoiLCJjb25kaXRpb25zIjpbeyJidWNrZXQiOiJzaG9waWZ5In0sWyJjb250ZW50LWxlbmd0aC1yYW5nZSIsMSwyMDk3MTUyMF0seyJrZXkiOiJ0bXAvMjYyNTg0NzI5ODIvcHJvZHVjdHMvZmVhN2MyNzUtYjk3Mi00MGJjLTg1YjctNTE2OGNmNDA0NjkwL3RyYW5zcGFyZW50X2RpY2UucG5nIn0seyJDb250ZW50LVR5cGUiOiJpbWFnZS9wbmcifSx7InN1Y2Nlc3NfYWN0aW9uX3N0YXR1cyI6IjIwMSJ9LHsiYWNsIjoicHJpdmF0ZSJ9LHsieC1hbXotY3JlZGVudGlhbCI6IkFLSUFKWU01NTVLVllFV0dKREtRLzIwMjEwMzE4L3VzLWVhc3QtMS9zMy9hd3M0X3JlcXVlc3QifSx7IngtYW16LWFsZ29yaXRobSI6IkFXUzQtSE1BQy1TSEEyNTYifSx7IngtYW16LWRhdGUiOiIyMDIxMDMxOFQxODQ1MTBaIn1dfQ=="
            },
            {
              "name": "x-amz-credential",
              "value": "AKIAJYM555KVYEWGJDKQ\/20210318\/us-east-1\/s3\/aws4_request"
            },
            {
              "name": "x-amz-algorithm",
              "value": "AWS4-HMAC-SHA256"
            },
            {
              "name": "x-amz-date",
              "value": "20210318T184510Z"
            },
            {
              "name": "x-amz-signature",
              "value": "57abfa06c7c89274d252adf7b6c4ecaa0c15baeb28dc3cd4cbc65387bab48dab"
            }
          ],
          "resourceUrl": "https:\/\/shopify.s3.amazonaws.com\/tmp\/26258472982\/products\/fea7c275-b972-40bc-85b7-5168cf404690\/transparent_dice.png",
          "url": "https:\/\/shopify.s3.amazonaws.com"
        }
      ],
      "userErrors": []
    }
  },
  "extensions": {
    "cost": {
      "requestedQueryCost": 11,
      "actualQueryCost": 11,
      "throttleStatus": {
        "maximumAvailable": 1000.0,
        "currentlyAvailable": 989,
        "restoreRate": 50.0
      }
    }
  }
}

 

And the resulting cURL:

 

curl -v \
-F "key=tmp/26258472982/products/fea7c275-b972-40bc-85b7-5168cf404690/transparent_dice.png" \
-F "policy=eyJleHBpcmF0aW9uIjoiMjAyMS0wMy0xOFQxOTo0NToxMFoiLCJjb25kaXRpb25zIjpbeyJidWNrZXQiOiJzaG9waWZ5In0sWyJjb250ZW50LWxlbmd0aC1yYW5nZSIsMSwyMDk3MTUyMF0seyJrZXkiOiJ0bXAvMjYyNTg0NzI5ODIvcHJvZHVjdHMvZmVhN2MyNzUtYjk3Mi00MGJjLTg1YjctNTE2OGNmNDA0NjkwL3RyYW5zcGFyZW50X2RpY2UucG5nIn0seyJDb250ZW50LVR5cGUiOiJpbWFnZS9wbmcifSx7InN1Y2Nlc3NfYWN0aW9uX3N0YXR1cyI6IjIwMSJ9LHsiYWNsIjoicHJpdmF0ZSJ9LHsieC1hbXotY3JlZGVudGlhbCI6IkFLSUFKWU01NTVLVllFV0dKREtRLzIwMjEwMzE4L3VzLWVhc3QtMS9zMy9hd3M0X3JlcXVlc3QifSx7IngtYW16LWFsZ29yaXRobSI6IkFXUzQtSE1BQy1TSEEyNTYifSx7IngtYW16LWRhdGUiOiIyMDIxMDMxOFQxODQ1MTBaIn1dfQ==" \
-F "x-amz-signature=57abfa06c7c89274d252adf7b6c4ecaa0c15baeb28dc3cd4cbc65387bab48dab" \
-F "x-amz-algorithm=AWS4-HMAC-SHA256" \
-F "x-amz-credential=AKIAJYM555KVYEWGJDKQ/20210318/us-east-1/s3/aws4_request" \
-F "x-amz-date=20210318T184510Z" \
-F "Content-Type=image/png" \
-F "acl=private" \
-F "success_action_status=201" \
-F "file=@/Users/callumdavies/Downloads/PNG_transparency_demonstration_1.png" \
"https://shopify.s3.amazonaws.com/"

 

 

CalD | Developer Support @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

0 Likes
HardikM
New Member
6 0 0

sorry but this is a bit confusing,

what will be the curl request that I'll need to send,

how to format it,

there are so many weird and out of the box terms in the resulting curl  request,

that are hard to understand, the REST API curl request is pretty simple to understand and I got it up and running in no time,

the GRAPHQL CURL request is very confusing and the documentation also is not very clear

a simple example with request curl should do the job

0 Likes
HardikM
New Member
6 0 0

@CalD 

a video of the process with postman would be simply great resource

0 Likes