mw-file-uploader

Dependency-free library for uploading files.

Installation

With npm:

// last stable
npm install [email protected]

Usage

The FileUploader can be bound to an input field:

<input type="field" id="file-uploader">

Import FileUploader

import FileUploader from 'mw-file-uploader'

<input type="file" id="file-uploader">

<script>
let FileUploader = new FileUploader({
    field: document.getElementById('file-uploader')
})
</script>

Configuration

Available options are:

| Option | Type | Default | Description | | :------------ | :---------- | :-------------------- | :----------- | | field | HTMLElement | null | Input element, requires to have type="file" | | accept | string | '' (empty string) | One or more unique file type specifiers describing file types to allow, divided by comma. Example: '.jpg,.png' | | multiple | boolean | false | Enables adding multiple files. | | allowDrop | boolean | false | Enables dragging and dropping files to the dropzone element. | | dropzone | HTMLElement | null if allowDrop is false. If allowDrop is true and dropzone element has not been defined, FileUploader will create an empty <div> below the input element. | Any HTML element where files can be dragged. Only works if allowDrop is true. | | onAddFile | function | () => {} | Callback function that gets passed an array of the added files | | onRemoveFile | function | () => {} | Callback function that gets passed an array of the removed files | | fieldClass | string | 'file-uploader-input' | Class(es) added to the input field. | | dropzoneClass | string | 'file-uploader-dropzone' | Class(es) added to the dropzone element. |

Properties

In addition to the options property, FileUploader exposes additional properties:

• field
• fileList contains all the added files

Methods

• add(files)
• remove(files)
• open()

License

ISC