https://github.com/github/file-attachment-element
Attach files via drag and drop or file input.
https://github.com/github/file-attachment-element
custom-elements keep web-components
Last synced: 10 months ago
JSON representation
Attach files via drag and drop or file input.
- Host: GitHub
- URL: https://github.com/github/file-attachment-element
- Owner: github
- License: mit
- Created: 2020-01-07T22:10:59.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2024-12-06T20:36:56.000Z (over 1 year ago)
- Last Synced: 2025-04-09T08:01:40.291Z (11 months ago)
- Topics: custom-elements, keep, web-components
- Language: TypeScript
- Homepage: https://github.github.com/file-attachment-element/examples/
- Size: 296 KB
- Stars: 122
- Watchers: 255
- Forks: 19
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: CODEOWNERS
- Security: SECURITY.md
Awesome Lists containing this project
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
```
### Optional attributes
- `file-attachment[directory]` enables traversing directories.
- `file-attachment[input]` points to the ID of a file input inside of ``. If supplied, only files selected from the corresponding `` will be attached to ``.
### Styling drag state
A boolean `[hover]` attribute is present on `` 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.