bard-attachment_field 0.6.3 → 0.6.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: edba1eefd3a08f4e68003f8fdb54f1c56d182c7fa7861a3a776a0bc03b144720
-  data.tar.gz: fe58cfe7d8528cb324bcce8b2b5dc5c786a9ab25e8f05cf24673a6f87e6b8542
+  metadata.gz: f2ae64b317884629f1640e9e60042f4fd6483a5f76aa27a541e8cb090a9ab513
+  data.tar.gz: 18b7d64724a970afb9a8bc9c9dfe63fa07531033929b8ce25f8b8072d3243949
 SHA512:
-  metadata.gz: d3d9fc5faa9d0d7b195e7c15dce24fc9484644da25df67adb254362927d397ddd409de1a0a8e023f9e91c060633219a9bd3456a20c146973947ebcd38d8deba7
-  data.tar.gz: 134d8975835697d189f17da80a3aaa1832b115b0b7d632245acd5d29f9ae24a05de4cef61110097dae50bbbbee25465ef6aebc89de74b7dbbb784121792a62f3
+  metadata.gz: e5dba5578a41090328f203826e7032b41557ee5e7d552809c7958d15af8ddecf7c7a7dd3467319ed8aca8ffb31a5487ed76472201d12053832c69fe55165f4f4
+  data.tar.gz: f061a728c792c4f1d42882fdf791617e3fe020461642f8560fe83908a407d565de2e33ba73e8e35488bc9bddb5b22a65d1aaf38ac0f0f72e308aa4e5f2e63e7c

data/Appraisals

@@ -14,4 +14,5 @@ end
 
 appraise "rails-8.1" do
   gem "rails", "~> 8.1.0"
+  gem "json", "< 3" # ActiveSupport 8.1.3.1 passes JSON.parse options positionally; fixed in 8-1-stable
 end

data/app/assets/javascripts/input-attachment.js

@@ -4252,10 +4252,10 @@ var l = class _l {
     return false;
   }
 };
-function d(t2, e3) {
+function u(t2, e3) {
   return "string" == typeof t2 && (e3 = t2, t2 = document), t2.querySelector(e3);
 }
-function u(t2, e3, i2 = {}) {
+function d(t2, e3, i2 = {}) {
   const { disabled: s } = t2, { bubbles: r4, cancelable: n3, detail: o3 } = i2, a3 = document.createEvent("Event");
   a3.initEvent(e3, r4 || true, n3 || true), a3.detail = o3 || {};
   try {
@@ -4274,7 +4274,7 @@ var f = class {
       this.xhr.setRequestHeader(t3, s[t3]);
     }));
     const r4 = (function() {
-      const t3 = d(document.head, 'meta[name="csrf-token"]');
+      const t3 = u(document.head, 'meta[name="csrf-token"]');
       if (t3) return t3.getAttribute("content");
     })();
     null != r4 && this.xhr.setRequestHeader("X-CSRF-Token", r4), this.xhr.addEventListener("load", ((t3) => this.requestDidLoad(t3))), this.xhr.addEventListener("error", ((t3) => this.requestDidError(t3)));
@@ -4365,7 +4365,7 @@ var v = class {
     return this.input.getAttribute("data-direct-upload-url");
   }
   dispatch(t2, e3 = {}) {
-    return e3.file = this.file, e3.id = this.directUpload.id, u(this.input, `direct-upload:${t2}`, { detail: e3 });
+    return e3.file = this.file, e3.id = this.directUpload.id, d(this.input, `direct-upload:${t2}`, { detail: e3 });
   }
   dispatchError(t2) {
     this.dispatch("error", { error: t2 }).defaultPrevented || alert(t2);
@@ -4417,7 +4417,7 @@ var y = class {
     })), t2;
   }
   dispatch(t2, e3 = {}) {
-    return u(this.form, `direct-uploads:${t2}`, { detail: e3 });
+    return d(this.form, `direct-uploads:${t2}`, { detail: e3 });
   }
 };
 var x = "data-direct-uploads-processing";
@@ -4439,7 +4439,7 @@ function $(t2) {
   const i2 = new y(e3), { inputs: s } = i2;
   s.length && (t2.preventDefault(), e3.setAttribute(x, ""), s.forEach(E), i2.start(((t3) => {
     e3.removeAttribute(x), t3 ? s.forEach(U) : (function(t4) {
-      let e4 = k.get(t4) || d(t4, "input[type=submit], button[type=submit]");
+      let e4 = k.get(t4) || u(t4, "input[type=submit], button[type=submit]");
       if (e4) {
         const { disabled: t5 } = e4;
         e4.disabled = false, e4.focus(), e4.click(), e4.disabled = t5;
@@ -4532,6 +4532,16 @@ var q = class {
     return parseFloat((t2 / Math.pow(1024, s)).toFixed(i2)) + ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"][s];
   }
 };
+var F = class {
+  uploadedFile;
+  constructor(t2) {
+    this.uploadedFile = t2;
+  }
+  get errors() {
+    return this.#t || (this.#t = [], 0 === this.uploadedFile.size && this.#t.push("Must be larger than 0 bytes.")), this.#t;
+  }
+  #t;
+};
 var B = class {
   uploadedFile;
   constructor(t2) {
@@ -4548,11 +4558,11 @@ var B = class {
     return t2.length >= 3 ? (t2.slice(0, -1) + [`or ${t2.at(-1)}`]).join(", ") : t2.join(" or ");
   }
 };
-var F = { image: ["ase", "art", "bmp", "blp", "cd5", "cit", "cpt", "cr2", "cut", "dds", "dib", "djvu", "egt", "exif", "gif", "gpl", "grf", "icns", "ico", "iff", "jng", "jpeg", "jpg", "jfif", "jp2", "jps", "lbm", "max", "miff", "mng", "msp", "nef", "nitf", "ota", "pbm", "pc1", "pc2", "pc3", "pcf", "pcx", "pdn", "pgm", "PI1", "PI2", "PI3", "pict", "pct", "pnm", "pns", "ppm", "psb", "psd", "pdd", "psp", "px", "pxm", "pxr", "qfx", "raw", "rle", "sct", "sgi", "rgb", "int", "bw", "tga", "tiff", "tif", "vtf", "xbm", "xcf", "xpm", "3dv", "amf", "ai", "awg", "cgm", "cdr", "cmx", "dxf", "e2d", "egt", "eps", "fs", "gbr", "odg", "svg", "stl", "vrml", "x3d", "sxd", "v2d", "vnd", "wmf", "emf", "art", "xar", "png", "webp", "jxr", "hdp", "wdp", "cur", "ecw", "iff", "lbm", "liff", "nrrd", "pam", "pcx", "pgf", "sgi", "rgb", "rgba", "bw", "int", "inta", "sid", "ras", "sun", "tga", "heic", "heif"], video: ["3g2", "3gp", "3gpp", "aaf", "asf", "avchd", "avi", "drc", "flv", "m2v", "m3u8", "m4p", "m4v", "mkv", "mng", "mov", "mp2", "mp4", "mpe", "mpeg", "mpg", "mpv", "mxf", "nsv", "ogg", "ogv", "qt", "rm", "rmvb", "roq", "svi", "vob", "webm", "wmv", "yuv"], pdf: ["pdf"], getFileType: function(t2) {
+var S = { image: ["ase", "art", "bmp", "blp", "cd5", "cit", "cpt", "cr2", "cut", "dds", "dib", "djvu", "egt", "exif", "gif", "gpl", "grf", "icns", "ico", "iff", "jng", "jpeg", "jpg", "jfif", "jp2", "jps", "lbm", "max", "miff", "mng", "msp", "nef", "nitf", "ota", "pbm", "pc1", "pc2", "pc3", "pcf", "pcx", "pdn", "pgm", "PI1", "PI2", "PI3", "pict", "pct", "pnm", "pns", "ppm", "psb", "psd", "pdd", "psp", "px", "pxm", "pxr", "qfx", "raw", "rle", "sct", "sgi", "rgb", "int", "bw", "tga", "tiff", "tif", "vtf", "xbm", "xcf", "xpm", "3dv", "amf", "ai", "awg", "cgm", "cdr", "cmx", "dxf", "e2d", "egt", "eps", "fs", "gbr", "odg", "svg", "stl", "vrml", "x3d", "sxd", "v2d", "vnd", "wmf", "emf", "art", "xar", "png", "webp", "jxr", "hdp", "wdp", "cur", "ecw", "iff", "lbm", "liff", "nrrd", "pam", "pcx", "pgf", "sgi", "rgb", "rgba", "bw", "int", "inta", "sid", "ras", "sun", "tga", "heic", "heif"], video: ["3g2", "3gp", "3gpp", "aaf", "asf", "avchd", "avi", "drc", "flv", "m2v", "m3u8", "m4p", "m4v", "mkv", "mng", "mov", "mp2", "mp4", "mpe", "mpeg", "mpg", "mpv", "mxf", "nsv", "ogg", "ogv", "qt", "rm", "rmvb", "roq", "svi", "vob", "webm", "wmv", "yuv"], pdf: ["pdf"], getFileType: function(t2) {
   const e3 = t2.toString().split(".").at(-1).toLowerCase().trim();
   return this.video.includes(e3) ? "video" : this.image.includes(e3) ? "image" : this.pdf.includes(e3) ? "pdf" : "unknown";
 } };
-var S = class {
+var T = class {
   constructor(t2) {
     this.response = t2;
   }
@@ -4597,7 +4607,7 @@ var S = class {
     window.Turbo ? await window.Turbo.renderStreamMessage(await this.text) : console.warn("You must set `window.Turbo = Turbo` to automatically process Turbo Stream events with request.js");
   }
 };
-var T = class {
+var W = class {
   static register(t2) {
     this.interceptor = t2;
   }
@@ -4608,22 +4618,22 @@ var T = class {
     this.interceptor = void 0;
   }
 };
-function W(t2) {
+function X(t2) {
   const e3 = document.head.querySelector(`meta[name="${t2}"]`);
   return e3 && e3.content;
 }
-var X = class {
+var H2 = class {
   constructor(t2, e3, i2 = {}) {
     this.method = t2, this.options = i2, this.originalUrl = e3.toString();
   }
   async perform() {
     try {
-      const t3 = T.get();
+      const t3 = W.get();
       t3 && await t3(this);
     } catch (t3) {
       console.error(t3);
     }
-    const t2 = new S(await window.fetch(this.url, this.fetchOptions));
+    const t2 = new T(await window.fetch(this.url, this.fetchOptions));
     return t2.unauthenticated && t2.authenticationURL ? Promise.reject(window.location.href = t2.authenticationURL) : (t2.ok && t2.isTurboStream && await t2.renderTurboStream(), t2);
   }
   addHeader(t2, e3) {
@@ -4650,7 +4660,7 @@ var X = class {
         const t3 = s.split("=").slice(1).join("=");
         if (t3) return decodeURIComponent(t3);
       }
-    })(W("csrf-param")) || W("csrf-token");
+    })(X("csrf-param")) || X("csrf-token");
   }
   get contentType() {
     return this.options.contentType ? this.options.contentType : null == this.body || this.body instanceof window.FormData ? void 0 : this.body instanceof window.File ? this.body.type : "application/json";
@@ -4700,7 +4710,7 @@ var X = class {
     return "application/json" !== this.headers["Content-Type"] || t2 ? this.body : JSON.stringify(this.body);
   }
 };
-var H2 = proxyCustomElement(class extends H {
+var z = proxyCustomElement(class extends H {
   constructor(t2) {
     super(), false !== t2 && this.__registerHost(), this.__attachShadow(), this.removeEvent = createEvent(this, "attachment-file:remove", 7), this.validationEvent = createEvent(this, "attachment-file:validation", 7), this.readyEvent = createEvent(this, "attachment-file:ready", 7);
   }
@@ -4745,12 +4755,12 @@ var H2 = proxyCustomElement(class extends H {
     this.src = URL.createObjectURL(t2), this.filename = t2.name, this.size = t2.size, this.state = "pending", this.percent = 0, this._file = t2;
   }
   set signedId(t2) {
-    this.value !== t2 && ((t3, e3 = {}, i2 = {}) => ((t4, e4, i3, s) => new X("get", e4, { headers: { Accept: "application/json", ...s }, query: i3 }).perform().then(((t5) => t5.response.ok ? t5.json : t5)))(0, t3, e3, i2))(`/rails/active_storage/blobs/info/${t2}`).then(((e3) => {
+    this.value !== t2 && ((t3, e3 = {}, i2 = {}) => ((t4, e4, i3, s) => new H2("get", e4, { headers: { Accept: "application/json", ...s }, query: i3 }).perform().then(((t5) => t5.response.ok ? t5.json : t5)))(0, t3, e3, i2))(`/rails/active_storage/blobs/info/${t2}`).then(((e3) => {
       this.src = `/rails/active_storage/blobs/redirect/${t2}/${e3.filename}`, this.filename = e3.filename, this.size = e3.byte_size, this.state = "complete", this.percent = 100, this.value = t2, this.readyEvent.emit(this);
     }));
   }
   setMissingFiletype(t2, e3) {
-    !this.filetype && this.filename && (this.filetype = F.getFileType(this.filename));
+    !this.filetype && this.filename && (this.filetype = S.getFileType(this.filename));
   }
   start(t2) {
     this.state = "pending", this.percent = 0;
@@ -4768,14 +4778,14 @@ var H2 = proxyCustomElement(class extends H {
     "error" !== this.state && (this.state = "complete", this.percent = 100);
   }
   render() {
-    return h(Host, { key: "8468877f30120b32201867ab5466d4d0fed5e514" }, h("slot", { key: "f44af091a15ff9ae425a61b708c5ea64a19a5057" }), h("figure", { key: "c629a6dece58606c37979d8d21cfe37d2312511e" }, h("div", { key: "87b9629c3133c7050cf84ec6a8824a68dadb81d0", class: "progress-details" }, h("progress-bar", { key: "63238eeda3adb36ce17a355d4cb2db0dbf45f0df", percent: this.percent, class: this.state, error: "error" === this.state }, h("a", { key: "dacdd7679ee07177fc5a18dcca018dcb6b32406e", class: "download-link", href: this.href || this.src, download: this.download || this.filename, onClick: (t2) => t2.stopPropagation() }, this.filename)), h("span", { key: "5618922137596fc76b569ac876064a0444d8d73a", class: "progress-icon" }), h("a", { key: "6ac34bc373c61db029a1e0101ea2219846e960fd", class: "remove-media", onClick: this.removeClicked, href: "#" }, h("span", { key: "ef9f0d6e8ba6fab4d876cd788e75a34ada1fe572" }, "Remove media")), this.uploadError && this._file ? h("a", { class: "retry-media", onClick: this.retryClicked, href: "#" }, h("span", null, "Retry upload")) : ""), this.validationError || this.uploadError ? h("p", { class: "validation-error" }, this.validationError || this.uploadError) : "", this.preview ? h("attachment-preview", { src: this.src, filetype: this.filetype }) : ""));
+    return h(Host, { key: "58b4ee95bbb2847b70e0eb7273a5da05c9f65243" }, h("slot", { key: "1a50d5449d200b72f25b2824c2f0130cf09b5c9d" }), h("figure", { key: "a2ebf2d116499c28a4f83a2168df42e6fd0a450b" }, h("div", { key: "0d8ac23f1961b46affef09a23265da0c5e57fb33", class: "progress-details" }, h("progress-bar", { key: "2d6af9889678f6ae07f6deed914cddc4107a0a2d", percent: this.percent, class: this.state, error: "error" === this.state }, h("a", { key: "ebfcdd0382a04d1921447b2d659a88eb7522c1ce", class: "download-link", href: this.href || this.src, download: this.download || this.filename, onClick: (t2) => t2.stopPropagation() }, this.filename)), h("span", { key: "42dfc08c869e2cbb475d05e2f316c79733743e05", class: "progress-icon" }), h("a", { key: "f2286259bb36fb3d32036459e7383fe1e29be962", class: "remove-media", onClick: this.removeClicked, href: "#" }, h("span", { key: "2a36a5856faae7292ed2ac0572e180f3892af728" }, "Remove media")), this.uploadError && this._file ? h("a", { class: "retry-media", onClick: this.retryClicked, href: "#" }, h("span", null, "Retry upload")) : ""), this.validationError || this.uploadError ? h("p", { class: "validation-error" }, this.validationError || this.uploadError) : "", this.preview ? h("attachment-preview", { src: this.src, filetype: this.filetype }) : ""));
   }
   componentDidLoad() {
     "pending" == this.state && this._file && (this.checkValidity() ? (this.controller = new C(this.el, this._file), this.controller.dispatch("initialize", { controller: this.controller })) : this.state = "error");
   }
   checkValidity() {
     let t2 = [];
-    return t2.push(...new B(this).errors), t2.push(...new q(this).errors), this.validationError = t2.join(" "), this.validationEvent.emit({ valid: 0 === t2.length, error: this.validationError }), 0 === t2.length;
+    return t2.push(...new B(this).errors), t2.push(...new q(this).errors), t2.push(...new F(this).errors), this.validationError = t2.join(" "), this.validationEvent.emit({ valid: 0 === t2.length, error: this.validationError }), 0 === t2.length;
   }
   static get watchers() {
     return { filename: [{ setMissingFiletype: 0 }] };
@@ -4786,7 +4796,7 @@ var H2 = proxyCustomElement(class extends H {
 }, [769, "attachment-file", { name: [1537], accepts: [1537], max: [1538], url: [1537], value: [1537], filename: [1537], src: [1537], href: [1537], download: [1537], filetype: [1537], size: [1538], state: [1537], percent: [1538], preview: [1540], validationMessage: [1, "validation-message"] }, [[0, "direct-upload:initialize", "start"], [0, "direct-upload:start", "start"], [0, "direct-upload:progress", "progress"], [0, "direct-upload:error", "error"], [0, "direct-upload:end", "end"]], { filename: [{ setMissingFiletype: 0 }] }]);
 
 // dist/components/attachment-file.js
-var o = H2;
+var o = z;
 
 // dist/components/attachment-preview.js
 var e = a;
@@ -5179,7 +5189,7 @@ var c3 = proxyCustomElement(class extends H {
   updateFormValue() {
     if (!this.name || !this.internals?.setFormValue) return;
     const t2 = new FormData(), e3 = this.files.map(((t3) => t3.value)).filter(((t3) => t3 && "string" != typeof t3 ? (console.error("[input-attachment] Non-string value detected on attachment-file:", typeof t3, t3, Error().stack), false) : "string" == typeof t3 && t3.length > 0));
-    if (this.multiple ? (e3.forEach(((e4) => t2.append(this.name, e4))), 0 === e3.length && t2.append(this.name, "")) : t2.set(this.name, e3[0] || ""), this.internals.setFormValue(t2), this.required && 0 === this.files.length) this.internals.setValidity({ valueMissing: true }, "Please select a file.", this.fileInput);
+    if (this.multiple ? (e3.forEach(((e4) => t2.append(this.name, e4))), 0 === e3.length && t2.append(this.name, "")) : t2.set(this.name, e3[0] || ""), this.internals.setFormValue(t2, this.value), this.required && 0 === this.files.length) this.internals.setValidity({ valueMissing: true }, "Please select a file.", this.fileInput);
     else {
       const t3 = this.files.map(((t4) => t4.validationError)).filter(((t4) => t4 && t4.length > 0));
       t3.length > 0 ? this.internals.setValidity({ customError: true }, t3[0], this.fileInput) : this.internals.setValidity({});
@@ -5188,6 +5198,17 @@ var c3 = proxyCustomElement(class extends H {
   reset() {
     this.files = [];
   }
+  formStateRestoreCallback(t2) {
+    this.restorable(t2) ? this.value = t2 : this.updateFormValue();
+  }
+  restorable(t2) {
+    if ("string" != typeof t2) return false;
+    try {
+      return Array.isArray(JSON.parse(t2));
+    } catch {
+      return false;
+    }
+  }
   handleFileInputChange = () => {
     this.fileInput?.files?.length && (this.addFiles(this.fileInput.files), this.fileInput.value = null);
   };
@@ -5215,7 +5236,7 @@ var c3 = proxyCustomElement(class extends H {
     return this.disabled || !!this.el.closest("fieldset[disabled]");
   }
   render() {
-    return h(Host, { key: "09588ce0af3411cc579d7d828c604fcc1fd44825" }, h("input", { key: "1311e26122c5778efc9eb1176c4a4986f1865d7d", ref: (t2) => this.fileInput = t2, type: "file", "aria-label": "Choose " + (this.multiple ? "files" : "file"), multiple: this.multiple, accept: this.accepts, required: this.required && 0 === this.files.length, disabled: this.isDisabled, onChange: () => this.handleFileInputChange() }), h("file-drop", { key: "7adac8601feb97f1123482bde83cf0bb7bd931b7", onClick: () => this.fileInput?.click(), onDrop: this.handleDrop }, h("p", { key: "38faec2ec357d905719948b3f0f46b23abde4c40", part: "title" }, h("strong", { key: "61bd69a635852191f31e4e986f13bbf63e57dfa3" }, "Choose ", this.multiple ? "files" : "file", " "), h("span", { key: "6ac8e031e03ed7d23c83edbacde03c441c4b4df7" }, "or drag ", this.multiple ? "them" : "it", " here.")), h("div", { key: "476bdeafcf7e6211a3feccdc0c275efaf1bff928", class: "media-preview " + (this.multiple ? "-stacked" : "") }, h("slot", { key: "f843426c3a3cef23ccf8d3f1f584075762ecc8b2" }))));
+    return h(Host, { key: "9b1ce57edcd31be2885c5923e65c8f4d0ac31002" }, h("input", { key: "a498cdd103d4b3385bfbfb4c2158ae2c15ed3b55", ref: (t2) => this.fileInput = t2, type: "file", "aria-label": "Choose " + (this.multiple ? "files" : "file"), multiple: this.multiple, accept: this.accepts, required: this.required && 0 === this.files.length, disabled: this.isDisabled, onChange: () => this.handleFileInputChange() }), h("file-drop", { key: "9edc0c1e22d0a6385515f6dff44965c9f3e7a40c", onClick: () => this.fileInput?.click(), onDrop: this.handleDrop }, h("p", { key: "ae06d2f6be38f25eb977e66b1c6c565ca0e3c97d", part: "title" }, h("strong", { key: "c53fc410ec761ca7f044c25cceb1be12c6e37b5c" }, "Choose ", this.multiple ? "files" : "file", " "), h("span", { key: "227a48d7ed21443ec97f646b58611cbf611145bc" }, "or drag ", this.multiple ? "them" : "it", " here.")), h("div", { key: "25fce75fb15b66bd13bea450054d22ddabd05824", class: "media-preview " + (this.multiple ? "-stacked" : "") }, h("slot", { key: "86f6db9bef3f2d6c16a72679ec33b751aef4eec5" }))));
   }
   componentDidRender() {
     if (0 === this.files.length) {

data/gemfiles/rails_8.1.gemfile

@@ -3,5 +3,6 @@
 source "https://rubygems.org"
 
 gem "rails", "~> 8.1.0"
+gem "json", "< 3"
 
 gemspec path: "../"

data/input-attachment/README.md

@@ -77,9 +77,9 @@ The main component providing file upload functionality.
 get files(): AttachmentFile[]
 set files(val: AttachmentFile[])
 
-// Get/set array of signed IDs from Active Storage
-get value(): string[]
-set value(val: string[])
+// Get/set the attachments as a JSON string of { value: signed_id, filename, src, ... } objects
+get value(): string
+set value(val: string)
 
 // Clear all files
 reset(): void
@@ -137,6 +137,38 @@ set signedId(val: string)
 checkValidity(): boolean
 ```
 
+## Outside Rails (cross-origin, token auth)
+
+`directupload` can be an absolute URL on another origin, as long as that endpoint speaks the
+`@rails/activestorage` protocol and the storage bucket's CORS allows your origin. Add
+credentials from the `direct-upload:before-blob-request` event, which carries the XHR for the
+blob-reserving request:
+
+```js
+const el = document.querySelector("input-attachment")
+el.addEventListener("direct-upload:before-blob-request", event => {
+  event.detail.xhr.setRequestHeader("Authorization", `Bearer ${token}`)
+})
+```
+
+The element registers itself only after `defineCustomElements()` runs, so in a framework call it
+once on the client:
+
+```js
+import { defineCustomElements } from "@botandrose/input-attachment"
+defineCustomElements()
+```
+
+Without a `<form>` submit, read the signed id from the `change` event: `value` is a JSON string
+of the current attachments, and each one's `value` is its signed id.
+
+```js
+el.addEventListener("change", () => {
+  const [attachment] = JSON.parse(el.value)
+  console.log(attachment?.value) // the signed id, or undefined once removed
+})
+```
+
 ## Form Submission Flow
 
 1. User selects/drops files into `<input-attachment>`

data/input-attachment/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botandrose/input-attachment",
-  "version": "0.0.1",
+  "version": "0.6.4",
   "description": "Next-gen file field",
   "type": "module",
   "module": "dist/components/index.js",

data/input-attachment/src/components/attachment-file/attachment-file.tsx

@@ -2,6 +2,7 @@ import { Component, Prop, Element, Watch, Host, h } from '@stencil/core'
 import { Listen, Event, EventEmitter } from '@stencil/core'
 import DirectUploadController from './direct-upload-controller'
 import Max from './max'
+import NotEmpty from './not-empty'
 import Accepts from './accepts'
 import Extensions from './extensions'
 import { get } from 'rails-request-json'
@@ -170,6 +171,7 @@ export class AttachmentFile {
     let errors = []
     errors.push(...new Accepts(this).errors)
     errors.push(...new Max(this).errors)
+    errors.push(...new NotEmpty(this).errors)
     this.validationError = errors.join(" ")
     // Notify parent of validation state change
     this.validationEvent.emit({ valid: errors.length === 0, error: this.validationError })

data/input-attachment/src/components/attachment-file/not-empty.ts

@@ -0,0 +1,20 @@
+import { AttachmentFile } from './attachment-file'
+
+export default class NotEmpty {
+  uploadedFile: AttachmentFile
+
+  constructor(uploadedFile) {
+    this.uploadedFile = uploadedFile
+  }
+
+  get errors() {
+    if(this.#errors) return this.#errors
+    this.#errors = []
+    if(this.uploadedFile.size === 0) {
+      this.#errors.push("Must be larger than 0 bytes.")
+    }
+    return this.#errors
+  }
+
+  #errors: Array<string>
+}

data/input-attachment/src/components/input-attachment/input-attachment.spec.tsx

@@ -34,4 +34,45 @@ describe('input-attachment', () => {
       </input-attachment>
     `);
   });
+
+  describe('formStateRestoreCallback (Firefox session restore)', () => {
+    async function newPage() {
+      const page = await newSpecPage({
+        components: [InputAttachment],
+        html: `<form><input-attachment name="attachments[]" multiple></input-attachment></form>`,
+      });
+      const instance: any = page.rootInstance;
+      const calls: any[] = [];
+      instance.internals = {
+        setFormValue: (value: any, state: any) => calls.push({ value, state }),
+        setValidity: () => {},
+      };
+      return { page, instance, calls };
+    }
+
+    it('saves the files as a JSON string state, not the FormData Firefox would flatten', async () => {
+      const { instance, calls } = await newPage();
+      instance.files = [{ value: 'signed-one' }, { value: 'signed-two' }];
+      instance.updateFormValue();
+      const last = calls[calls.length - 1];
+      expect(typeof last.state).toBe('string');
+      expect(JSON.parse(last.state).map((f: any) => f.value)).toEqual(['signed-one', 'signed-two']);
+    });
+
+    it('rebuilds the attachments from the restored state string', async () => {
+      const { instance, calls } = await newPage();
+      const state = JSON.stringify([{ value: 'signed-one', filename: 'a.png', state: 'complete' }]);
+      instance.formStateRestoreCallback(state);
+      expect(instance.files.map((f: any) => f.value)).toEqual(['signed-one']);
+      instance.updateFormValue();
+      expect(calls[calls.length - 1].value.getAll('attachments[]')).toEqual(['signed-one']);
+    });
+
+    it('falls back to the current files when the restored state is the coerced "[object Object]"', async () => {
+      const { instance, calls } = await newPage();
+      instance.files = [{ value: 'signed-one' }];
+      instance.formStateRestoreCallback('[object Object]');
+      expect(calls[calls.length - 1].value.getAll('attachments[]')).toEqual(['signed-one']);
+    });
+  });
 });

data/input-attachment/src/components/input-attachment/input-attachment.tsx

@@ -125,7 +125,9 @@ export class InputAttachment {
       // For has_one_attached: set single value (or empty string if none)
       formData.set(this.name, values[0] || '')
     }
-    this.internals.setFormValue(formData)
+    // State is a JSON string (this.value), not the FormData: Firefox flattens a FormData to {}
+    // in the session store and restores it as "[object Object]", but a string survives intact.
+    this.internals.setFormValue(formData, this.value)
 
     // Update validity state - check for required and child validation errors
     if (this.required && this.files.length === 0) {
@@ -147,6 +149,27 @@ export class InputAttachment {
     this.files = []
   }
 
+  // On session restore Firefox hands back the state we saved (this.value, a JSON string of the
+  // files). Rebuild the attachments from it so they survive a browser restart; fall back to
+  // re-deriving from the current files if the state is missing or malformed (e.g. the coerced
+  // "[object Object]", which is not valid JSON).
+  formStateRestoreCallback(state) {
+    if (this.restorable(state)) {
+      this.value = state
+    } else {
+      this.updateFormValue()
+    }
+  }
+
+  restorable(state): boolean {
+    if (typeof state !== "string") return false
+    try {
+      return Array.isArray(JSON.parse(state))
+    } catch {
+      return false
+    }
+  }
+
   handleFileInputChange = () => {
     if (!this.fileInput?.files?.length) return
     this.addFiles(this.fileInput.files)

data/lib/bard/attachment_field/version.rb

@@ -2,6 +2,6 @@
 
 module Bard
   module AttachmentField
-    VERSION = "0.6.3"
+    VERSION = "0.6.5"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bard-attachment_field
 version: !ruby/object:Gem::Version
-  version: 0.6.3
+  version: 0.6.5
 platform: ruby
 authors:
 - Micah Geisel
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2026-08-13 00:00:00.000000000 Z
+date: 2026-10-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activestorage
@@ -327,6 +327,7 @@ files:
 - input-attachment/src/components/attachment-file/direct-upload-controller.tsx
 - input-attachment/src/components/attachment-file/extensions.ts
 - input-attachment/src/components/attachment-file/max.ts
+- input-attachment/src/components/attachment-file/not-empty.ts
 - input-attachment/src/components/attachment-file/readme.md
 - input-attachment/src/components/attachment-preview/attachment-preview.css
 - input-attachment/src/components/attachment-preview/attachment-preview.e2e.ts