Ipfs-http-client@49.0.4 not working as version@39.0.2

Help Coding
1

I used the following simple code with v@39.0.2. Everything was working fine. But I want to keep the things updated. What are the things I’m doing wrong here? This maybe a stupid question, but I’m absolute beginner here.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Infura IPFS Issue</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://unpkg.com/ipfs-http-client@49.0.4/dist/index.min.js"></script>
    <!-- required to convert ArrayBuffer to Buffer --> 
    <script src="https://bundle.run/buffer@6.0.3"></script> 

  </head>
  <body>

    <h3>Infura to IPFS</h3>
    <input type="file" id="upload">

    <script>
        const ipfs = window.IpfsHttpClient('ipfs.infura.io', '5001')

        $("#upload").on("change", function() {
            var reader = new FileReader();
            reader.onload = function (e) {

                const magic_array_buffer_converted_to_buffer = buffer.Buffer(reader.result); // honestly as a web developer I do not fully appreciate the difference between buffer and arrayBuffer 
                ipfs.add(magic_array_buffer_converted_to_buffer, (err, ipfsHash) => {
                    console.log(ipfsHash[0].hash);
                })
            }
            reader.readAsArrayBuffer(this.files[0]);
        })
    </script>

  </body>
</html>

Error I’m getting here is :

Uncaught TypeError: Failed to construct ‘URL’: Invalid URL

2

I’m pretty sure the arguments to window.IpfsHttpClient need to either be {host: 'ipfs.infura.io', port: '5001'} or a URL (http(s)://ipfs.infura.io:5001)`. But I have no quick way of checking.