I'm not a full-time coder and been trying to send a file to IPFS via nft.storage API. I'm trying to send image files stored in my server, not from a web form.

I used the curl function as below from my PC and it works.

curl -H "Authorization: Bearer eyJhbGciOiJIUzI1NiIsIn..." -H "Content-Type: image/png" --data-binary "@C:/mydoc/beerbee/beerbee-icon.png" --url "https://api.nft.storage/upload"

But, it doesn't work for the js code below. The only thing I got is the text "@home/myfolder/file.png" (not an image) whenever I access the content addressing identifier URL, such as this -> https://bafkreicpceead4w3hsrnyhvkwab233x66wpra57rwqyx5im4jikt4ety3q.ipfs.dweb.link/

document.getElementById("test").addEventListener("click", function() {
        
    var url = "https://api.nft.storage/upload";

    var xhr = new XMLHttpRequest();
    xhr.open("POST", url);
    
    xhr.setRequestHeader("Authorization", "Bearer eyJhbGciOiJIUzI1NiIsInR5cC....");
    xhr.setRequestHeader("Content-Type", "image/png");
    
    xhr.onreadystatechange = function () {
       if (xhr.readyState === 4) {
          console.log(xhr.status);
          console.log(xhr.responseText);
       }};

    var data = "@home/myfolder/file.png";

    xhr.send(file);
        
});