How to do "If div class is 0 then start from 1 to append"

Question

I'm trying to make multiple upload images via ajax with XMLHttpRequest. Everything is okay. Images post successfully and data returns as expected. So returned images are appending to related div class. But every time i upload images one by one, div class start from zero.

With this code,before to send file(s) i'm creating progressbar div, after each image loaded successfully, image replace to loder.

for (var i = 0; i < input.files.length; i++) {
            var fileId = i;
        $('.up_preview').append('<div class="uploaded_photo_grid '+ fileId +'">' + 
            '<div class="pro_bar" id="progressbar_' + fileId + '" style="width:0%"></div>' + loader +
            '</div>');  
    }   

With this function, no matter how many files, im uploading them:

for (var i = 0; i < this.files.length; i++) { //Progress bar and status label's for each file genarate dynamically
            var fileId = i

            $('.up_preview').append('<div class="uploaded_photo_grid '+ fileId +'">' + 
                '<div class="pro_bar" id="progressbar_' + fileId + '" style="width:0%"></div>' + loader +
                '</div>');  

        }   

function uploadSingleFile(file, i) {    

        var fileId = i;
        var ajax = new XMLHttpRequest();
        //Progress Listener
        ajax.upload.onprogress = function (e) {
            var percent = (e.loaded / e.total) * 100;
            $('#progressbar_' + fileId).animate({"width": percent + "%"},800);
        };

        //Load Listener
        ajax.onreadystatechange = function (e) {
            if (this.readyState == 4 && this.status == 200) {
                var data = ajax.responseText;
                var rep = JSON.parse(data);

            $('#progressbar_' + fileId).css("width", "100%");
            setTimeout(function(){
                $('#progressbar_' + fileId).remove();
                $('.uploaded_photo_grid.'+ fileId).html('');
                $.each(file, function(){

                    if(rep.error !== ''){
                        $(".uploaded_photo_grid."+ fileId ).html(rep.name + ' yüklenemedi');
                    } else {
                        $(".uploaded_photo_grid."+ fileId ).html(
                            '<img class="previewItem" src="'+rep.fcontent+'" id="img_'+rep.id+'">');
                    }

                });                 
            },1500);
        }
    };

      Rest of code...
    }

Also i tried editing these lines of code. It increases the value of div for each file but just first image appears.

var zero = $('.uploaded_photo_grid.0').length;
    for (var i = 0; i < this.files.length; i++) { //Progress bar and status label's for each file genarate dynamically
                var fileId;
                if(zero == 0){
                    uploadSingleFile(this.files[i], i);
                    console.log(this.files[i]);
                    fileId = i;
                } else {
                    uploadSingleFile(this.files[i+1], i+1);
                    fileId = i+1;
                    console.log(this.files[i]);
                }

                $('.up_preview').append('<div class="uploaded_photo_grid '+ fileId +'">' + 
                    '<div class="pro_bar" id="progressbar_' + fileId + '" style="width:0%"></div>' + loader +
                    '</div>');  

            }

What should i do? Is there a way to do this better? I mean upload images without form via XML with progressbar for each file. I don't choose to use plugin, that's not for me.

Answer 1

The following is the problematic line.

uploadSingleFile(this.files[i+1], i+1);

You want the value for i passed in uploadSingleFile to be the total number of images uploaded incremented by one.

One approach to do this is to sum $('.up_preview').children().length, i, and 1. 1 is added in the sum because the in the loop i starts at 0.

// var zero = $('.uploaded_photo_grid.0').length;
var numImages = $('.up_preview').children().length;

if (numImages === 0) {
  //...
} else {
  uploadSingleFile(this.files[i+1], numImages + i + 1);
}