No description
  • TypeScript 49.2%
  • JavaScript 45.6%
  • Dockerfile 5.2%
Find a file
Repository files (latest commit first)
Filename Latest commit message Latest commit date
Marie Lucca eae49ac8be
Merge pull request #60 from github/dependabot/npm_and_yarn/npm_and_yarn-4e38a52fea
Bump js-yaml from 3.14.2 to 3.15.0 in the npm_and_yarn group across 1 directory
2026-07-16 15:29:52 -04:00
.devcontainer Add a .devcontainer 2022-02-28 17:04:32 +00:00
.github/workflows Update nodejs.yml 2026-05-14 09:30:20 -07:00
examples Add input to the example 2020-02-10 12:52:51 -05:00
src Run lint 2025-08-11 17:35:07 -04:00
test Add tests 2021-09-23 14:19:41 -03:00
.eslintignore Extract file-attachment custom element 2020-01-07 14:43:37 -07:00
.eslintrc.json Enable eslint-plugin-custom-elements 2021-05-17 14:11:19 +01:00
.gitignore Extract file-attachment custom element 2020-01-07 14:43:37 -07:00
CODE_OF_CONDUCT.md Add contributing documentation 2020-01-08 09:20:36 -07:00
CODEOWNERS move AOR to primer 2022-09-23 18:33:40 +01:00
CONTRIBUTING.md Fix license link 2020-01-13 11:33:47 -07:00
karma.config.js Fix Chrome sandbox issues in CI and update workflow 2025-11-25 21:55:17 +00:00
LICENSE Extract file-attachment custom element 2020-01-07 14:43:37 -07:00
package-lock.json Fix CI: restore hoisted eslint-plugin-import by using main lockfile + js-yaml 3.15.0 bump 2026-07-16 16:10:03 +00:00
package.json Revert eslint and eslint-plugin-github to original versions; keep js-yaml 4.2.0 bump 2026-07-16 16:03:02 +00:00
README.md Don't require input attribute on <file-attachment> 2021-05-17 13:53:30 +01:00
rollup.config.js Enable eslint-plugin-custom-elements 2021-05-17 14:11:19 +01:00
SECURITY.md Add contributing documentation 2020-01-08 09:20:36 -07:00
tsconfig.json Add skipLibCheck to tsconfig.json to fix CI TypeScript error 2026-07-15 02:56:49 +00:00

<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>
  <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.

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.