1

Here's the working example of Javascript/JQuery multiple file upload using the XmlHttpRequest API. Then I noticed the progress bar animation is not updating itself. Upon debugging I found that the XmlHttpRequest's Progress listener is working.

So, what is causing the progress bar not updating itself? When I use the javascript alert(), the progress bar animation works but if I comment out the javascript alert() for production user, the progressbar animation doesn't work.

What could be the problem? What can we do to solve this problem?

/* Outer (1) - Centering the Popup Box... */
#WebUploadProgressWebpageOuter {  
    z-index:2497;
    display: none;
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
}
/* Middle (2) - Centering the Popup Box... */
#WebUploadProgressWebpageMiddle {
    vertical-align:middle;
    display:table-cell;
}
/* Inner (3) - Centering the Popup Box... */
#WebUploadProgressWebpageInnerDialogBox {
    margin: 0px auto;
    width: 600px;
    padding: 20px 20px 40px 20px;
    border: solid 2px #ccc;
    background-color: #F5F5F5;
    height: 320px;
    position: relative;
    -moz-box-shadow: 0 0 16px #ccc;
    overflow-x:auto;
}
.WebUploadProgressBar p {
    display: block;
    width: 350px;
    padding: 2px 5px;
    margin: 12px 0;
    border: 1px inset #446;
    border-radius: 5px;
}

$('#buttonFileBrowserUpload').on('change', function (e) {
    var formFiles = $('#buttonFileBrowserUpload')[0].files;
    var fileCount = 0;

    //Initialize & clear the html dialog data from previous File upload...
    $('#WebUploadProgressWebpageInnerDialogBox').empty();

    var htmlCustomUploadDialog = "";
    if ($('#WebUploadProgressWebpageOuter').length == 0) {
        htmlCustomUploadDialog += "<div id='WebUploadProgressWebpageOuter' style='display:none;'>";  //Hide the pop-up dialog til after the file-picker dialog is closed... /* To place this pop-up div on-top-of any of the AJAX's UpdatePanel html tag & javascript's popup error validation... */
        htmlCustomUploadDialog += " <div id='WebUploadProgressWebpageMiddle'>";
        htmlCustomUploadDialog += "  <div id='WebUploadProgressWebpageInnerDialogBox'></div>";
        htmlCustomUploadDialog += " </div>";
        htmlCustomUploadDialog += "</div>";
        $('body').append(htmlCustomUploadDialog);
    }

    //We'll grab our file upload form element (there's only one, hence [0]).
    $.each(formFiles, function (i, o) {
        //================================================================================
        //Build file-data layout and append to pop-up modal dialog...
        //================================================================================
        var htmlCustomFileDivBox = "<div id='WebUploadProgressFile" + i + "'>";
        htmlCustomFileDivBox += "    <div>Filename: <strong>" + o.name + "</strong><br />type: <strong>" + o.type + "</strong><br />size: <strong>" + o.size + "</strong> bytes</div>";
        htmlCustomFileDivBox += "    <div id='WebUploadProgressBarFile" + i + "' class='WebUploadProgressBar'><p>Upload file 0 %</p></div>";
        htmlCustomFileDivBox += "</div>";
        $('#WebUploadProgressWebpageInnerDialogBox').append(htmlCustomFileDivBox);
        //================================================================================

        //================================================================================
        //File Upload...
        //================================================================================
        var xhr = new XMLHttpRequest();
        var formData = new FormData();

        //Display the pop-up dialog...
        if (fileCount == 0) { $('#WebUploadProgressWebpageOuter').css({ "display": "table" }); }  //"display: table;" is required for the pop-up centering to work...

        formData.append("formVin", "1FAFP53U74A144331");
        formData.append(o.name, o);

        xhr.open("POST", "https://" + window.location.host + "/WebApi/AmazonCloud/VehiclePhotosManager/UploadAsync/102/83", true);
        xhr.upload.addEventListener("progress", function (e) {  //Update Uploading Progress-Bar...
            var percentage = parseInt(100 - (e.loaded / e.total * 100));
            alert(percentage);

            $("#WebUploadProgressBarFile" + i + " p").text("Upload filey " + percentage + " %");
        }, false);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                fileCount++;

                if (xhr.status == 200) {
                    $("#WebUploadProgressBarFile" + i + " p").text("Upload filez 100 %");
                }

                if (fileCount == formFiles.length) {
                    $('#WebUploadProgressWebpageOuter').css({ "display": "none" });  //Close the pop-up dialog...
                }
            }
        };
        xhr.send(formData);
        //================================================================================
    });
});

Upload
<input type="file" id="buttonFileBrowserUpload" name="files[]" multiple />
Oriol
  • 274,082
  • 63
  • 437
  • 513
fletchsod
  • 3,560
  • 7
  • 39
  • 65
  • 1
    Code style aside: Your `CapitalCamelCase` function variables should only start with a capital if they are constructors, which they don't appear to be. You should also use `var` with them, otherwise they become implicit global variables, instead of properly scoped/closured variables. – ajp15243 Sep 09 '14 at 14:08
  • You're saying "foo = function () { }" is global but "var foo = function () {}" is not global but scoped/closured? – fletchsod Sep 09 '14 at 14:56
  • Correct. [Functions are first-class members of JavaScript](https://en.wikipedia.org/wiki/First-class_function). The scoping rules apply to variables referring to functions just the same as variables referring to anything else, like a string or number. – ajp15243 Sep 09 '14 at 15:03
  • I fiddle around with functions for couple of hours and it had no effect. So, I decided to simplify/shorten the script further and found that it doesn't have anything to do with the functions as they're all removed. So, I still don't know what the problem is. Thanks. – fletchsod Sep 09 '14 at 21:08
  • I wasn't pointing out your problem, I was pointing out something aside from that in an attempt to let you know about JavaScript coding best practices. Hence why I started my comment with `Code style aside`. – ajp15243 Sep 09 '14 at 21:10

0 Answers0