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.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:.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.
Html5 Drag And Drop Image Upload Example
Drag And Drop Html5 File Upload
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.editI know in some browsers you can sometimes (almost always) drop files into the file input itself.
Html Drag And Drop Input
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. In theory, you could add an element overlaying the, and then use it's drop event to capture the files (using the File API) and pass them to input files array.Except that a file input is read-only. This is an old problem.You can however, bypass the form control completely and upload via XHR (not sure about the support for that):.You could also use an element in the surrounding area to cancel the drop event in Chrome, and prevent the default behaviour of loading the file.Dropping multiple files over the input already works in Safari and Firefox.