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 (image). 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, Rick
EDIT
I have made some progress on the issue Cbroe answered. But I'm still stuck on getting the Ticket ID and file token. Can someone show me what I did wrong?
Here is the updated code:
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
};
return $.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
}
}
}),
};
return $.ajax(settings).done(function (response) {
console.log(response);
var id = $.parseJSON(response).ticket.id;
return id;
});
}
function attachFile() {
var ticketId = JSON.stringify(createTicket().responseText);
var fileToken = JSON.stringify(uploadFile().responseText);
console.log("attaching file");
console.log("Url ticketId: " + ticketId);
var settings = {
"success": function (response) {
console.log(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": "Receipt or invoice",
"uploads": [
fileToken
]
}
}
}),
};
$.ajax(settings);
}
$("#button_customer_service_register").click(function(e) {
e.preventDefault();
console.log("form submission");
if (formValidation()) {
console.log("handling form");
attachFile();
}
})
