@duskmoon-dev/el-file-upload

A file upload component with drag and drop support built with Web Components.

Installation

bun add @duskmoon-dev/el-file-upload

Usage

Auto-Register

import '@duskmoon-dev/el-file-upload/register';

<el-dm-file-upload></el-dm-file-upload>

Manual Registration

import { ElDmFileUpload, register } from '@duskmoon-dev/el-file-upload';

// Register with default tag name
register();

// Or register with custom tag name
customElements.define('my-file-upload', ElDmFileUpload);

Sizes

| Size | Description | |------|-------------| | sm | Small upload area | | md | Medium upload area (default) | | lg | Large upload area |

Attributes

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | accept | string | '' | Accepted file types | | multiple | boolean | false | Allow multiple files | | disabled | boolean | false | Disable the upload | | max-size | number | - | Max file size in bytes | | max-files | number | - | Max number of files | | show-preview | boolean | false | Show file previews | | compact | boolean | false | Compact display mode | | size | string | 'md' | Size variant: sm, md, lg |

CSS Parts

| Part | Description | |------|-------------| | dropzone | The drop zone area | | file-list | The list of selected files |

Events

| Event | Detail | Description | |-------|--------|-------------| | change | { files } | Fired when files are selected | | remove | { file, index } | Fired when a file is removed |

Examples

Basic

<el-dm-file-upload></el-dm-file-upload>

Accept Specific Types

<el-dm-file-upload accept="image/*"></el-dm-file-upload>
<el-dm-file-upload accept=".pdf,.doc,.docx"></el-dm-file-upload>

Multiple Files

<el-dm-file-upload multiple></el-dm-file-upload>

With Preview

<el-dm-file-upload show-preview accept="image/*"></el-dm-file-upload>

Size Limits

<el-dm-file-upload max-size="5242880" max-files="5"></el-dm-file-upload>

Compact Mode

<el-dm-file-upload compact></el-dm-file-upload>

Handling Files

const upload = document.querySelector('el-dm-file-upload');
upload.addEventListener('change', (e) => {
  const files = e.detail.files;
  // Handle the files
});

License

MIT