Merge pull request #4 from github/input

Add support for file inputs

Author: dgraham

README.md

@@ -15,10 +15,16 @@ import '@github/file-attachment-element'
 ```
 
 ```html
-<file-attachment directory>
+<file-attachment directory input="upload">
+  <input id="upload" 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>`. Files selected from the `<input>` will be attached to `<file-attachment>`. Supplying an input is strongly recommended in order to ensure users can upload files without a mouse or knowing where to paste files.
+
 ### Styling drag state
 
 A boolean `[hover]` attribute is present on `<file-attachment>` while files are dragged over the element.

src/file-attachment-element.ts

@@ -8,6 +8,7 @@ class FileAttachmentElement extends HTMLElement {
     this.addEventListener('dragleave', onDragleave)
     this.addEventListener('drop', onDrop)
     this.addEventListener('paste', onPaste)
+    this.addEventListener('change', onChange)
   }
 
   get directory(): boolean {
@@ -132,3 +133,18 @@ function onPaste(event: ClipboardEvent) {
   container.attach(files)
   event.preventDefault()
 }
+
+function onChange(event: Event) {
+  const container = event.currentTarget
+  if (!(container instanceof FileAttachmentElement)) return
+  const input = event.target
+  if (!(input instanceof HTMLInputElement)) return
+  const id = container.getAttribute('input')
+  if (!id || input.id !== id) return
+
+  const files = input.files
+  if (!files || files.length === 0) return
+
+  container.attach(files)
+  input.value = ''
+}

test/test.js

@@ -58,11 +58,15 @@ describe('file-attachment', function() {
   })
 
   describe('element', function() {
-    let fileAttachment
+    let fileAttachment, input
     beforeEach(function() {
-      document.body.innerHTML = `<file-attachment></file-attachment>`
+      document.body.innerHTML = `
+        <file-attachment input="upload">
+          <input type="file" id="upload">
+        </file-attachment>`
 
       fileAttachment = document.querySelector('file-attachment')
+      input = document.querySelector('input')
     })
 
     afterEach(function() {
@@ -106,6 +110,20 @@ describe('file-attachment', function() {
       const event = await listener
       assert.equal('test.png', event.detail.attachments[0].file.name)
     })
+
+    it('attaches files via input', async function() {
+      const listener = once('file-attachment-accepted')
+
+      const dataTransfer = new DataTransfer()
+      const file = new File(['hubot'], 'test.png', {type: 'image/png'})
+      dataTransfer.items.add(file)
+      input.files = dataTransfer.files
+      input.dispatchEvent(new Event('change', {bubbles: true}))
+
+      const event = await listener
+      assert.equal('test.png', event.detail.attachments[0].file.name)
+      assert.equal(0, input.files.length)
+    })
   })
 })