Files uploaded via API does not open.

I have a custom Contact Us form that was built via AJAX. The files uploaded via API call to https://narvar.zendesk.com/api/v2/uploads.json are successful and token is returned. However, the uploaded file is corrupted and does not open. Can someone assist regarding this? This is the code that is being used

const attachmentTokens = [];

const username = "user@user.com"; // Replace with your username

const apiToken = "token"; // Replace with your API token

const authHeader = "Basic " + btoa(username + "/token:" + apiToken); // Concatenate username with /token and the API token

for (const file of files) {

const formData = new FormData();

const fileName = encodeURIComponent(file.name);

const fileContentType = file.type || "application/octet-stream"; // Default to a generic binary type if type is not available

const fileBlob = new Blob([file], { type: fileContentType });

// Log the file as a Blob for debugging

console.log("File Blob:", fileBlob);

formData.append("file", fileBlob, file.name);

console.log("FileType:", fileContentType);

console.log("FileName:", fileName);

console.log("File:", formData);

try {

const response = await $.ajax({

url: `https://narvar.zendesk.com/api/v2/uploads.json?filename=${fileName}`,

type: "POST",

data: formData,

processData: false,

contentType: false,

headers: {

Authorization: authHeader,

"Content-Type": fileContentType,

},

xhrFields: {

responseType: "json", // Set expected response type as JSON

},

});