Broken attachment after upload

I'm using the ajax to upload attachments but uploading the file  it gets broken.
this is my code

let data = new FormData();
file = $("#upfile")[0].files[0];
if (file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {

data.append("image", new Blob([e.target.result], {type:file.type}));
//data.append("files", file);
let filename = $('input[type=file]').val().replace(/C:\\fakepath\\/i, '')
$.ajax({
url: 'https://myzendeskhost.zendesk.com/api/v2/uploads.json?filename=' + filename,
type: 'POST',
data: data,
contentType: 'application/binary',
processData: false,
beforeSend: function () {
$('body').css({opacity: 0.5})
},
headers: {
'Authorization': "Basic " + btoa(username + "/token:" + 'token')
},
success: function (response) {
const obj = JSON.parse(response);
},
error: function (re) {
}
});
};
}