drag drop files into standard html file input

These days we can drag & drop files into a special container and upload them with XHR 2. Many at a time. With live progress bars etc. Very cool stuff. Example here.

But sometimes we don’t want that much coolness. What I’d like is to drag & drop files — many at a time — into a standard HTML file input: <input type=file multiple>.

Is that possible? Is there some way to ‘fill’ the file input with the right filenames (?) from the file drop? (Full filepaths aren’t available for file system security reasons.)

Why? Because I’d like to submit a normal form. For all browsers and all devices. The drag & drop is just progressive enhancement to enhance & simplify UX. The standard form with standard file input (+ multiple attribute) will be there. I’d like to add the HTML5 enhancement.

edit
I know in some browsers you can sometimes (almost always) drop files into the file input itself. I know Chrome usually does this, but sometimes it fails and then loads the file in the current page (a big fail if you’re filling out a form). I want to fool- & browserproof it.

14 Answers
14

Leave a Comment