# file-attachment-element

**Repository Path**: mirrors_github/file-attachment-element

## Basic Information

- **Project Name**: file-attachment-element
- **Description**: Attach files via drag and drop or file input.
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-08
- **Last Updated**: 2026-02-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# <file-attachment> element

Attach files via drag and drop or file input.

## Installation

```
$ npm install @github/file-attachment-element
```

## Usage

```js
import '@github/file-attachment-element'
```

```html
<file-attachment directory>
  <input type="file" multiple />
</file-attachment>
```

### Optional attributes

- `file-attachment[directory]` enables traversing directories.
- `file-attachment[input]` points to the ID of a file input inside of `<file-attachment>`. If supplied, only files selected from the corresponding `<input>` will be attached to `<file-attachment>`.

### Styling drag state

A boolean `[hover]` attribute is present on `<file-attachment>` while files are dragged over the element.

```css
file-attachment[hover] { border: 2px dashed grey; }
```

### Events

- `file-attachment-accept` – Files were dropped onto the element. Call `event.preventDefault()` to prevent the drop. Bubbles.
- `file-attachment-accepted` – Files were added to the attachment list and can be uploaded by the host app. Bubbles.

## Browser support

Browsers without native [custom element support][support] require a [polyfill][].

- Chrome
- Firefox
- Safari
- Microsoft Edge

[support]: https://caniuse.com/#feat=custom-elementsv1
[polyfill]: https://github.com/webcomponents/custom-elements

## Development

```
npm install
npm test
```

## License

Distributed under the MIT license. See LICENSE for details.