When doing a POST file upload using "new XMLHttpRequest()" progress is not fired at any consistent interval. When you do a upload the progress jumps to a high % and will randomly fire at large intervals. If you have a slow connection it will seem as if progress is not being made because it may go instantly to 7% then to 15% then 25% and so on. With a large file, the events are fired in a long interval between. This is mostly observed with a slow connection. If you use "Network Link Conditioner" includes with "Additional xCode Tools" Slow your connection to 10 Mbps download and 1 mbps upload. Then use the sample code below and upload a large-size file and you will see progress inside webkit/safari does not fire at any set interval allowing for smooth progress. If you use the same code in FireFox or another non webkit browser the progress event is fired correctly allowing for smooth progress and updated upload information. SAMPLE CODE: <!DOCTYPE html> <html> <head> <script> function _(el){ return document.getElementById(el); } function uploadFile(){ var file = _("file1").files[0]; // alert(file.name+" | "+file.size+" | "+file.type); var formdata = new FormData(); formdata.append("file1", file); var ajax = new XMLHttpRequest(); ajax.upload.addEventListener("progress", progressHandler, false); ajax.addEventListener("load", completeHandler, false); ajax.addEventListener("error", errorHandler, false); ajax.addEventListener("abort", abortHandler, false); ajax.open("POST", "https://httpbin.org/post"); ajax.send(formdata); } function progressHandler(event){ _("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){ _("status").innerHTML = event.target.responseText; _("progressBar").value = 0; } function errorHandler(event){ _("status").innerHTML = "Upload Failed"; } function abortHandler(event){ _("status").innerHTML = "Upload Aborted"; } </script> </head> <body> <h2>HTML5 File Upload Progress Bar Tutorial</h2> <form id="upload_form" enctype="multipart/form-data" method="post"> <input type="file" name="file1" id="file1" onchange="uploadFile()" ><br> <progress id="progressBar" value="0" max="100" style="width:300px;"></progress> <h3 id="status"></h3> <p id="loaded_n_total"></p> </form> </body> </html>
<rdar://problem/133245878>
I have the same issue on WebKit iOS 18. totalSize is completely off until it is complete, then changes to the correct value: total: 18446744073709552000 totalSize: 18446744073709552000 Last progress event returns the correct values: total: 59461221 totalSize: 59461221