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

[Emmanuel14]

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?

[awwdam · 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