Upload Image To Shopify Via API

[Ido1425]

Hello everyone!

I am facing an issue uploading image buffers to Shopify files through my app.

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.

[Ido1425]

hi, thanks for the response.

stagedTarget.resourceUrl is the resource Url i got as a response to the stagedUploadsCreate mutation, as i understood this is the url i need to pass to the fileCreate mutation.

[Ido1425]

Anyone?

no info on shopify docs at all

[bkuermayr]

i have exactly the same issue