File is empty | Shopify stagedUploadsCreate

[TheDeveloper]

I am currently working on uploading files via the stagedUploadsCreate mutation in node.js.

I currently managed to upload a file to Shopify’s staged upload storage on google cloud but the file is empty!

That is the code:

1. Creating the staged upload:

const CREATE_STAGED_UPLOADS = `
mutation stagedUploadsCreate($input: [StagedUploadInput!]!) {
  stagedUploadsCreate(input: $input) {
    stagedTargets {
      resourceUrl
      url
      parameters {
        name
        value
      }
    }
    userErrors {
      field
      message
    }
  }
}
`;

const response = await client.query({
        data: {
           query: CREATE_STAGED_UPLOADS,
            variables: {
                "input": [
                    {
                      "resource": "FILE",
                      "filename": file.name,
                      "mimeType": fileType.toString(),
                      "fileSize": file.size.toString(),
                      "httpMethod": "POST"
                    }
                  ]
            },
        },
     });

This leads to a successful response.

2. Then fetch the url of the stagedUploadsCreate Mutation:

const parameters = response?.body?.data?.stagedUploadsCreate?.stagedTargets[0]?.parameters;
const url = response?.body?.data?.stagedUploadsCreate?.stagedTargets[0].url;

const formData = new FormData();

     parameters.forEach(({name, value}) => {
        formData.append(name, value)
      });

      formData.append('file', file);

      const response = await fetch(url, {
        method: 'POST',
        body: formData
});

The response returns also 201 ‘Created’ with the following xml object:

{
   PostResponse: {
     Location: [
       'https://storage.googleapis.com/shopify-staged-uploads/tmp/72115945762/files/63bd5db8-afc9-435b-bc2b-a0d0b5be791f/check-2.png'
     ],
     Bucket: [ 'shopify-staged-uploads' ],
     Key: [
       'tmp/72115945762/files/63bd5db8-afc9-435b-bc2b-a0d0b5be791f/check-2.png'
     ],
     ETag: [ '"************************"' ]
   }
 }

But if you visit the resourceUrl from the createStagedUpload mutation and the Location url from the xml response it shows an empty image:

So I hope I described the problem sufficient.

Thank you in advance!