Progress Bar not showing properly - Upload files using ajax

Question

for( var i=0; i<=input.length-1; i++ )
{

    // Append all files in the formData.
    formData.append( 'files[]', input[i] );

    // Create progress element.
    var progressElement = jQuery( '<li class="working"><input type="text" value="0" data-width="32" data-height="32"'+
            ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>' );

    // Append the file name and file size.
    var fileName = fileContentArray[i];

    progressElement.find( 'p' ).text( fileName )
    .append( '<i>' + fileSizeArray[i] + '</i>' );

    // Add the HTML to the UL element.
    progressElement.appendTo( jQuery( '#upload ul' ) );

    // Initialize the knob plugin.
    progressElement.find( 'input' ).knob();

    // Ajax function.
    formData.append( 'action', 'auto_post' );
    jQuery.ajax
    ({
        url: ajaxurl,
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        xhr: function()
        {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener( 'progress', function( e )
            {
                if( e.lengthComputable )
                {
                    // Append progress percentage.
                    var progressValue = ( e.loaded / e.total ) * 100;
                    console.log( i + ':' + progressValue );
                    progressElement.find( 'input' ).val( progressValue ).change();

                    // Listen for clicks on the cancel icon.
                    progressElement.find( 'span' ).click( function()
                    {
                        if( progressElement.hasClass( 'working' ) )
                        {
                            xhr.abort();
                        }

                        progressElement.fadeOut( function()
                        {
                            progressElement.remove();
                        });
                    });

                    if( progressValue == 100 )
                    {
                        progressElement.removeClass( 'working' );
                    }
                }
            }, false);
            return xhr;
        }
   });
}

<code>Sample1</code>

Above code is uploading files perfectly. As seeing in the picture, only the last image got progress. When doing a console.log( i + ':' + progressValue ); this also shows that the last image progress is appended only.

More interestingly if i put an alert below:

    xhr: function()
    {
        alert('f');
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener( 'progress', function( e )

then the output i get is something like this:

<code>Sample 2</code>

Then i used the setTimeout function but that didn't helped me either. what causing this behavior? I hope you people will understand my question. Any help would be appreciated.

I think the problem lies where you define your progressElement and append it to
. Try changing the logic to appending the element as html and then finding it with jquery via custom attribute, for instance: var html = "
; $("#upload ul").append(html); and then set the value like so $("#upload ul input[data-id=\"" + i + "\"]").val(progressValue); — Anton Egorov, Jan 21 '15 at 14:33

score 1 · Answer 1 · answered Feb 07 '15 at 23:22

It's because you're doing it in a loop...

the i variable will always be the last one.

You can do your operations inside a closure to prevent this...

for( var i=0; i<=input.length-1; i++ )
{

(function(i) {

// Append all files in the formData.
formData.append( 'files[]', input[i] );

// Create progress element.
var progressElement = jQuery( '<li class="working"><input type="text" value="0" data-width="32" data-height="32"'+
        ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>' );

// Append the file name and file size.
var fileName = fileContentArray[i];

progressElement.find( 'p' ).text( fileName )
.append( '<i>' + fileSizeArray[i] + '</i>' );

// Add the HTML to the UL element.
progressElement.appendTo( jQuery( '#upload ul' ) );

// Initialize the knob plugin.
progressElement.find( 'input' ).knob();

// Ajax function.
formData.append( 'action', 'auto_post' );
jQuery.ajax
({
    url: ajaxurl,
    type: "POST",
    data: formData,
    processData: false,
    contentType: false,
    xhr: function()
    {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener( 'progress', function( e )
        {
            if( e.lengthComputable )
            {
                // Append progress percentage.
                var progressValue = ( e.loaded / e.total ) * 100;
                console.log( i + ':' + progressValue );
                progressElement.find( 'input' ).val( progressValue ).change();

                // Listen for clicks on the cancel icon.
                progressElement.find( 'span' ).click( function()
                {
                    if( progressElement.hasClass( 'working' ) )
                    {
                        xhr.abort();
                    }

                    progressElement.fadeOut( function()
                    {
                        progressElement.remove();
                    });
                });

                if( progressValue == 100 )
                {
                    progressElement.removeClass( 'working' );
                }
            }
        }, false);
        return xhr;
    }
  });

})(i);

}

Progress Bar not showing properly - Upload files using ajax

1 Answers1