drag-n-drop
- 15 years ago
This demo shows some of the capabilities available in Firefox 3.6 that enhance the user experience related to file uploading. This is still far away from a complete HTML5 implementation for file upload, but still the potential is there.
Some technical details:
The files are uploaded using XHR.sendAsBinary method (added in Firefox 3). Progress tracking uses the onprogress event handler of the nsIXMLHttpRequestEventTarget object (added in Firefox 3.5). Drag-and-drop file support uses the .files attribute on a dataTransfer object (part of HTML5 spec. added in Firefox 3.6 Alpha 1)
The page uses pure HTML, JavaScript and CSS. There is no Flash, Java, or any other add-on.
Code is based on the work of Mozilla developers: Olli Pettay, Matin Movassate, and Simon Montagu.
Some technical details:
The files are uploaded using XHR.sendAsBinary method (added in Firefox 3). Progress tracking uses the onprogress event handler of the nsIXMLHttpRequestEventTarget object (added in Firefox 3.5). Drag-and-drop file support uses the .files attribute on a dataTransfer object (part of HTML5 spec. added in Firefox 3.6 Alpha 1)
The page uses pure HTML, JavaScript and CSS. There is no Flash, Java, or any other add-on.
Code is based on the work of Mozilla developers: Olli Pettay, Matin Movassate, and Simon Montagu.