@kashira2339/filednd NPM

FileDnD

filednd is lightweight JavaScript ui library for File Drag & Drop.

Installation

npm install --save @kashira2339/filednd

Usage

function & properties

FileDnD constructor function.
- el string|HTMLElement|HTMLInputElement Drop target element. ex) #area input[type="file"]
- configure Configure paramaters.
  - preview string|HTMLElement Into preview images target element.
  - dragoverClass string Class of want append when dragover "el".
  - autoPreview boolean will automatically preview when el get files. default true.
  - autoRefresh boolean will automatically refresh preview element when files uploaded. default true.
  - imageMinWidth string min-width of preview's . default null.
  - imageMinHeight string min-height of preview's . default null.
  - imageMaxWidth string max-width of preview's . default null.
  - imageMaxHeight string max-height of preview's . default null.

custom events

upload Will dispatch after File dropped or file selected.
uploadend Will dispatch after File dropped or file selected.

flow

file drop or change ---> dispatch upload ---> file refresh ---> preview ---> dispatch uploadend

Example

<style>
 div {
   /* some styles */
 }
 div.emphasis {
     background-color: #ddfcba
 }
</style>

<div id="drop-zone">Drag & Drop to this element!</div>

<div id="preview-zone">Will preview image.</div>

// if use javascript module bundler
var FileDnD = require('@kashira2339/filednd');

var instance = new FileDnD('#drop-zone', {

    /**
     * for preview HTMLElement or selector.
     */
    preview: '#preview-zone',
    
    /**
     * for add class when file dragover "dropZone".
     */
    dragoverClass: 'emphasis',

    /**
     * set preview image styles.
     * ex)
     * image {
     *   min-width: 100px;
     *   min-height: 100px;
     *   man-width: 100%;
     *   max-height: 100%;
     * }
     *
     */
    imageMinWidth: '100px',

    imageMinHeight: '100px',

    imageMaxWidth: '100%',

    imageMaxHeight: '100%',

});

/**
 * Listen custom event, define as below.
 */

instance.addEventListener('upload', function(e) {
  console.log(JSON.stringify(e.detail));
});

instance.addEventListener('uploadend', function(e) {
  console.log(JSON.stringify(e.detail));
});

demo