6

Is there a way to queue file uploads without resorting to Flash or Silverlight, just with cleverly used forms and JavaScript? Note that the upload should be executed asynchronously.

By "queuing" uploads I mean that if the user tries to upload multiple files, they should not be transferred simultaneously, but rather one at a time, in a single HTTP connection.

4
  • Does it have to be one HTTP connection?
    – Pekka
    Feb 27, 2010 at 19:42
  • Yes. That's sort of the point of my question.
    – dpq
    Feb 27, 2010 at 19:44
  • Question: if you submit a form with multiple files, does they get sent all at the same time, or 1 after another? Mar 3, 2010 at 7:28
  • Due to the specifics of my application, it would be impossible to add all the files to upload into same form, since the first file should begin uploading as soon as the user chooses to. I.e. there should be no "Start upload" button, the queue should progress automatically.
    – dpq
    Mar 4, 2010 at 9:58

8 Answers 8

2
+100

I don't believe it's possible to do this on a single HTTP connection, due to limitations of the spec. However, you may get almost the same behaviour by placing the <input> fields in separate forms (be it with HTML or JavaScript) and submitting them in order.

Place their targets on an <iframe> and use the iframe.onload event to trigger the next form in the list.

Additional notes:

  • See this for reference targeting iframes. Note that this feature is unsupported in HTML/XHTML Strict.
  • The form.target attribute must be equal to the iframe.name attribute. iframe.id will not work; It causes a pop-up window in IE6 and FF3.5.
  • A working example of 'all at once' uploading using targeting is available here. I've cleaned up this example a bit and used it. It works in IE6 as well as any first-class browser.
1
  • Let me know if it works for you. I thought about trying something like this myself but haven't had the time. Mar 9, 2010 at 18:12
2

I have it on good authority that Uploadify is very good. Moreover, it supports queues natively. A simple example, which assumes you've already created a form "file" element with an id of "foo" and an element to use as the queue with an id of "queue". See the docs for more info.

$("foo").uploadify({
  'uploader'  : 'uploadify.swf',
  'script'    : 'uploadify.php',
  'cancelImg' : 'cancel.png',
  'auto'      : true,
  'folder'    : '/uploads',
  'queue'     : "queue"
});
4
  • Uploadify requires Flash, while I'm looking for a solution that doesn't.
    – dpq
    Mar 4, 2010 at 9:49
  • Oh, right. I'm sorry, I completely forgot about that requirement. Out of curiosity, why are do you want to avoid flash? Uploadify doesn't require any interaction with the flash, it wraps it for you.
    – Benson
    Mar 5, 2010 at 5:47
  • Due to the specifics of the web app in question, one of its selling points is that it doesn't require plugins to do any real work at all. Since uploading files is a quite a major task in it, I'd rather avoid depending on Flash.
    – dpq
    Mar 9, 2010 at 12:11
  • Interesting. I'm curious to know what your target audience is if you expect a reasonable number of them not to have flash. It'd make sense if it were targeted at iphones or ipads, but I'd be surprised to hear they support file uploads at all. Can you give any more info?
    – Benson
    Mar 10, 2010 at 0:11
1

One option I have seen used before, although I don't have a link or an example, is use an iframe. Basically, the files are submitted to the iframe and JavaScript watches to see when that iframe reloads and then submits the next one. It's not pretty and I think I tried, but couldn't get it to work across browsers (which I needed at the time, including IE6).

2
  • Okay, thanks. I will try to implement it. Do you remember which browsers did you have trouble with?
    – dpq
    Mar 4, 2010 at 10:09
  • I believe the most difficult one was IE6, along with the other IEs, but I think 7&8 was alright. It's been a while and I've deleted all my test code as I was okay with using Flash since it was used else where on the site already. Mar 4, 2010 at 17:15
0

Broadly looking at it, what needs to be done:

  • A function to dynamically add forms(to html) with input type as file. One form will have only one file input field. These forms will be our file upload queue.
  • A submit function that will submit these forms one after another asynchronously.

That's simple logic I can think for now [have to code when I get home].

0

If you're looking for a .Net and more specifically Asp.Net MVC solution, take a look at this post, http://dimebrain.com/2010/01/large-or-asynchronous-file-uploads-in-asp-net-mvc.html. I had it bookmarked for reference.

0

this jquery plug claims it does without using swf http://valums.com/ajax-upload/

0
0

There is a simple efficent way of uploading files asyncronysly with xmlhttprequest: refer to https://developer.mozilla.org/en/using_xmlhttprequest in the "In Firefox 3.5 and later" section. With this you can upload files asyncronysly getting also the progress percent of upload. With firefox 3.6 and later you can also upload asyncronyly multiple files. I am making a js function for doing in a more simple way, when finish i will post it.

0

In the recent past, I wrote a jQuery plug-in that would allow you to do something like this. I can't post the code, but I can describe how it worked. If it doesn't make sense, let me know, as it has been a while.

There were a set of upload form elements. When a file was selected, it would post to a hidden iFrame, the contents (via base64) of which were copied into a hidden form field. Then, when the final form is submitted, the contents of the hidden form fields are used to get the file information.

Erick

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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