dragbox
v1.1.0
Published
Add a drag and drop field
Downloads
6
Readme
📦 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;
}