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
orFunction
, default:null
) The url to which the upload request will be made. Function passes in theDroplit
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 thedragover
event fires.dropClassName
: (type:String
, default:"dropped"
) The class name that the droparea gets when thedrop
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 fordragover
event.onDropAreaDragLeave
: (type:Function
, default:undefined
) Callback function fordragleave
event.onDropAreaDrop
: (type:Function
, default:undefined
) Callback function fordrop
event.success
: (type:Function
, default:undefined
) Callback function for successfully uploading file.File
andresponse
are passed in as arguments.
- 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
- 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