Merge pull request #11 from github/dont-required-child-input-to-have-id

Don't required child input to have ID

Author: koddsson

README.md

@@ -15,15 +15,15 @@ import '@github/file-attachment-element'
 ```
 
 ```html
-<file-attachment directory input="upload">
-  <input id="upload" type="file" multiple>
+<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>`. 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.
+- `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
 

src/file-attachment-element.ts

@@ -1,8 +1,7 @@
 import Attachment from './attachment'
 
 export default class FileAttachmentElement extends HTMLElement {
-  constructor() {
-    super()
+  connectedCallback(): void {
     this.addEventListener('dragenter', onDragenter)
     this.addEventListener('dragover', onDragenter)
     this.addEventListener('dragleave', onDragleave)
@@ -11,6 +10,15 @@ export default class FileAttachmentElement extends HTMLElement {
     this.addEventListener('change', onChange)
   }
 
+  disconnectedCallback(): void {
+    this.removeEventListener('dragenter', onDragenter)
+    this.removeEventListener('dragover', onDragenter)
+    this.removeEventListener('dragleave', onDragleave)
+    this.removeEventListener('drop', onDrop)
+    this.removeEventListener('paste', onPaste)
+    this.removeEventListener('change', onChange)
+  }
+
   get directory(): boolean {
     return this.hasAttribute('directory')
   }
@@ -132,8 +140,9 @@ function onChange(event: Event) {
   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
+  if (id && input.id !== id) return
 
   const files = input.files
   if (!files || files.length === 0) return

test/test.js

@@ -61,8 +61,8 @@ describe('file-attachment', function () {
     let fileAttachment, input
     beforeEach(function () {
       document.body.innerHTML = `
-        <file-attachment input="upload">
-          <input type="file" id="upload">
+        <file-attachment>
+          <input type="file">
         </file-attachment>`
 
       fileAttachment = document.querySelector('file-attachment')