Trouble sending JavaScript mp3 file to asp.net generic handler via Ajax?

Question

I have an Input FileUpload and a button as html elements

<input id='track' type='file' style='display: none' accept='.mp3' />
<input type="button" id="btnUpload" value="Upload" />

and has a javascript event handler which saves the uploaded file as a javascript variable.

 document.getElementById("track").addEventListener("change",upload_track_audio_eventhandler, false);

   var currentTrackAudioFile;
    
   function upload_track_audio_eventhandler() {
        var files = event.target.files;
        currentTrackAudioFile = files[0];
    }

and then there is another function which is suppose to upload the audio file (currentTrackAudioFile) to asp.net Generic Handler.

 document.getElementById("btnUpload").addEventListener("click", butttonclick)


        function butttonclick() {

            $.ajax({
                url: 'Handler1.ashx',
                type: 'POST',
                data: currentTrackAudioFile,
                cache: false,
                contentType: false,
                processData: false,
                success: function (file) {
                    alert("uploaded");
                }
            });
        }

public class Handler1 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            if (context.Request.Files.Count > 0)
            {
                HttpPostedFile postedFile = context.Request.Files[0];

                string folderPath = context.Server.MapPath("~/Uploads/");
                string fileName = Path.GetFileName(postedFile.FileName);
                postedFile.SaveAs(folderPath + fileName);
                string json = new JavaScriptSerializer().Serialize(
                    new
                    {
                        name = fileName
                    });
                context.Response.StatusCode = (int)HttpStatusCode.OK;
                context.Response.ContentType = "text/json";
                context.Response.Write(json);
                context.Response.End();
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

But its not receiving the file. context.Request.Files.Count is 0.

What am i doing wrong ?

p.s. I don't want to send directly from the DOM ( i.e. data: new FormData($('form')[0]))