Skip to content
Attach files via drag and drop or file input.
TypeScript JavaScript
Branch: master
Clone or download
Latest commit 3127666 Jan 21, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples Extract file-attachment custom element Jan 7, 2020
src Default missing attributes to null Jan 21, 2020
test Add attachment tests Jan 21, 2020
.eslintignore Extract file-attachment custom element Jan 7, 2020
.eslintrc.json
.gitignore Extract file-attachment custom element Jan 7, 2020
.travis.yml Add Travis build configuration Jan 21, 2020
CODE_OF_CONDUCT.md Add contributing documentation Jan 8, 2020
CONTRIBUTING.md
LICENSE Extract file-attachment custom element Jan 7, 2020
README.md Extract file-attachment custom element Jan 7, 2020
SECURITY.md Add contributing documentation Jan 8, 2020
karma.config.js Add attachment tests Jan 21, 2020
package-lock.json 0.2.0 Jan 21, 2020
package.json
prettier.config.js Extract file-attachment custom element Jan 7, 2020
rollup.config.js Extract file-attachment custom element Jan 7, 2020
tsconfig.json

README.md

<file-attachment> element

Attach files via drag and drop or file input.

Installation

$ npm install @github/file-attachment-element

Usage

import '@github/file-attachment-element'
<file-attachment directory>
</file-attachment>

Styling drag state

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

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 require a polyfill.

  • Chrome
  • Firefox
  • Safari
  • Microsoft Edge

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.

You can’t perform that action at this time.