Stuck While Posting Files To Temporary Target

Hello Shopify Community!

I hope you all are doing well, Actually I’m facing some problem while uploading files to shopify store using admin api, like everything goes well but when it tries to posts on temporary target it just gets stuck even tried using a timeout but didn’t worked on that, would be really appreciated if someone helps

here’s my output:

Posting file to temporary target...
Appending param - name: Content-Type, value: image/png
Appending param - name: success_action_status, value: 201
Appending param - name: acl, value: private
Appending param - name: key, value: tmp/69646778567/files/847619ba-8daa-4ff8-b331-fc19358da247/example.png
Appending param - name: x-goog-date, value: 20250401T175605Z
Appending param - name: x-goog-credential, value: merchant-assets@shopify-tiers.iam.gserviceaccount.com/20250401/auto/storage/goog4_request
Appending param - name: x-goog-algorithm, value: GOOG4-RSA-SHA256
Appending param - name: x-goog-signature, value: a1653483b139902dbfcba663b8fd5f318ee607763c1c8cda15746c92d1dd4dfddac460d44a32cc0d3f1e82215b3947bb69ece792ad22f19a93f819fc94b96a749e5028312daa84af9957751196968ca19d7392a7590d3ac43dc36e98b63fa1ab5e4fe38ba42c462181c0e7608ae6598336777a751a4e048e094e60b06198629b982a7fd086ba2eb6092d7929286a850cf6d586c1e3d9e01b0f3c70a15a23b492b12426938551ecb675e473122f235708f0a3ac23b1465ce4213373c44e0623721fd288bc8aa379ee61d3e423400c8ff20234b3463e3993ae2f7a66a463adb4161fcae6c3ff925b5db87daf7d1bd0212aa75a4daf4bea52fd69fa9156f13e0f34
Appending param - name: policy, value: eyJjb25kaXRpb25zIjpbeyJDb250ZW50LVR5cGUiOiJpbWFnZVwvcG5nIn0seyJzdWNjZXNzX2FjdGlvbl9zdGF0dXMiOiIyMDEifSx7ImFjbCI6InByaXZhdGUifSxbImNvbnRlbnQtbGVuZ3RoLXJhbmdlIiwxLDIwOTcxNTIwXSx7ImJ1Y2tldCI6InNob3BpZnktc3RhZ2VkLXVwbG9hZHMifSx7ImtleSI6InRtcFwvNjk2NDY3Nzg1NjdcL2ZpbGVzXC84NDc2MTliYS04ZGFhLTRmZjgtYjMzMS1mYzE5MzU4ZGEyNDdcL2V4YW1wbGUucG5nIn0seyJ4LWdvb2ctZGF0ZSI6IjIwMjUwNDAxVDE3NTYwNVoifSx7IngtZ29vZy1jcmVkZW50aWFsIjoibWVyY2hhbnQtYXNzZXRzQHNob3BpZnktdGllcnMuaWFtLmdzZXJ2aWNlYWNjb3VudC5jb21cLzIwMjUwNDAxXC9hdXRvXC9zdG9yYWdlXC9nb29nNF9yZXF1ZXN0In0seyJ4LWdvb2ctYWxnb3JpdGhtIjoiR09PRzQtUlNBLVNIQTI1NiJ9XSwiZXhwaXJhdGlvbiI6IjIwMjUtMDQtMDJUMTc6NTY6MDVaIn0=
Form Headers: {
  'content-type': 'multipart/form-data; boundary=--------------------------386629209347580842224432'
}
Uploading file to AWS S3 via URL: https://shopify-staged-uploads.storage.googleapis.com/```

and Here's my code:

 
```const axios = require("axios");
const fs = require("fs");
const FormData = require("form-data");

const your_shopify_admin_url = "";
const your_shopify_admin_token = "";

async function uploadFile() {
try {
console.log("Starting file upload...");

// Read the file
console.log("Reading the file...");
const file = await fs.promises.readFile("./banner1.png"); // Using fs.promises.readFile
console.log("File read successfully.");

const fileSize = fs.statSync("./banner1.png").size; // Important to get the file size for future steps.
console.log("File size:", fileSize);

// Create staged upload
console.log("Creating staged upload...");
const stagedUploadsQuery = `
mutation stagedUploadsCreate($input: [StagedUploadInput!]!) {
stagedUploadsCreate(input: $input) {
stagedTargets {
resourceUrl
url
parameters {
name
value
}
}
userErrors {
field
message
}
}
}
`;

const stagedUploadsVariables = {
input: {
filename: "example.png",
httpMethod: "POST",
mimeType: "image/png",
resource: "FILE", // Important to set this as FILE and not IMAGE.
},
};

const stagedUploadsQueryResult = await axios.post(
`${your_shopify_admin_url}/graphql.json`,
{
query: stagedUploadsQuery,
variables: stagedUploadsVariables,
},
{
headers: {
"X-Shopify-Access-Token": your_shopify_admin_token,
},
}
);

console.log("Staged upload created:", stagedUploadsQueryResult.data);

const target = stagedUploadsQueryResult.data.data.stagedUploadsCreate.stagedTargets[0];
const params = target.parameters; // Parameters contain all the sensitive info we'll need to interact with the AWS bucket.
const url = target.url; // This is the url you'll use to post data to AWS.
const resourceUrl = target.resourceUrl; // This is the specific URL that will contain your image data after you've uploaded the file to the AWS staged target.

// Post to temp target (AWS S3)
console.log("Posting file to temporary target...");
const form = new FormData();

params.forEach(({ name, value }) => {
console.log(`Appending param - name: ${name}, value: ${value}`);
form.append(name, value);
});
form.append("file", file); // Append the file

// Log form headers and URL
console.log("Form Headers:", form.getHeaders());
console.log("Uploading file to AWS S3 via URL:", url);

// Perform the upload with increased timeout (120 seconds)
const response = await axios.post(url, form, {
headers: {
...form.getHeaders(), // Pass the headers generated by FormData library.
"Content-Length": fileSize + 5000, // Adjust content length.
},
timeout: 120000, // Set timeout to 120 seconds (longer timeout).
});

console.log("Upload Response:", response.data);

console.log("File uploaded to temporary target.");

// Create the file in Shopify
console.log("Creating file in Shopify...");
const createFileQuery = `
mutation fileCreate($files: [FileCreateInput!]!) {
fileCreate(files: $files) {
files {
alt
}
userErrors {
field
message
}
}
}
`;

const createFileVariables = {
files: [{
alt: "alt-tag",
contentType: "IMAGE",
originalSource: resourceUrl, // Use the resource URL.
}],
};

const createFileQueryResult = await axios.post(
`${your_shopify_admin_url}/graphql.json`,
{
query: createFileQuery,
variables: createFileVariables,
},
{
headers: {
"X-Shopify-Access-Token": your_shopify_admin_token,
},
}
);

console.log("File created in Shopify:", createFileQueryResult.data);

} catch (error) {
console.error("Error during file upload:", error.message);
if (error.response) {
console.error("Error response:", error.response.data);
}
}
}

// Execute the async function
uploadFile().catch((error) => {
console.error("Error during file upload execution:", error);
});```
1 Like

Hey @Sikander_Khan :waving_hand:

I did a bit of digging into this to see if this was a Shopify issue, and I think the issue may actually be related to how you’re setting the Content Length Header in Axios. Could you try the below instead?

// Perform the upload with increased timeout (120 seconds)
const response = await axios.post(url, form, {
  headers: {
    ...form.getHeaders(), // Pass the headers generated by FormData library.
    // Remove the manual Content-Length setting
  },
  timeout: 120000, // Set timeout to 120 seconds (longer timeout).
});

I’m thinking that setting a manual Content-Length might not accurately represent the entire payload size which is triggering the timeout. I was initially able to replicate the issue on my end using your code, but after using the Axios-calculated Content-Length it did allow me to upload an image to my test shop

We usually can’t help with third party library issues on our end, so if you do still encounter issues with this, I think reaching out to Axios here would be the best bet: