@pixelvault-dev/paste 0.1.0 → 0.1.1

package/README.md

@@ -22,6 +22,23 @@ detach();
 Pasting or dropping an image inserts an `![Uploading…]()` placeholder, uploads
 the file, then replaces the placeholder with `![name](https://img.pixelvault.dev/…)`.
 
+### Click to select
+
+A textarea has no built-in "upload" button, so wire `openFilePicker` to your own:
+
+```ts
+import { openFilePicker } from "@pixelvault-dev/paste";
+
+button.addEventListener("click", () =>
+  openFilePicker(document.querySelector("textarea"), {
+    publishableKey: "pv_pub_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
+  }),
+);
+```
+
+It opens the OS file dialog and runs the same upload-and-insert flow for the
+chosen image(s).
+
 ### Options
 
 | Option | Type | Description |

package/dist/attach.d.ts

@@ -24,6 +24,13 @@ export interface PasteOptions {
      */
     onError?: (error: Error, file: File) => string | void;
 }
+/**
+ * Open the OS file picker and paste-and-host whatever image(s) the user selects
+ * into `target` — the same placeholder → upload → insert flow as paste and drop.
+ * Wire it to a button's click handler (a textarea has no built-in "upload"
+ * affordance, so the trigger is yours to place).
+ */
+export declare function openFilePicker(target: PasteTarget, options: PasteOptions): void;
 /**
  * Attach paste-and-host behavior to a textarea or text input: pasting or
  * dropping an image uploads it to PixelVault and inserts a markdown link at the

package/dist/attach.js

@@ -57,6 +57,38 @@ function handleFiles(target, files, options) {
     for (const file of files)
         void handleFile(target, file, options);
 }
+/**
+ * Open the OS file picker and paste-and-host whatever image(s) the user selects
+ * into `target` — the same placeholder → upload → insert flow as paste and drop.
+ * Wire it to a button's click handler (a textarea has no built-in "upload"
+ * affordance, so the trigger is yours to place).
+ */
+export function openFilePicker(target, options) {
+    if (!options.publishableKey) {
+        throw new Error("openFilePicker: options.publishableKey is required.");
+    }
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "image/*";
+    input.multiple = true;
+    input.style.display = "none";
+    const cleanup = () => input.remove();
+    input.addEventListener("change", () => {
+        const files = input.files
+            ? Array.from(input.files).filter((f) => f.type.startsWith("image/"))
+            : [];
+        if (files.length)
+            handleFiles(target, files, options);
+        cleanup();
+    }, { once: true });
+    // Backstop cleanup if the dialog is cancelled (no change event fires): the
+    // window regains focus when the dialog closes. Delayed so a real selection's
+    // change handler reads input.files first.
+    window.addEventListener("focus", () => window.setTimeout(cleanup, 500), { once: true });
+    // Some browsers only open the dialog for an input that's in the document.
+    document.body.appendChild(input);
+    input.click();
+}
 /**
  * Attach paste-and-host behavior to a textarea or text input: pasting or
  * dropping an image uploads it to PixelVault and inserts a markdown link at the

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { attachPaste } from "./attach.js";
+export { attachPaste, openFilePicker } from "./attach.js";
 export type { PasteOptions, PasteTarget } from "./attach.js";
 export { uploadImage, DEFAULT_ENDPOINT } from "./upload.js";
 export type { UploadResult, UploadOptions } from "./upload.js";

package/dist/index.js

@@ -1,4 +1,4 @@
-export { attachPaste } from "./attach.js";
+export { attachPaste, openFilePicker } from "./attach.js";
 export { uploadImage, DEFAULT_ENDPOINT } from "./upload.js";
 export { PixelVaultPasteError } from "./errors.js";
 export { buildImageMarkdown, buildPlaceholder, insertText, replaceFirst, } from "./text.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixelvault-dev/paste",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "license": "MIT",
   "description": "Paste-and-host: drop, paste, or select an image in any textarea and get a hosted CDN URL back. Backed by PixelVault publishable keys.",