@github/file-attachment-element - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

dist/file-attachment-element.js

@@ -10,2 +10,3 @@ import Attachment from './attachment';
         this.addEventListener('paste', onPaste);
+        this.addEventListener('change', onChange);
     }
@@ -108,1 +109,17 @@ get directory() {
 }
+function onChange(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 = '';
+}

dist/index.js

@@ -129,2 +129,3 @@ class Attachment {
         this.addEventListener('paste', onPaste);
+        this.addEventListener('change', onChange);
     }
@@ -226,2 +227,18 @@ get directory() {
 }
+function onChange(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 = '';
+}
 
@@ -228,0 +245,0 @@ if (!window.customElements.get('file-attachment')) {

dist/index.umd.js

@@ -135,2 +135,3 @@ (function (global, factory) {
             this.addEventListener('paste', onPaste);
+            this.addEventListener('change', onChange);
         }
@@ -232,2 +233,18 @@ get directory() {
     }
+    function onChange(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 = '';
+    }
 
@@ -234,0 +251,0 @@ if (!window.customElements.get('file-attachment')) {

package.json

 {
   "name": "@github/file-attachment-element",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Attach files via drag and drop or file input.",
@@ -5,0 +5,0 @@ "main": "dist/index.umd.js",

README.md

@@ -18,6 +18,12 @@ # <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
@@ -24,0 +30,0 @@

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29908

7.46%

Lines of code

780

7%

Number of lines in readme file

63

10.53%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes