POST https://ipfs.infura.io:5001/ipfs/api/v0/add?stream-channels=true&progress=false 403 (Forbidden). HTTPError: ipfs method not supported

Below is how i create the client.

import { create as ipfsHttpClient } from 'ipfs-http-client';
const projectId = 'xx';
const projectSecret = 'xx';
const auth = `Basic ${Buffer.from(`${projectId}:${projectSecret}`).toString('base64')}`;
const options = {
  host: 'ipfs.infura.io',
  protocol: 'https',
  port: 5001,
  apiPath: '/ipfs/api/v0',
  headers: {
    authorization: auth,
  },
};
const dedicatedEndPoint = 'https://xx.infura-ipfs.io';
const client = ipfsHttpClient(options);

Here is the function that will be called from front-end that takes in a file, uploads to IPFS and returns URL. Please note that the “ipfsHTTPClient()” is just the create function.

const uploadToIPFS = async (file) => {
    try {
      const added = await client.add({ content: file });

      const url = `${dedicatedEndPoint}${added.path}`;

      return url;
    } catch (error) {
      console.log('Error uploading file to IPFS: ', error);
    }
  };

The error I am getting is

POST https://ipfs.infura.io:5001/ipfs/api/v0/add?stream-channels=true&progress=false 403 (Forbidden) 

When i console log the error it says the IPFS method is not supported.

On the IPFS forum, i have seen someone say that add function does not work anymore but i have also seen people using it and it working. Im not sure whats wrong here.

Here is how i call the function on front-end

const { uploadToIPFS } = useContext(NFTContext);

// function called from useDropzone
const onDrop = useCallback(async (acceptedFile) => {

    const url = await uploadToIPFS(acceptedFile[0]);

    setFileUrl(url);
}, []);

Hey, I’m pretty sure that this path should only be '/api/v0'