Question

This is my code:

        var rowData = [];

        var showFiles = function () {
            var input = document.getElementById('doc-upload');
            if (input.files.length > 0) {
                for (var i = 0; i < input.files.length; i += 1) {
                    rowData.push([input.files[i].name]);
                };
                console.log(rowData);
            };
        };
        document.getElementById('doc-upload').addEventListener('change', showFiles, this);

‘rowData’ recives a normal value for the first time i upload some thing.
At the second try it starts to duplicate incoming values.

If i uploaded 1 file first try it’s ok.
Second time i wold get 2 same files.
Third 4 files, exetera.

Why this is happening?

UPD:

More explanations:
What happaning is: i upload x.doc my array is [x.doc], now i want to upload y.doc. I choose y.doc and my array turns in to [x.doc, y.doc, y.doc], then i upload z.doc and aaray looks like [x.doc, y.doc, y.doc, z.doc, z.doc, z.doc, z.doc]. And so on. It have to do some thing with length property, i messed it up some how.

UPD2:

Now the full version of the code:

    //file upload
    var rowData = [];
    docAddButton.addListener('click', function () {
        var showFiles = function () {
            var input = document.getElementById('doc-upload');
            if (input.files.length > 0) {
                for (var i = 0; i < input.files.length; i += 1) {
                    if (rowData.indexOf(true, input.files[i].name, Math.round(input.files[i].size * 0.001) + ' кб') === -1) {
                        rowData.push([
                            true,
                            input.files[i].name, 
                            Math.round(input.files[i].size * 0.001) + ' кб'
                        ]);
                    }
                }
                console.log(rowData);
                tableModel.setData(rowData);
            };
        };
        document.getElementById('doc-upload').addEventListener('change', showFiles, this);
    });

Thanx every one who helped!

Solution:
You can see from UPD2 that I have my function inside eventListener ‘click’. What was happening is every time I pressed my input button it was reciving extra ‘change’ listener.

I changed .addListener for input to .addListenerOnce.

Answer 1

Presumably you’re not reloading the page, and you’re not clearing out rowData. You haven’t shown how/where you define rowData, but it would appear that the same instance of it is reused between calls to showFiles. (If you haven’t declared it anywhere, you’re falling prey to The Horror of Implicit Globals.)

---

From your comments below, it sounds like you want to keep the entries in rowData, but you want to only add new entries. If so, you’ll need an explicit check:

var showFiles = function () {
    var input, i, file;

    input = document.getElementById('doc-upload');
    for (i = 0; i < input.files.length; i += 1) {
        file = input.files[i].name;
        if (indexOfFile(rowData, file) === -1) {
            rowData.push([file]);
        }
    };
    console.log(rowData);
};

function indexOfFile(data, file) {
    var index;

    for (index = 0; index < data.length; ++index) {
        // Note that the 0 may need to be changed if the
        // `rowData.push([file])` line above doesn't put
        // the filename at index 0
        if (data[index][0] === file) {
            return index;
        }
    }
    return -1;
}

---

Side note: You’ve said that the reason you’re pushing an array rather than just the filename is that there’s other information you’re also including in that array but you left it out of your question. That’s fine, but it may be delicate, see my note about index 0 above. You might consider using an array of objects instead:

rowData.push({
    file: file,
    other: "info",
    goes: "here"
});

…and then in indexOfFile:

if (data[index].file === file) {

That way, the code is less susceptible to breaking if you change the structure of what you’re pushing.