all image gets appended to last container div in m

Question

I am working on a multiple file upload system.File upload works fine.Problem arises when i've decided to show a preview div before file reading complete.For this purpose i create a container div inside for loop and tried to insert image in that container.Problem is that file is only gets appended to last container div.

            function handleDragOver(event)
            {
                event.stopPropagation();
                event.preventDefault();
                event.dataTransfer.dropEffect = 'copy';
                document.getElementById('drop_zone').innerHTML="";
            }

            function handleDragLeave()
            {
                document.getElementById('drop_zone').style.background = 'white';
            }

            function handleFileSelect(event)
            {
                event.stopPropagation();
                event.preventDefault();

                var files = event.dataTransfer.files;

                for(var i=0,file;file=files[i];i++){

                    if(i>=files.length){
                        break;
                    }

                    var reader = new FileReader();

                    var container = document.createElement('div');
                    reader.onloadstart = function (){

                        container.setAttribute('style','background:gray;padding:5px;width:100px;height:100px;margin:10px;float:left;border:1px solid gray;');
                        document.getElementById('drop_zone').appendChild(container);
                    };

                    reader.onload = (function(myfile){

                        return function(event){

                            var img = new Image();
                            img.src = event.target.result;
                            img.width = 100;
                            img.height = 100;
                            container.style.background = 'white';
                            container.appendChild(img);


                        }

                    })(file);


                    reader.readAsDataURL(file);



                }


            }
            function handleFileUpload()
            {
                var dropZone = document.getElementById('drop_zone');

                dropZone.addEventListener('dragover', handleDragOver, false);
                dropZone.addEventListener('dragleave', handleDragLeave, false);
                dropZone.addEventListener('drop', handleFileSelect, false);

            }
            
            handleFileUpload();

<div  id="drop_zone" style="width:95%;border:4px dotted gray;float:left;min-height:100px;text-align:center;line-height:100px;color:gray;font-size:25px;">
      Drop files here

</div>

Answer 1

change for loop in handleFileSelect(event)

for(var i=0,file;file=files[i];i++){

                    if(i>=files.length){
                        break;
                    }

                    var reader = new FileReader();


                    reader.onloadstart = function (){
                        /*
                        container.setAttribute('style','background:gray;padding:5px;width:100px;height:100px;margin:10px;float:left;border:1px solid gray;');
                        document.getElementById('drop_zone').appendChild(container);
                        */
                    };

                    reader.onload = (function(myfile){
                        return function(event){
                            var container = document.createElement('div');
                            container.setAttribute('style','background:gray;padding:5px;width:100px;height:100px;margin:10px;float:left;border:1px solid gray;');
                            document.getElementById('drop_zone').appendChild(container);

                            var img = new Image();
                            img.src = event.target.result;
                            img.width = 100;
                            img.height = 100;
                            container.style.background = 'white';
                            container.appendChild(img);
                        }
                    })(file);
                    reader.readAsDataURL(file);
                }

Answer 2

Use a closure within for loop to reference current file

for (var i = 0, file; file = files[i]; i++) {
  (function(file) {
    // do stuff with `file` here
    // `file` is current `File` object
  })(file);
}