There are many ways to do this in javascript. If you want to do it all on a single file, first you need to deploy your files to IPFS. I recommend using one of the few existing APIs to make it easier, such as Moralis, Nft.storage or Piñata.

With NFT.storage, you can do something like this to deploy to IPFS:

const names = [
  "Test nft 1",
  "Test nft 2"
];

async function storeImage() {
  const content = await fs.readFile(
    path.resolve(__dirname, "../images/owl_articles.png")
  );

  const promisesToAwait: Promise<any>[] = [];

  names.forEach((name) => {
    promisesToAwait.push(
      client.store({
        name,
        description: `At vero eos et accusamus et iusto odio dignissimos.`,
        image: new File([content], "owl_articles.png", { type: "image/*" }),
      })
    );
  });

  const responses = await Promise.all(promisesToAwait);
  console.log(responses);
}

async function main() {
  await storeImage();
}

main();

The peice of code above will deploy an array of json files to IPFS, given the array names. They all have the same image and description for the sake of simplicity of the example.

In moralis, you can do something similar:

const jsonFile = new Moralis.File('file.json', {
        base64: btoa(JSON.stringify({ name, description, image: imageURL }))
});

The code above will also deploy to ipfs, but in a different way. I don't know why right now, but while this Moralis approach deploys it with ipfs://{hash} NFt.storage approach deploys it as ipfs://{hash}/metadata.json.

Anyway, after you use any of the processes above, you have to mint your NFT passing the URI as a param.

Using moralis, you can do it like this:

      const jsonIpfsLink = `ipfs://${(jsonFile as any).hash()}/metadata.json`;

      await Moralis.Web3.executeFunction({
        ...options,
        functionName: 'create',
        params: {
          _initialSupply: '10',
          _uri: jsonIpfsLink
        }
      });

The code above is calling the method createfrom my ERC1155 contract. The contract method is shown below:

    /**
     * @dev Creates a new token type and assigns _initialSupply msg.sender address
     * @param _initialSupply amount to supply the first owner
     * @param _uri URI for this token
     */
    function create(uint256 _initialSupply, string memory _uri) public {
        _uris[lastId.current()] = _uri;
        creators[lastId.current()] = msg.sender;
        _mint(msg.sender, lastId.current(), _initialSupply, "");
        emit ArticleMinted(msg.sender, _uri, lastId.current(), _initialSupply);
        lastId.increment();
    }

My example uses ERC1155 pattern, but it should be very similar on ERC721 pattern. It looks like you are using neither of them in your contract, but I strongly advise you to. Also, Moralis would make your life easier. I would suggest using it in your front-end project.

I'm making a NFT marketplace and I use pretty much the code above to deploy to IPFS and mint right after.