FileDrop.js REVAMPED Share the love!

Self-contained cross-browser HTML5, legacy, AJAX, drag & drop JavaScript file upload

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.

Drop a file inside…

Or click here to Browse…

jQuery integration

Complete analog of the basic sample rewritten using jQuery wrapper.

Drop a file inside…

Or click here to Browse…

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.

Drop a file inside…

Or click here to Browse…

Thumbnails

HTML5-only. When dropped one or more image files generates thumbnails and displays them right on the page, without uploading the data anywhere.

Drop an image inside…

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.

Last server response to upload