Vanilla Inputs.file (#266)

* pass file.size to AbstractFile * 0.11.1 * excise LocalFile implementation * fix file test
observablehq · Aug 27, 2024 · 7ae53c7 · 7ae53c7
1 parent 5193dd2
commit 7ae53c7
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 63 deletions.
diff --git a/README.md b/README.md
@@ -7,10 +7,10 @@ Observable Inputs is a small, free, [open-source](./LICENSE) JavaScript library
 ```html
 <!DOCTYPE html>
 <body>
-<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@observablehq/inputs@0.11/dist/index.css">
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@observablehq/inputs@0.12/dist/index.css">
 <script type="module">
 
-import * as Inputs from "https://cdn.jsdelivr.net/npm/@observablehq/inputs@0.11/+esm";
+import * as Inputs from "https://cdn.jsdelivr.net/npm/@observablehq/inputs@0.12/+esm";
 
 // Create a numeric slider allowing a value between 0 and 100 (inclusive).
 const slider = Inputs.range([0, 100], {label: "x"});
@@ -484,7 +484,7 @@ The available *options* are:
 
 Note that the value of file input cannot be set programmatically; it can only be changed by the user.
 
-(In vanilla JavaScript, the Inputs.file method is not exposed directly. Instead, an Inputs.fileOf method is exposed which takes an AbstractFile implementation and returns the Inputs.file method. This avoids a circular dependency between Observable Inputs and the Observable standard library.)
+(In vanilla JavaScript, the Inputs.file method has an additional *transform* option which allows the native File object to be converted into an Observable FileAttachment.)
 
 ## Utilities
 

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@observablehq/inputs",
   "description": "Lightweight user interface components",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "author": {
     "name": "Observable, Inc.",
     "url": "https://observablehq.com"

diff --git a/src/file.js b/src/file.js
@@ -3,57 +3,38 @@ import {maybeWidth} from "./css.js";
 import {maybeLabel} from "./label.js";
 import {createText} from "./text.js";
 
-export function fileOf(AbstractFile) {
-
-  class LocalFile extends AbstractFile {
-    constructor(file) {
-      super(file.name, file.type, file.lastModified);
-      Object.defineProperty(this, "_", {value: file});
-      Object.defineProperty(this, "_url", {writable: true});
-    }
-    async url() {
-      return this._url || (this._url = URL.createObjectURL(this._));
-    }
-    async blob() {
-      return this._;
-    }
-    async stream() {
-      return this._.stream();
-    }
-  }
-
-  return function file({
-    label,
-    required,
-    accept,
-    capture,
-    multiple,
-    disabled,
-    width,
-    value, // eslint-disable-line no-unused-vars
-    submit, // eslint-disable-line no-unused-vars
-    ...options
-  } = {}) {
-    const input = html`<input
-      type=file
-      name=file
-      disabled=${disabled}
-      required=${required}
-      accept=${accept}
-      capture=${capture}
-      multiple=${multiple}
-    >`;
-    const form = html`<form class=__ns__ style=${maybeWidth(width)}>
-      ${maybeLabel(label, input)}<div class=__ns__-input>
-        ${input}
-      </div>
-    </form>`;
-    return createText(form, input, undefined, options, {
-      get: (input) => multiple ? Array.from(input.files, file => new LocalFile(file))
-        : input.files.length ? new LocalFile(input.files[0])
-        : null,
-      set: () => {}, // ignored
-      same: () => false // ignored
-    });
-  };
+export function file({
+  label,
+  required,
+  accept,
+  capture,
+  multiple,
+  disabled,
+  width,
+  value, // eslint-disable-line no-unused-vars
+  submit, // eslint-disable-line no-unused-vars
+  transform = (file) => file,
+  ...options
+} = {}) {
+  const input = html`<input
+    type=file
+    name=file
+    disabled=${disabled}
+    required=${required}
+    accept=${accept}
+    capture=${capture}
+    multiple=${multiple}
+  >`;
+  const form = html`<form class=__ns__ style=${maybeWidth(width)}>
+    ${maybeLabel(label, input)}<div class=__ns__-input>
+      ${input}
+    </div>
+  </form>`;
+  return createText(form, input, undefined, options, {
+    get: (input) => multiple ? Array.from(input.files, (file) => transform(file))
+      : input.files.length ? transform(input.files[0])
+      : null,
+    set: () => {}, // ignored
+    same: () => false // ignored
+  });
 }
diff --git a/src/index.js b/src/index.js
@@ -3,7 +3,7 @@ export {checkbox, radio, toggle} from "./checkbox.js";
 export {color} from "./color.js";
 export {date, datetime} from "./date.js";
 export {form} from "./form.js";
-export {fileOf} from "./file.js";
+export {file} from "./file.js";
 export {range, number} from "./range.js";
 export {search, searchFilter} from "./search.js";
 export {select} from "./select.js";

diff --git a/test/inputs/files.js b/test/inputs/files.js
@@ -1,15 +1,13 @@
 import * as Inputs from "../../src/index.js";
 
-const Inputs_file = Inputs.fileOf(class AbstractFile {});
-
 export async function file() {
-  return Inputs_file();
+  return Inputs.file();
 }
 
 export async function fileLabel() {
-  return Inputs_file({label: "dollars&pounds"});
+  return Inputs.file({label: "dollars&pounds"});
 }
 
 export async function fileWide() {
-  return Inputs_file({width: "20em"});
+  return Inputs.file({width: "20em"});
 }