github / file-attachment-element

Attach files via drag and drop or file input.

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

file-attachment-element's Issues

GitHub

Handling file input

Attach files via drag and drop or file input.

The element itself doesn't seem to care about file inputs. In dotcom we use a custom behavior that calls fileattachment.attach(files). I think we can add some simple documentation for this, but I wonder what you all think about having the element listening on file input change instead?

It is not too much to add the custom hook, but considering an actual file input would be needed for accessibility, I think it'd be good if it comes by default.

cc @github/web-systems

vic

https://i.imgur.com/gVVg73k.mp4

Issue uploading images to GitHub originating from a Snip & Sketch on a PC

When I use Shift + Win + S to capture parts of my screen or modified from there, GitHub will not allow me to upload.

It's really weird, I'm trying to attach here and I keep getting "Something went really wrong, and can can't process that file. Try Again" error message.

However, when I create screenshots from File Inspector in Chrome I don't have issues, or those originally created in Photoshop.

Not sure if it's because of the metadata or what.

7z not supported

Dear Microsoft,

please remove the whole file extensions whitelist. It is useless and doesn't increase the security.

A lot of important and modern file types are missing (e.g. .7z).

File expiration date

If I drag and drop a file in a comment in an issue, how long will the file exists in github servers? Is there any limit?

How to get this working in React?

Hey,
I followed the installation instructions, and tried the following code:

import '@github/file-attachment-element'

const myApp = () => {
  return (
      <file-attachment directory>
          <input type="file" multiple />
      </file-attachment>
  )
}

export default myApp;

It shows the browser's default file input:

How do I get this to work with React?