Upload image on shopify store

[Anshu-Shar]

Hello @Mini-Sylar

I need to upload the image on shopify store after deploy it on AWS but getting the below error.so please help me out on this. storefrontController.ProductFileUpload = async (req, res) => { try { const shop = req.body.store; const fileData = req.body.file;

// Step 1: Upload file to S3
let filePath = await uploadFileAsync(fileData);
const imageUrl = filePath; // Image URL from S3

// Step 2: Retrieve Shopify session to get access token
const shopifySession = await ShopifySessionClass.findOne({
  where: { shop: shop }
});

if (!shopifySession) {
  return res.status(404).json({ error: 'Shopify session not found' });
}

const accessToken = shopifySession.accessToken;

// Step 3: Prepare GraphQL mutation for file upload
const mutation = `
  mutation fileCreate($files: [FileCreateInput!]!) {
    fileCreate(files: $files) {
      files {
        id
        alt
        createdAt
      }
      userErrors {
        field
        message
      }
    }
  }
`;

const variables = {
  files: [{
    alt: 'upload file',
    contentType: "IMAGE",  // Ensure this matches the file type
    originalSource: imageUrl,
  }],
};

// Step 4: Make request to Shopify GraphQL API for file creation
const uploadResponse = await axios.post(`https://${shop}/admin/api/2024-01/graphql.json`, {
  query: mutation,
  variables,
}, {
  headers: {
    'X-Shopify-Access-Token': accessToken,
    'Content-Type': 'application/json'
  }
});

// Step 5: Debugging response
console.log('Shopify GraphQL Upload Response:', JSON.stringify(uploadResponse.data, null, 2));

const fileCreateResult = uploadResponse.data.data?.fileCreate;

if (fileCreateResult?.userErrors?.length) {
  console.error('User errors:', fileCreateResult.userErrors);
  return res.status(400).json({ error: fileCreateResult.userErrors });
}

const fileId = fileCreateResult.files[0].id;

// Step 6: Query the file details using the file ID
const fileDetailsQuery = `
  query getFileDetails($id: ID!) {
    file(id: $id) {
      id
      alt
      createdAt
      url
    }
  }
`;

const fileDetailsVariables = { id: fileId };

// Make the request to fetch file details
const fileDetailsResponse = await axios.post(`https://${shop}/admin/api/2024-01/graphql.json`, {
  query: fileDetailsQuery,
  variables: fileDetailsVariables,
}, {
  headers: {
    'X-Shopify-Access-Token': accessToken,
    'Content-Type': 'application/json'
  }
});

// Step 7: Debugging file details response
console.log('Shopify File Details Response:', JSON.stringify(fileDetailsResponse.data, null, 2));

const fileDetails = fileDetailsResponse.data.data?.file;
const shopifyFileURL = fileDetails?.url;

if (!shopifyFileURL) {
  return res.status(500).json({ error: 'File URL not found' });
}

// Step 8: Return the Shopify file URL in response
return res.status(200).json({ fileUrl: shopifyFileURL });

} catch (error) { console.error('Error uploading or retrieving file from Shopify:', error); return res.status(500).json({ error: 'Error uploading or retrieving file from Shopify' }); } }; Getting the error as below:- 20:33:01 │ web-backend │ Shopify GraphQL Upload Response: { 20:33:01 │ web-backend │ "data": { 20:33:01 │ web-backend │ "fileCreate": { 20:33:01 │ web-backend │ "files": [ 20:33:01 │ web-backend │ { 20:33:01 │ web-backend │ "id": "gid://shopify/MediaImage/39028884635967", 20:33:01 │ web-backend │ "alt": "upload file", 20:33:01 │ web-backend │ "createdAt": "2024-09-05T15:03:01Z" 20:33:01 │ web-backend │ } 20:33:01 │ web-backend │ ], 20:33:01 │ web-backend │ "userErrors": [] 20:33:01 │ web-backend │ } 20:33:01 │ web-backend │ }, 20:33:01 │ web-backend │ "extensions": { 20:33:01 │ web-backend │ "cost": { 20:33:01 │ web-backend │ "requestedQueryCost": 20, 20:33:01 │ web-backend │ "actualQueryCost": 20, 20:33:01 │ web-backend │ "throttleStatus": { 20:33:01 │ web-backend │ "maximumAvailable": 2000, 20:33:01 │ web-backend │ "currentlyAvailable": 1980, 20:33:01 │ web-backend │ "restoreRate": 100 20:33:01 │ web-backend │ } 20:33:01 │ web-backend │ } 20:33:01 │ web-backend │ } 20:33:01 │ web-backend │ } 20:33:02 │ web-backend │ Shopify File Details Response: { 20:33:02 │ web-backend │ "errors": [ 20:33:02 │ web-backend │ { 20:33:02 │ web-backend │ "message": "Field 'file' doesn't exist on type 'QueryRoot'", 20:33:02 │ web-backend │ "locations": [ 20:33:02 │ web-backend │ { 20:33:02 │ web-backend │ "line": 3, 20:33:02 │ web-backend │ "column": 9 20:33:02 │ web-backend │ } 20:33:02 │ web-backend │ ], 20:33:02 │ web-backend │ "path": [ 20:33:02 │ web-backend │ "query getFileDetails", 20:33:02 │ web-backend │ "file" 20:33:02 │ web-backend │ ], 20:33:02 │ web-backend │ "extensions": { 20:33:02 │ web-backend │ "code": "undefinedField", 20:33:02 │ web-backend │ "typeName": "QueryRoot", 20:33:02 │ web-backend │ "fieldName": "file" 20:33:02 │ web-backend │ } 20:33:02 │ web-backend │ }, 20:33:02 │ web-backend │ { 20:33:02 │ web-backend │ "message": "Variable $id is declared by getFileDetails but not used", 20:33:02 │ web-backend │ "locations": [ 20:33:02 │ web-backend │ { 20:33:02 │ web-backend │ "line": 2, 20:33:02 │ web-backend │ "column": 7 20:33:02 │ web-backend │ } 20:33:02 │ web-backend │ ], 20:33:02 │ web-backend │ "path": [ 20:33:02 │ web-backend │ "query getFileDetails" 20:33:02 │ web-backend │ ], 20:33:02 │ web-backend │ "extensions": { 20:33:02 │ web-backend │ "code": "variableNotUsed", 20:33:02 │ web-backend │ "variableName": "id" 20:33:02 │ web-backend │ } 20:33:02 │ web-backend │ } 20:33:02 │ web-backend │ ] 20:33:02 │ web-backend │ }

[Mini-Sylar]

@Anshu-Shar i'm not sure I understand what the issue is

i'm assuming you're uploading an image from your application to shopify's CMS?

[Mini-Sylar]

Marking as closed, Stale over a month