Javascript notification when a file is uploaded

Question

The following form works well to upload a file and stays on the same page. So far so good, the file does make it to the server.

= form_tag("imgupload", remote: true, multipart: true, id: 'image_upload_form' ) do
  .field
    = label_tag :image
    = file_field_tag :image
  = submit_tag "Upload Image"

How can I get notified in Javascript when the file/form has finished uploading?

I tried the following but it doesn't fire any of the alerts:

$("#image_upload_form").bind("ajax:complete", function(evt, data, status, xhr) {
  alert('Complete!');
});
$("#image_upload_form").bind("ajax:success", function(evt, data, status, xhr) {
  alert('Success!');
});
$("#image_upload_form").bind("ajax:failure", function(evt, data, status, xhr) {
  alert('Failure!');
});

Answer 1

try

$("#image_upload_form").ajaxComplete(function() {
    alert('Complete!');
});

Answer 2

I couldn't get the JQuery bind to work. I found jQuery Form Plugin which does what I want though.

Answer 3

One solution could be to upload your image with jquery.

Here is a great screencast for that : http://railscasts.com/episodes/381-jquery-file-upload