Unable to show progress bar using SharePoint REST API

Question

I am trying use XMLHttpRequest to show a progress bar when uploading files to a SharePoint list via REST api. The same code works on this codepen even without the parser.php file. Just trying to show the progress bar even if files don't successfully upload. I tried console logging from inside the progressHandler and completeHandler functions but it does not seem like the functions are being called. I do not get any errors. Does SharePoint allow for use of XMLHttpRequest in this way? How can I show progress bar. Thank you.

             function _(id) { 
                            return document.getElementById(id);
                        }
                        function uploadFiles() {
                            var formdata = new FormData();
                            var ufiles = _("attachments").files;
                            console.log(ufiles);
                            for(var i = 0; i < ufiles.length; i++) {
                                console.log(ufiles[i].name + " : " + ufiles[i].size + " : " + ufiles[i].type);
                            }
                            formdata.append("username", "Adam");
                            var ajax = new XMLHttpRequest();
                            console.log(ajax.upload);
                            ajax.upload.addEventListener("progress", progressHandler, false)
                            ajax.addEventListener("load", completeHandler, false);
                            ajax.open("POST", "parser.php");
                        }
                        function progressHandler(event) {
                            console.log('inside progressHandler...');
                            _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+ "bytes of "+event.total;
                            var percent = (event.loaded / event.total) * 100;
                            _("progressBar").value = Math.round(percent);
                            _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
                        }
                        function completeHandler(event) {
                            console.log('inside completeHandler...');
                            _("status").innerHTML = event.target.responseText;
                            _("progressBar").value = 0;
                            _("upload_form").reset();
                        }

html:

                        <div class="form-control">
                            <input type="file" class="input-lg" name="attachments" id="attachments" multiple onchange="getFileData()">
                            <br><br>
                            <input type="button" class="input-lg"  value=" Attach " onclick="uploadFiles()">
                            <progress id="progressBar" value="0" max="100" style="width:100%;"></progress>
                            <h3 id="status"></h3>
                            <p id="loaded_n_total"></p>
                        </div>