ajax - Error while Image upload in javascript -

i trying upload image on reader.onloadend() getting error:

uncaught typeerror: illegal invocation     @ function.n.param (jquery.min.js:4)     @ filereader.reader.onloadend (bundle.js:3513) 

code:

previewfile(e){      var previewimage = self.root.queryselector("#previewimage");     var file = self.root.queryselector('input[type=file]').files[0];     var reader  = new filereader();      if(file){         reader.readasdataurl(file);     } else {         previewimage.src = "";     }      reader.onloadend = function(){          var blob = self.b64toblob(reader.result.split('base64,')[1]);         var bloburl = url.createobjecturl(blob);         previewimage.src = bloburl;          var data = {             post_id: e.target.dataset.id,             imageblob: blob,             imageurl : bloburl,             imagename: file.name         }          $.ajax({             url: '/uploadimage',             type: 'post',             data: data,             success: function(data, textstatus, jqxhr) {                 console.log('image upload success');             },              error: function(jqxhr, textstatus, errorthrown){                 console.log('errors: ' + textstatus);             }         });     } } 

i guess scoping issue async ajax being made while reading file not sure. how fix this?

update:

when remove line imageblob: blob, following object, works want save blob well:

var data = {     post_id: e.target.dataset.id,     imageblob: blob,     imageurl : bloburl,     imagename: file.name }