Обработка стадии закачки

[X0TTA6bI4]

Всем привет. Есть такая функция обработки стадий закачки. Сейчас при выгрузке файла на сервер выводится блок с анимацией, по окончании блок убирается и выводится уведомление об успешной загрузке. Но при множественной загрузке блок убирается после первого загруженного файла и уведомление выводится после каждого загруженного файла. Как можно изменить данную функцию, чтобы блок с анимацией убирался, а уведомление выводилось только после загрузки всех файлов?

function uploadFile(file){
        var url = "/upload";
        var xhr = new XMLHttpRequest();
            xhr.upload.onprogress = function(){
                $('.loader').show();
            }
            xhr.upload.onload = function() {
                $('.loader').hide();
                (function Notification() {
                    var notification = new NotificationFx({
                        message : "<p>Фотографии загружены</p>",
                        layout : "growl",
                        effect : "jelly",
                        type : "success",
                    });
                    notification.show();        
                })();
            }
        var fd = new FormData();
        xhr.open("POST", url, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText); // handle response.
            }
        };
        fd.append('uploaded_file', file);
        xhr.send(fd);
    }