I'm trying to create simple image uploader for my website, but I have one problem. When I want to add my new image to previous selected image can't hold old selected images (because new FileList object created) and then send them all to my controller and my problem back to ,adding old 'files object' to new 'FileList Objects'. html:

<div id="filediv">
    <input type="file" id="file" name="files[]" multiple="multiple" />
</div>

script:

window.filesToUpload = [];
window.tmp = [];
$("#file").on('change', function () {
    "use strict";

    if (window.filesToUpload.length > 0) {
        $.each(window.tmp, function (i, img) {

i want to add old file object to new FileList Object HERE

        });
    }

    if (this.files.length >= 1) {
        $("[id^=previewImg]").remove();
        $.each(this.files, function (i, img) {
            window.tmp.push(img);

            var reader = new FileReader(),
                newElement = $("<div id='previewImg" + i + "' class='abcd'><img /></div>"),
                preview = newElement.find("img");

            reader.onloadend = function () {
                preview.attr("src", reader.result);
                preview.attr("alt", img.name);
            };

            try {
                window.filesToUpload.push(document.getElementById("file").files[i]);
            } catch (e) {
                console.log(e.message);
            }

            if (img) {
                reader.readAsDataURL(img);
            } else {
                preview.src = "";
            }


            newElement.appendTo("#filediv");
        });
    }
});