file-attachment-element

KO | EN

gitlite — search

#javascript #python #typescript #golang #android #deep-learning #java #awesome #cli #vue #awesome-list #pytorch #mcp #openai

file-attachment-element

(★ 134)

Attach files via drag and drop or file input.

file-attachment-element Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# &lt;file-attachment&gt; 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.

file-attachment-element

file-attachment-element Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

file-attachment-element

file-attachment-element Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README