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?