WIP!

DroplitJS is a bare bones javascript library that is used to create drag-n-drop file upload modules.

Dropzone is a great library for handling drag-n-drop file uploading. But I found it to be heavy handed and tedious in terms of changing its styling. DroplitJS, being bare bones, ships with no default styles at all. I have left the styling up to the developer using it. If you want a plug-n-play library to handle drag-n-drop file uploading, you should just go with Dropzone, but if you are looking for an option that demands you create your own styling of it, this is for you!

A DroplitJS droparea can be instantiated like this:

var droplit = new Droplit("#my-droplit", { /* options */ });

If you are using jQuery you can instantiate it like this:

$('#my-droplit').droplit({ /* options */ });

• url: (type: String or Function, default: null) The url to which the upload request will be made. Function passes in the Droplit instance as an argument.
• method: (type: String, default: "post") The method to use for the upload request.
• divClassName: (type: String, default: "droplit") The class name to use for the droparea div.
• hoverClassName: (type: String, default: "hover") The class name that the droparea gets when the dragover event fires.
• dropClassName: (type: String, default: "dropped") The class name that the droparea gets when the drop event fires.
• showProgress: (type: String, default: true) Show a progress bar (where supported).
• acceptedTypes: (type: Array, default: [ 'image/png', 'image/jpeg', 'image/gif' ]) File types that are allowed to be uploaded.
• onDropAreaDragOver: (type: Function, default: undefined) Callback function for dragover event.
• onDropAreaDragLeave: (type: Function, default: undefined) Callback function for dragleave event.
• onDropAreaDrop: (type: Function, default: undefined) Callback function for drop event.
• success: (type: Function, default: undefined) Callback function for successfully uploading file. File and response are passed in as arguments.

1. I started writing this knowing nearly nothing about how to implement drag-n-drop file uploading. Consequently, there are some sections of code and concepts in here that I straight up stole from enyo/dropzone and from remy/html5demos
2. This is still very much a work in progress. I haven't fully tested it. If something breaks, don't sue me, just open up an issue!

• input onchange
• limit file number
• limit file types
• write missing tests
• create first official release version
• write css styling documentation
• update options documentation