upload image to shopify

upload image to shopify

Ido1425
Shopify Partner
26 0 0

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:

Ido1425_0-1720625162013.png

 

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.

Replies 4 (4)

BSSCommerce-TC
Shopify Expert
165 34 36

Hi @Ido1425 ,

 

Please ensure that your image file meets all the following conditions:

BSSCommerceTC_0-1720626265871.png

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Ido1425
Shopify Partner
26 0 0

It's the compression of images that already exist in the products of the store, so they are supposed to meet all those requirements anyway no?

 

i am trying to upload it as a buffer

Ido1425
Shopify Partner
26 0 0
BSSCommerce-TC
Shopify Expert
165 34 36

Hi @Ido1425 ,

 

First, try uploading the image directly in the Store Admin. If it fails, it is likely that it does not meet the conditions above. You need to validate the image before compressing it into the buffer.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency