Show the progress of the file in Ajax. what's wrong with the code?

Question

The following code works and sends the browsed file but somehow it just doesn't show me the progress while sending the file when it takes time to send a big file... When I browse a big file and hit submit, the form waits for 20 seconds and than gives me the "success part" but I am trying to show the progress of the process so the user won't think that it just doesn't work and leave the page before it sends the form to my email:

    $.ajax({
                            url: "/api/sendFile",
                            type: 'POST',
                            data: { filename: file.filename, data: file.data, "name": name, "email": email, "phone": phone, "fromLanguage": fromLanguage, "toLanguage": toLanguage },

  beforeSend: function(XMLHttpRequest)
                    {
                        XMLHttpRequest.addEventListener("progress", function(evt){
                            if (evt.lengthComputable) {  
                                var percentComplete = evt.loaded / evt.total;
                                $("#serviceForm").hide().html(percentComplete + "%");
                            }
                        }, false); 
                    },
                            success: function (data, status, xhr) {
                                $("#serviceForm").hide().html("<div align='center' style='font-size:200%'>Thank you very much!</div>").fadeIn(3000);
                            }
                        });