i'm steve

Simple JQuery Drag N Drop Upload Plugin (jquery-ddio)

Sun 23 Aug 2012

Lately, I was working on building a file uploading feature for one of my web project, which allows users to upload lots of file repeatedly. The usual multipart form method is okay when you are only dealing with 1 - 2 files; it starts to get clumsy and slow when you are uploading more: click the upload button -> select a file -> click ok -> not until you submit the form, the file would be uploaded. What I wanted was a page where user could drop a number of files at once, and they got automatically uploaded in the background with progress shown.


jquery-ddio is a jquery plugin for Drag-n-Drop Upload. With this simple plugin you can easily create an DOM element which is drag-drop-upload enabled.

Required: jQuery http://jquery.com/

// Required jQuery & jquery-ddio // Normal div element (to be used for drag-n-drop zone)

It was done in a hurry, so there should be bugs, feel free to send in patches.