Question

I’m creating a website and I’d like to allow users to upload multiple files while they navigate the website.

When the upload completes, it would be nice to have a Javascipt event triggered, to allow the user to specify additional info related to the uploaded files (eg. photo location, tags, etc)
anyway, the required features are:

1. multiple files allowed for a single upload operation
2. display an optional progress indicator (at least in the “x of y files uploaded” fashion)
3. doing it without tying the users to a single page

How can I implement these features?
Any suggestion is greatly appreciated!

---

Edit

In the event of using a popup window to handle uploads, how can I:

1. inform the user (on the “master” page) that the upload has completed, or that there have been errors?
2. (more important) pass the $_FILES array to the popup window? I’d like the user to be able to click “upload” on the main window, or anyway to make the upload start from the main window (eg dragging and dropping files on the main window).

Answer 1

Since navigating the site will switch pages and it’s unlikely that there’s a full ajax navigation on your site, maybe it could help to somehow upload the files in a second popup window. Not sure how (if) it could be implemented, though, but since you need to upload multiple files at a time I’m afraid you’re bound to use flash.

EDIT

So the solution could look like this:

When a user clicks a “select files” button you pop out a new window where he’ll be able to actually select files (via flash if multifile upload is necessary). And to notify of upload progress use postMessage. Though postMessage isn’t going to work in IE in this case, but probably you could somehow send the message to the server and from the server back to the page.

Another crazy idea is not to use a popup window, but let the user select the files on the page she was first, but once the user selects the files make all the links on the page target=_blank to make any subsequent navigation happen in another tab. I know it’s hacky and not exactly user-friendly, but probably could help.

In any case I would inform the user beforehand that a new window will appear in both scenarios.

EDIT2

And an even crazier idea. When the user selects the files and clicks a link create an iframe which will cover the whole page and hide the original page beneath it and make the links open in the iframe. But it looks even more hackish and it seems you’ll have much trouble with it.