Question

I have a form to perform uploads:

<%= form_tag({:controller => "assets", :action => "create", :id => @question.id}, :multipart => true) do %>  
    <%= label_tag("file", "Attachment:") %><%= file_field_tag "uploadfile" %><br />
    <%= label_tag("description", "Description") %><br />
    <%= text_area_tag("description",{}, :size => "70x6") %>
    <%= submit_tag("Upload", :class => "register_submit_buttons") %> 
<% end %>

The form submits perfectly, and the file begins to upload to amazon s3. What i would like to do is to trigger a jquery ui dialog box to open when upload begins(the moment i click submit on the form) and then close it when the upload has been completed. I already know how to open a dialog when triggered by a link like this:

link to my dialog div:

<%= link_to("Open dialog", {}, :class => "open-dialog") %>

the dialog div:

<div class="dialog" title="Title">
    ...contents of div
</div>

and finally in my application.js

$(function() {
    $( '.dialog' ).dialog({
        autoOpen: false,
        width: 530,
        modal: true,
        //closeOnEscape: false,
    });
    $('.open-dialog').click(function(){
        $('.dialog').dialog('open');
        return false;
    });
});

As you can see most of the stuff is pretty standard from jquery ui website. I would also like to add a button to the dialog box to cancel the upload. How can i achieve this?

Thanks in advance for the help

Answer 1

you can use the jQuery submit() listener for the form – this will fire when the form is submitted (and presumably when the upload starts).

eg:

$('form').submit(function(){
    //show box in here
    alert('lorem ipsum dolor sit amet');
});

EDIT:

Not sure about how to cancel the upload though, sorry.
But you might get some enlightenment from here: http://aquantum-demo.appspot.com/file-upload

jQuery submit(); docs: http://api.jquery.com/submit/