drop.md

Drop Plugin

• Usage
• Options
• Events
• Handlers

The drop plugin allows to drag and drop files to upload.

Usage

HTML:

<div class="drop-window">
    <div class="drop-window-content">
        <h3>Drop files to upload</h3>
    </div>
</div>

JavaScript:

<script src="assets/js/filepicker-drop.js"></script>

$('#filepicker').filePicker({
    // options...
    plugins: ['drop'], // <= 
});

Options

dropZone

• Type: jQuery Object
• Default: $(document)

dropWindow

• Type: jQuery Object
• Default: element.find('.drop-window')

Events

If e.preventDefault() is called the default action of the event will not be triggered.

drop

Event fired on file drop.

.on('drop.filepicker', function (e, data) {
    console.log(data.files);
});

dragover

Event fired on file dragover.

.on('dragover.filepicker', function (e) {
    //
});

dragleave

Event fired on file dragleave.

.on('dragleave.filepicker', function (e) {
    //
});

Handlers

The default event handlers have the same name as the events.

/**
 * @param {Object} e
 * @param {Object} data
 */
drop: function (e, data) { }

/**
 * @param {Object} e
 */
dragover: function (e) { }

/**
 * @param {Object} e
 */
dragleave: function (e) { }