Completed
Last Updated: 07 Nov 2018 15:31 by ADMIN
ADMIN
Ivan Danchev
Created on: 09 Jun 2017 10:27
Category: UI for ASP.NET AJAX
Type: Bug Report
0
AsyncUpload progress shows more than 100% when uploading a file
Affects RadCloudUpload and RadAsyncUpload combined with RadProgressArea. Manifests most often on slow networks or very large files.
Scroll down for workarounds for both cases.

NOTE: RadCloudUpload issue is logged separately - https://feedback.telerik.com/Project/108/Feedback/Details/258958-cloudupload-progress-shows-more-than-100-when-uploading-a-file

WORKAROUND FOR PROGRESS AREA is to round down the data, as it seems the server reports more bytes uploaded than they actually are, and that tends to happen under slow network conditions

<telerik:RadAsyncUpload RenderMode="Lightweight" runat="server" ID="RadAsyncUpload1" MultipleFileSelection="Automatic" EnableInlineProgress="false" />
<telerik:RadProgressManager runat="server" ID="RadProgressManager1" />
<telerik:RadProgressArea RenderMode="Lightweight" runat="server" ID="RadProgressArea1" OnClientProgressUpdating="OnClientProgressUpdating" />
<script>
function OnClientProgressUpdating(sender, args) {
    //debugger
    if (args._progressData.PrimaryPercent > 100) {
        args._progressData.PrimaryPercent = 100;
    }
    if (args._progressData.PrimaryValue > args._progressData.PrimaryTotal) {
        args._progressData.PrimaryValue = args._progressData.PrimaryTotal;
    }
    console.log(args.get_progressData());
}
</script>

WORKAROUND FOR CLOUD UPLOAD is to add the following script at the end of the form that will override the built-in XHR handilng to change the way the totals are calculated:

        <script>
            Telerik.Web.UI.RadCloudUpload.HandlerUploader.prototype._initializeXmlHttpRequest = function () {
                this._xhr = new XMLHttpRequest();

                var that = this,
                    module = this._module,
                    xhr = this._xhr;

                xhr.onreadystatechange = function readyStateChanged() {
                    if (xhr.readyState == 4) {
                        if (xhr.status == 200) {
                            that._successfulResponseStatus(xhr);
                        }
                        else if (xhr.status != 0) {
                            that._failedResponseStatus(xhr);
                        }
                    }
                };

                xhr.upload.onprogress = function (event) {
                    that._uploadedSize += event.loaded;

                    var percents = Math.round((event.loaded / event.total) * 100) + "%";

                    module._renderingManager.updateRowProgress(that._uploadingEntity.row, percents, true);
                };
            }
        </script>
0 comments