Uploading attachment while editing a SharePoint list item using Jquery not working

Question

I have a custom SharePoint item edit form. The form works well for everything until I try to add attachments. It says files have been uploaded but it doesn't upload. it gives me this warning on the console

jquery-1.12.4.js:10208 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

here is my code

               var files= fileList.length;
             //fileList is an array which has the files i need to upload
                $.ajax({
                    url: "https://mysite/_api/web/lists/getbytitle('EventTracker')/items("+id+")",
                    type: "POST",
                    contentType: "application/json;odata=verbose",
                    data: JSON.stringify(itemproperties),
                    async: false,
                    headers: {
                    "accept": "application/json;odata=verbose",  
                    "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
                    "content-Type": "application/json;odata=verbose",  
                    "IF-MATCH": "*",  
                    "X-HTTP-Method": "MERGE"},
                    success: function (data)
                     {
                    
                            if(files>0)
                            {   
                                    for(var i=0; i<files;i++)
                                    {
                                    var file= fileList[i];
                                    console.log("updated" + fileList[i]);
                                    uploadFile(id, file);
            
                                    }
                                    $("table.tbl_jatoc").hide();
                                     $("#thankyou").show();
                              }
                              
                     },
                    error: function (fail) {
                    //$("#err").show();
                    alert("<br/> Error occured please infor the administrators");
                    
                    }
                    }); 
                    
                             
                   });



here is the file upload function
   function uploadFile(data, file)
  {
   var getFileBuffer = function (file) {
    var deferred = $.Deferred();
    var reader = new FileReader();

    reader.onload = function (e) {
        deferred.resolve(e.target.result);
    }

    reader.onerror = function (e) {
        deferred.reject(e.target.error);
    }

    reader.readAsArrayBuffer(file);

    return deferred.promise();
};

getFileBuffer(file).then(function (buffer) {
    var binary = "";
    var bytes = new Uint8Array(buffer);
    var i = bytes.byteLength;
    while (i--) {
        binary = String.fromCharCode(bytes[i]) + binary;
    }
    var fileName = file.name;
    var error = ''
    $().SPServices({
        operation: "AddAttachment",
        async: false,
        listName: "AJI Event Tracker",
        listItemID: data,
        fileName: fileName,
        attachment: btoa(binary),
        completefunc: function (xData, Status) {
            console.log(file.name+" " + "uploaded");
        }
    });
});

}

I am able to update the items but the files are not being uploaded to the attachments. it says uploaded in the console but gives that warning. if I take off the file upload section then it works fine. I tried changing async to true still did not help

Any help or guidance much appreciated.

Answer 1

The code looks fine for uploading attachments. In my case, my ID has extra comma characters

   id= id.replace(/%27/g,"");

which I removed once I retrieved. and it worked.