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;
                            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();
                            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;


                        <div class="form-control">
                            <input type="file" class="input-lg" name="attachments" id="attachments" multiple onchange="getFileData()">
                            <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>


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.