Attach files via drag and drop or file input.
Перейти к файлу
Jon Rohan 9026508560
Merge pull request #37 from github/dependabot/npm_and_yarn/braces-3.0.3
Bump braces from 3.0.2 to 3.0.3
2024-06-18 16:52:28 -07:00
.devcontainer Add a .devcontainer 2022-02-28 17:04:32 +00:00
.github/workflows Create .github/workflows/publish.yml 2022-03-25 19:21:00 +00:00
examples Add input to the example 2020-02-10 12:52:51 -05:00
src feat: also treat svgs as images 2022-01-12 11:23:07 -05: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
CODEOWNERS move AOR to primer 2022-09-23 18:33:40 +01:00
CODE_OF_CONDUCT.md Add contributing documentation 2020-01-08 09:20:36 -07:00
CONTRIBUTING.md Fix license link 2020-01-13 11:33:47 -07:00
LICENSE Extract file-attachment custom element 2020-01-07 14:43:37 -07:00
README.md Don't require `input` attribute on `<file-attachment>` 2021-05-17 13:53:30 +01:00
SECURITY.md Add contributing documentation 2020-01-08 09:20:36 -07:00
karma.config.js configure karma to use chromium 2022-02-16 21:24:29 +00:00
package-lock.json Bump braces from 3.0.2 to 3.0.3 2024-06-16 10:26:10 +00:00
package.json add chromium 2022-02-16 21:24:15 +00:00
rollup.config.js Enable `eslint-plugin-custom-elements` 2021-05-17 14:11:19 +01:00
tsconfig.json Enable `eslint-plugin-custom-elements` 2021-05-17 14:11:19 +01:00

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