[Webkit-unassigned] [Bug 277286] New: XHR Upload Progress Even Fires Erratic/Randomly on Slow Connections

Mon Jul 29 14:57:12 PDT 2024

https://bugs.webkit.org/show_bug.cgi?id=277286

            Bug ID: 277286
           Summary: XHR Upload Progress Even Fires Erratic/Randomly on
                    Slow Connections
           Product: WebKit
           Version: Safari 17
          Hardware: All
                OS: All
            Status: NEW
          Severity: Major
          Priority: P2
         Component: JavaScriptCore
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: donovan at speedsmart.net

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>

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20240729/a88897d3/attachment-0001.htm>