File Upload jQuery in background

Question

My situation:

• I am writing an application that allows users to upload very large files. (In some cases over a very slow network)
• I would like to let users start the upload of a file, and then browse to other parts of the application/site.

What I've tried:

I have tried creating a hidden iframe on the same page in order to create a separate DOM that will be preserved upon redirect. I was initially going to have the visible file input fire an onsubmit that would send the file over to the iframe's DOM, then have it run an upload using jquery file upload.

However, for security reasons, javascript does not allow programmatic setting of a fileupload input. So this approach failed.

What I'm looking for:

I'm looking for some sort of javascript/jQuery plugin or library that will allow me to keep fileuploads running in the background of my application. (Or better yet if you could point me to a way to do it with this plugin).

Criteria:

• File uploads should be:
  • Chunked
  • Resumable
  • Able to run in the background
  • Should be compatible with Ruby on Rails 4 (in case that's an issue)

Answer 1

You can do this with ajaxForm easily:

<form id="uploadform">
    <input type="file" id="fileupload" name="fileupload" />
    <input type="submit" value="Upload!" />
</form>

Then in your javascript just do this:

$("#uploadform").ajaxForm();

If you want to do something when then upload is done, you can just give it a callback(for example in this navigate to another location):

$("#uploadform").ajaxForm(function () {
    window.location = "/some-other-part";
});