Question

https://stackoverflow.com/a/1234337/1690081

shows that array.length = 0;will empty array but in my code it doesn’t

here’s an sample:

window.onload = draw;
window.onload = getFiles;
var namelist = [];
function draw(){
    // assing our canvas to element to a variable
    var canvas = document.getElementById("canvas1");
    // create html5 context object to enable draw methods
    var ctx = canvas.getContext('2d');

    var x = 10; // picture start cordinate
    var y = 10; // -------||---------
    var buffer = 10; // space between pictures
    for (i=0; i<namelist.length; i++){
        console.log(namelist[i])
        var image = document.createElement('img');
        image.src = namelist[i];
        canvas.appendChild(image);
        ctx.drawImage(image,x,y,50,50);
        x+=50+buffer;
    }
}
function getFiles(){
    namelist.length = 0;// empty name list
    var picturesFiles = document.getElementById('pictures')
    picturesFiles.addEventListener('change', function(event){
        var files = picturesFiles.files;

        for (i=0; i< files.length; i++){
            namelist.push(files[i].name);
            console.log(namelist)
        }
        draw();
    }, false);

}

after i call getFiles() second time. It doesn’t remove the previous list, just appends to it. any idea why?

Answer 1

You should empty the array in the event handler, not getFiles which is only called once per pageload. It is actually doing nothing because the array is already empty when the page loads.

picturesFiles.addEventListener('change', function(event){
    namelist.length = 0; //empty it here
    var files = picturesFiles.files;

    for (i=0; i< files.length; i++){
        namelist.push(files[i].name);
        console.log(namelist)
    }
    draw();
}, false);

Another problem is that you cannot just set .src to the name of a file. That would make the request to your server for the file.

To really fix this, just push the file objects to the namelist:

namelist.push(files[i]);

Then as you process them in draw, create localized BLOB urls to show them:

var file = namelist[i];
var url = (window.URL || window.webkitURL).createObjectURL( file );
image.src = url;