How can I call a JS callback after the file upload is complete?

Question

I am creating an external download for an app with an appengine backend.

What I want to do is a file upload solution, and I do not want to use plupload or these turnkey solutions.

I basically posted the images in an iframe, and then put the cover art while it was loading. Then, upon completion, I made an ajax call to get the image ids to display the following. However, the render is always called before the download is complete, so I do not get any image identifiers from the backend. can anyone help?

here is my download code

perform_input3:(event)=> event.preventDefault() $('#product-input-3').hide() $('#product-input-3').submit() $('#upload-cover').show() item_id = $('#item3_id').val() app.views.imageselect.render(item_id) 

app.views.imageselect.render (item_id) is below:

 render:(data)=> @item_id = data item_id = @item_id $.ajax( url: '/get_image_list/' type: 'GET' dataType: 'json' data: {item_id: item_id} success:(data) => @payload = data $(@el).append imageSelectTemplate(@payload) return @ ) 

I do not want to use the setTimeout function, because it will not be flexible depending on the connection speed. Any help would be appreciated :)

Answer 1

Essentially, your question boils down to the following: you want to wait to make your Ajax call on the server until the data you request is available. Receiving notifications from the server is complicated (depending on how your backend is implemented), so the best solution to your problem is probably to just make an Ajax call periodically (say, once per second) until you get a successful response from the server.

Here is the code that should do this:

 do ajaxCall = => $.ajax url: '/get_image_list/' type: 'GET' dataType: 'json' data: {item_id: item_id} success: (data) => @payload = data $(@el).append imageSelectTemplate(@payload) error: -> setTimeout ajaxCall, 1000 

Answer 2

If you focus only on modern browsers, then XHR2 FormData can include a very simple and elegant approach.

The concept is this:

• add binary data file to FormData object li>
• make a call to $ .ajax () with a FormData object as an AJAX data parameter
• When the download is complete, $ .ajax () success () or complete () callbacks will be called.

This approach works with the latest Firefox, Chrome, Safari - http://caniuse.com/xhr2 .

See this post for more details: Submitting multipart / formdata using jQuery.ajax

Answer 3

What you are missing is a kind of callback from the call to $('#product-input-3').submit() . I think the following will work (have mercy on my bad CoffeeScript):

 perform_input3:(event)=> event.preventDefault() item_id = $('#item3_id').val() $('#product-input-3').hide() $('#upload-cover').show() $('#product-input-3').submit() $('#target-iframe').ready -> app.views.imageselect.render(item_id) 

This is based on the idea that calling 'submit' immediately puts the target iframe in an unspecific state, which seems reasonable, but I would test it. As soon as it completes the download. Another option I've seen is that the page loads the iframe request back into its parent (top) window. In JS, something like:

 parent.imageUploaded() 

Or, if you want to use related events:

 parent.$(parent.document).trigger('upload-complete') 

Where, of course, you set the download completion event to the top-level document object.