Skip to content
Attach files via drag and drop or file input.
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
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 Extract file-attachment custom element Jan 7, 2020
.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 0.2.0 Jan 21, 2020
prettier.config.js Extract file-attachment custom element Jan 7, 2020
rollup.config.js Extract file-attachment custom element Jan 7, 2020
tsconfig.json Extract file-attachment custom element Jan 7, 2020

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.