3

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)
  • How about popup the upload page in a separate browser window? Unless your whole app is ajax-driven and you can keep the uploading block of code still, then I'm not sure. Hope someone could help :) – Mohammed Joraid Mar 23 '15 at 22:01
  • Haven't tested, but I suspect it is possible to make the upload work while allowing the user to navigate if we capture the request in a service worker. Yes, this question is prior service workers, I notice. There won't be plugins for that, unless they are for a javascript framework that includes a service worker, and no, jQuery does not. So this would have to become a question for StackOverflow (I mean, how to write a service worker for that, not what framework has it... what framework has it would be a question for this side, I wonder if there is any). – Theraot May 3 '18 at 13:28
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";
});
  • How about what he said "and then browse to other parts of the application/site." ? – Mohammed Joraid Mar 23 '15 at 22:00
  • $("#uploadform").ajaxForm(function () { window.location = "/some-other-part"; }); – Farid Nouri Neshat Apr 14 '15 at 6:24
  • You mean he could keep the upload running and navigate to other pages from the same window? – Mohammed Joraid Apr 16 '15 at 23:05
  • No, I'm the code above it will navigate when the upload is finished – Farid Nouri Neshat Apr 17 '15 at 0:01
  • 2
    Well, it depends on the person who asked the question. But I don't think it helped him since he got only two requirements, if you read the second one: "I would like to let users start the upload of a file, and then browse to other parts of the application/site." He meant to Browse during the upload, not after. – Mohammed Joraid Apr 21 '15 at 13:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.