Solved

Using the new FILE API can't upload the file/image correctly

Emmanuel14
Visitor
1 0 0

First I mutate with stageUploadsCreate 

 

mutation stagedUploadsCreate($input: [StagedUploadInput!]!) {
                  stagedUploadsCreate(input: $input) {
                    stagedTargets {
                      resourceUrl
                    }
                    userErrors {
                      field
                      message
                    }
                  }
                }

variables: {
          "input": [
            {
              "resource": type,
              "filename": file.name,
              "mimeType": file.type
            }
          ]
        }

 

 

Now I have the "resourceUrl" to put on the originalSource for the next part.

 

Now I mutate fileCreate 

 

 

mutation fileCreate($files: [FileCreateInput!]!) {
                  fileCreate(files: $files) {
                    files {
                      alt
                      createdAt
                      fileStatus
                      preview{
                        image{
                          originalSrc
                        }
                        status
                      }
                      fileErrors{
                        code
                        details
                        message
                      }
                    }
                    userErrors {
                      code
                      field
                      message
                    }
                  }
                }
                `,
        variables: {
          "files": [
            {
              "originalSource": resourceUrl
            }
          ]
        }

 

 

And the response is 

 

{
    "data": {
        "fileCreate": {
            "files": [
                {
                    "alt": "",
                    "createdAt": "2021-08-05T13:40:28Z",
                    "fileStatus": "UPLOADED",
                    "preview": {
                        "image": null,
                        "status": "UPLOADED"
                    },
                    "fileErrors": []
                }
            ],
            "userErrors": []
        }
    },
    "extensions": {
        "cost": {
            "requestedQueryCost": 13,
            "actualQueryCost": 13,
            "throttleStatus": {
                "maximumAvailable": 1000,
                "currentlyAvailable": 987,
                "restoreRate": 50
            }
        }
    }
}

 

 But the problem is in the "processing" after the upload because I can't see the image (is null) and if I open the web browser in "admin/settings/files" always see the popup like  "files failed due to a processing error. Try again."

I try with JSON and IMAGE changing the resource type but is the same.

Any news?

Accepted Solution (1)

awwdam
Shopify Staff
249 42 36

This is an accepted solution.

Hey @Emmanuel14,

I noticed you aren't passing the "parameters" field for the stagedTargets object or "httpMethod" in the variables (in the case of files, this would be a POST method). Image staged uploads are covered in greater detail here: Learn how to manage product media by using the GraphQL Admin API. This process requires the necessary arrays to be returned in value pairs, that can then be passed in an HTTP/cURL request, which completes the staged upload and populates that resourceURL. If these steps aren't completed there wouldn't be a file staged at that URL, and therefore while the fileCreate mutation may be successful, no file would be created. I left a few examples below of what those other steps might look like.

Example input variable for stagedUploadCreate.

 

 

{
  "input": [ 
    {
       "filename": "Test_File",
       "resource": "FILE",
       "mimeType": "text/json",
       "httpMethod": "POST"
      }
   ]
}

 

 


Here is a cURL example for a json file - Enter the corresponding values returned from stagedUploadCreate for {VALUE}.

 

 

curl -v -X "POST" \
 -F "key= {VALUE}" \
 -F "content-type=text/json" \
 -F "success_action_status=201" \
 -F "acl=private" \
 -F "policy={VALUE}" \
 -F "x-amz-credential={VALUE}" \
 -F "x-amz-algorithm={VALUE}" \
 -F "x-amz-date={VALUE}" \
 -F "x-amz-signature={VALUE}" \
 -F "file=~{FILE}" \
"https://shopify.s3.amazonaws.com/"

 

 


If this can be replicated across multiple stores, files, and requests after working through the info shared above, I would suggest reaching out to Shopify Support directly. You can provide the file's Admin URL, and let whomever you are working with know about any errors that were displayed in the admin. 

- Cheers

awwdam | API 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

View solution in original post

Replies 2 (2)

awwdam
Shopify Staff
249 42 36

This is an accepted solution.

Hey @Emmanuel14,

I noticed you aren't passing the "parameters" field for the stagedTargets object or "httpMethod" in the variables (in the case of files, this would be a POST method). Image staged uploads are covered in greater detail here: Learn how to manage product media by using the GraphQL Admin API. This process requires the necessary arrays to be returned in value pairs, that can then be passed in an HTTP/cURL request, which completes the staged upload and populates that resourceURL. If these steps aren't completed there wouldn't be a file staged at that URL, and therefore while the fileCreate mutation may be successful, no file would be created. I left a few examples below of what those other steps might look like.

Example input variable for stagedUploadCreate.

 

 

{
  "input": [ 
    {
       "filename": "Test_File",
       "resource": "FILE",
       "mimeType": "text/json",
       "httpMethod": "POST"
      }
   ]
}

 

 


Here is a cURL example for a json file - Enter the corresponding values returned from stagedUploadCreate for {VALUE}.

 

 

curl -v -X "POST" \
 -F "key= {VALUE}" \
 -F "content-type=text/json" \
 -F "success_action_status=201" \
 -F "acl=private" \
 -F "policy={VALUE}" \
 -F "x-amz-credential={VALUE}" \
 -F "x-amz-algorithm={VALUE}" \
 -F "x-amz-date={VALUE}" \
 -F "x-amz-signature={VALUE}" \
 -F "file=~{FILE}" \
"https://shopify.s3.amazonaws.com/"

 

 


If this can be replicated across multiple stores, files, and requests after working through the info shared above, I would suggest reaching out to Shopify Support directly. You can provide the file's Admin URL, and let whomever you are working with know about any errors that were displayed in the admin. 

- Cheers

awwdam | API 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

AL33
Shopify Partner
40 0 3

Hello,

I am shopify newer, I don't unstand how to set the local machine url using stagedUploadsCreate,

how to upload local pdf file correctly. Please tell me, thank you!