Creating a ticket via Zendesk API with a custom form and file upload

Hello,

Currently I'm trying to create a ticket in Zendesk via the API. Users should be able to fill in a custom form on my website and upload a file. On submission a ticket with the file should be created in Zendesk.

Creating the ticket itself is working fine. As far as I can see, so is uploading the file (although I'm not sure), but I can't attach the file to a ticket via a comment, because I'm not able to get the ID from the created ticket from the response. Below the code sample:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
    function formValidation() {
        var easyWalker = $("#choose_product option:selected").html();
        var batchNumber = document.getElementById("batch_number").value;
        var color = document.getElementById("color").value;
        var firstName = document.getElementById("first_name").value;
        var lastName = document.getElementById("last_name").value;
        var email = document.getElementById("email").value;
        var phone = document.getElementById("phone").value;
      
        if (easyWalker == "" || batchNumber == "" || color == "" || firstName == "" || lastName == "" || email == "" || phone == "") {
                const value = document.getElementById("errorMsg");
                value.innerHTML = "Something went wrong, please try again!";
                $('#errorMsg').css("display", "block");
        } else { return true; }
    }

    var auth = <authentication key here>;
    
    function uploadFile() {
        console.log("uploading file");
    
        var f = document.getElementById("file").files[0]; 
        
        if (f) {
          var reader = new FileReader();
          reader.onload = function(e) {
            const metadata = `name: ${f.name}, type: ${f.type}, size: ${f.size}, contents:`;
            const fileName = f.name;
            const fileContents = e.target.result;
            console.log(metadata, fileContents);
      
            var settings = {
                "url": "https://easywalkersupport.zendesk.com/api/v2/uploads.json?filename=" + fileName,
                "method": "POST",
                "timeout": 0,
                "headers": {
                  "Content-Type": "application/binary"
                },
                "data": fileContents
            };
            
            $.ajax(settings).done(function (response) {
                console.log(response);
                var token = $.parseJSON(response).upload.token;
                return token;
            });
          };
        }
    }
    
    function createTicket() {      
        var easyWalker = $("#choose_product option:selected").html();
        var batchNumber = document.getElementById("batch_number").value;
        var color = document.getElementById("color").value;
        var firstName = document.getElementById("first_name").value;
        var lastName = document.getElementById("last_name").value;
        var email = document.getElementById("email").value;
        var phone = document.getElementById("phone").value;
      
        console.log("creating ticket");
        var settings = {
            "url": "https://easywalkersupport.zendesk.com/api/v2/tickets",
            "method": "POST",
            "timeout": 0,
            "headers": {
                "Content-Type": "application/json",
                "Authorization": "Basic " + auth
            },
            "data": JSON.stringify({
                "ticket": {
                    "subject": "New Easywalker Warranty Registry from " + firstName + " " + lastName,
                    "description": 
                      "Product: " + easyWalker + "\n" +
                      "Batch Number: " + batchNumber + "\n" +
                      "Color: " + color + "\n" +
                      "Name: " + firstName + " " + lastName + "\n" +
                      "Email: " + email + "\n" +
                      "Phone Number: " + phone,
                    "requester": {
                      "name": firstName + " " + lastName,
                      "email": email
                    }
                }
            }),
        };
      
        $.ajax(settings).done(function (response) {
                console.log(response);
                var id = $.parseJSON(response).ticket.id;
                return id;
        });
    }
    
    function attachFile(ticketId, fileToken) {
        console.log("attaching file");
        var settings = {
            "success": function(response) {
                const value = document.getElementById("button_customer_service_register");
                value.innerHTML = "Message sent";
                $(".button_customer_service_register").toggleClass("success_button_customer_service_register");
                document.getElementById("registryForm").reset();
                $('#successMsg').css("display", "block");
                $('#errorMsg').css("display", "none");
            },
            "url": "https://easywalkersupport.zendesk.com/api/v2/tickets/" + ticketId,
            "method": "PUT",
            "timeout": 0,
            "headers": {
                "Content-Type": "application/json",
                "Authorization": "Basic " + auth
            },
            "data": JSON.stringify({
                "ticket": {
                    "comment": {
                        "body": "Reaceipt or invoice",
                            "uploads": [
                                fileToken
                            ]
                    }
                }
            }),
        };
        
        $.ajax(settings).done(function (response) {
            console.log(response);
        });
    }
    
    $("#registryForm").submit(function(e) {
        e.preventDefault();
        console.log("form submission");
        if (formValidation()) {
            console.log("handling form");
            attachFile(createTicket(), uploadFile());
        }
    })
</script>

Is there a solution to this?

Greetings, Ivan