Basic usage + Add drop zone Cause error on upload Abort upload
Lets you upload a file by clicking on the drop zone and, additionally, by dropping it from your computer for supported modern browsers. Pure native JavaScript, no library is used.
jQuery integration
Complete analog of the basic sample rewritten using jQuery wrapper.
Progress bar
On AJAX uploads browser reports how much data has been already sent. Firefox won't trigger this event on small files.
IFrame (legacy) uploads don't provide this feature but are still supported.
Thumbnails
HTML5-only. When dropped one or more image files generates thumbnails and displays them right on the page, without uploading the data anywhere.
Read text files
HTML5-only. Drop a (better) text file from your computer to load it into the textarea. Drop zone can be made from any element - fieldset, div or, say, a textarea itself.
Drop one or more text files…
Read folders
Supported only in Chrome 21+. W3C has a working draft on File System API that introduces lots of interesting features allowing us to read and write files and directories. This sample will non-recursively list all files and folders, also displaying thumbnails of images it finds.
Drop a directory here…
| Drag events | ||
|---|---|---|
| dragEnter | — | User drags an object into the drop zone (Firefox) or document (Chrome). |
| dragLeave | — | Dragged object has left the drop zone or document. |
| Misc events | ||
| upload | — | Files were dropped or selected using the Browse button. |
| send | — | File info is normalized (cross-browser) and ready to send. |
| iframeDone | — | Server response received after uploading file via iframe. |
| Setup events | ||
| inputSetup | — | A hidden file input is being set up. |
| fileSetup | — | File info is uniformized (Firefox, Chrome only). |
| iframeSetup | — | A file is about to be sent via iframe. |
| XMLHttpRequest events | ||
| xhrSetup | — | An XHR was created to be used to upload a file. |
| xhrSend | — | After xhrSetup, XHR needs to be send(). |
| progress | — | Data upload progress, in Firefox only works on large files. |
| error | — | Request has ended with an error |
| done | — | Data has been successfully uploaded. |