1.1.0 • Published 1 year ago
dragbox v1.1.0
📦 DragBox
Easily add a drag and drop field to your app!
Installation
HTML
<div class="dragbox"></div>JavaScript
const DragBox = require('dragbox');
new DragBox('.dragbox');Parameters
| Name | Description | Type | Default |
|---|---|---|---|
element | Element or selector | Element or String | (Required) |
options | Options | Object | {} |
options.accept | List of accepted mime types | String or Array | [] |
options.maxFiles | Maximum number of files to accept. Setting to 1 makes preview different. | Integer | Infinity |
options.textDrag | Text for drag and drop hint | String | 'Drag and drop here' |
options.textOr | Text for "or" | String | 'or' |
options.textSelect | Text for file select button | String | 'Browse files' |
options.iconFile | Icon HTML for file | HTML | '<i class="fa-regular fa-file"></i>' |
options.iconRemove | Icon HTML for remove button | HTML | '<i class="fa-solid fa-xmark"></i>' |
options.onAdd | Callback when files are added | Function | ()=>{} |
options.onRemove | Callback when files are removed | Function | ()=>{} |
Access Input
You can access the input element in two ways:
let dragbox = new DragBox('.dragbox');
dragbox.input; // HTMLInputElementdocument.querySelector('.dragbox > input');Styling
There is a default CSS file. You can import it by using this on your <head> element.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dragbox/index.css">The primary color is the --color variable. You can change it using one of these methods:
<div class="dragbox" style="--color: blueviolet">.dragbox {
--color: blueviolet;
}1.1.0
1 year ago
1.0.4
2 years ago
1.0.4-beta
2 years ago
1.0.2-beta
2 years ago
1.0.1-beta
2 years ago
1.0.0-beta
2 years ago
1.0.0
3 years ago