NEW 277286
XHR Upload Progress Even Fires Erratic/Randomly on Slow Connections 
https://bugs.webkit.org/show_bug.cgi?id=277286
Summary XHR Upload Progress Even Fires Erratic/Randomly on Slow Connections
Donovan
Reported 2024-07-29 14:57:12 PDT
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>
Attachments
Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2024-08-05 14:58:14 PDT
<rdar://problem/133245878>
Fred S
Comment 2 2024-09-22 07:03:11 PDT
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
Note You need to log in before you can comment on or make changes to this bug.