Hello everyone!
I am facing an issue uploading image buffers to Shopify files through my app.
i am compressing product images and trying to upload them to Shopify files dashboard.
the process is working but in the Shopify files dashboard, there is a processing error on all images.
The error:
This is the code for the process(this is gadget.dev platform app):
async function uploadImage(productId, imageId, compressedBuffer, imageFormatTemp, connections, logger) {
try {
// Step 1: Create the image asset in Shopify using stagedUploadsCreate mutation
const uploadQuery = `
mutation stagedUploadsCreate($input: [StagedUploadInput!]!) {
stagedUploadsCreate(input: $input) {
stagedTargets {
url
resourceUrl
parameters {
name
value
}
}
}
}
`;
const uploadVariables = {
input: [
{
filename: `${imageId}-compressed.${imageFormatTemp}`,
mimeType: `image/${imageFormatTemp}`,
httpMethod: "POST",
resource: "FILE",
fileSize: `${compressedBuffer.length}`
},
],
};
const uploadResponse = await graphqlWithRetry(uploadQuery, uploadVariables, connections, logger);
const stagedTarget = uploadResponse.stagedUploadsCreate.stagedTargets[0];
const { url, parameters } = stagedTarget;
// Step 2: Upload the compressed image to the pre-signed URL
const formData = new FormData();
parameters.forEach(param => formData.append(param.name, param.value));
formData.append('file', compressedBuffer, `${imageId}-test.${imageFormatTemp}`);
await fetch(url, {
method: 'POST',
body: formData,
headers: {
...formData.getHeaders(), // Pass the headers generated by FormData library
},
});
// Step 3: Create the image asset in Shopify using fileCreate mutation
const createFileQuery = `
mutation fileCreate($files: [FileCreateInput!]!) {
fileCreate(files: $files) {
files {
id
alt
createdAt
}
}
}
`;
const createFileVariables = {
files: [
{
alt: "test upload Image",
contentType: "IMAGE",
originalSource: stagedTarget.resourceUrl,
},
],
};
await graphqlWithRetry(createFileQuery, createFileVariables, connections, logger);
logger.info('New compressed image created');
} catch (error) {
logger.error(error, `Failed to update image ${imageId} for product ${productId} in Shopify.`);
}
}
all the process seems to work well on my side, I get the ‘New compressed image created’ log, but in Shopify, I keep getting the error with extra info with the error.
