bard-attachment_field 0.2.4 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f060d98d9b6c3c4e0494845d868b7f702009df53e1cd39ac0d659402a8c28b97
-  data.tar.gz: a2e2afa88506420373c09e818612a037eb111a910370c87a2f41c69968d84151
+  metadata.gz: 77372a4e55bd97d9a4c52f8089427717d9181d225d58b18814194a938a1c1631
+  data.tar.gz: 2eaa2f26f3a3f6fbf57523527923e21694596a13ab1de7968f4c401a5d368f88
 SHA512:
-  metadata.gz: 1480f10a1aaf61dc8f14e7c0e97062b033e85aa8d97d47e6df857cf1d254ad3b3adbee192d3de2156dc19dc3d2de16f244c9b6561933483c70a797ba63a0eecc
-  data.tar.gz: c78324d6d01030eeb10180287c14c6218e122ad865b511c89c7613ce8515b04aa3f138d4cdf8e0aab35216b66443478fafb6e6314955cfe9b01d06b1320493fb
+  metadata.gz: fd9cb5858441b97a1fde1189fad046b5c0d1295f5da2b7d5134bd84113cc9be32e419217a910ce716ce2702ec71d40586a1bf59bbd0cfa2fdeed41d0eafd0b57
+  data.tar.gz: 4881721450377ab4e55467c6ea7dae84ca371186a66ef3f77d50ffcbac921204d8dab282a0668a0997c5b5c36c9fae1d5136f33d4c530980bc5b279c2a25c4b5

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

@@ -4864,22 +4864,22 @@ var DirectUploadController2 = class {
   recordXHR;
   uploadXHR;
   callback = null;
+  cancelled = false;
+  completed = false;
   constructor(uploadedFile, file) {
     this.uploadedFile = uploadedFile;
     this.file = file;
     this.directUpload = new DirectUpload(this.file, this.uploadedFile.url, this);
   }
   cancel() {
-    this.directUpload.url = null;
+    this.cancelled = true;
     this.abortXHR(this.recordXHR);
     this.abortXHR(this.uploadXHR);
+    this.complete("aborted", {});
   }
   abortXHR(xhr) {
     if (!xhr)
       return;
-    xhr.addEventListener("abort", () => {
-      this.complete("aborted", {});
-    });
     xhr.abort();
   }
   start(callback) {
@@ -4890,6 +4890,9 @@ var DirectUploadController2 = class {
     });
   }
   complete(error, _attributes) {
+    if (this.completed)
+      return;
+    this.completed = true;
     if (error) {
       this.dispatchError(error);
     }
@@ -4920,12 +4923,22 @@ var DirectUploadController2 = class {
   }
   directUploadWillCreateBlobWithXHR(xhr) {
     this.recordXHR = xhr;
+    if (this.cancelled) {
+      xhr.send = () => {
+      };
+      return;
+    }
     this.dispatch("before-blob-request", {
       xhr
     });
   }
   directUploadWillStoreFileWithXHR(xhr) {
     this.uploadXHR = xhr;
+    if (this.cancelled) {
+      xhr.send = () => {
+      };
+      return;
+    }
     this.uploadedFile.value = this.recordXHR.response.signed_id;
     this.dispatch("before-storage-request", {
       xhr
@@ -5070,9 +5083,6 @@ var FetchResponse = class {
   get isTurboStream() {
     return this.contentType.match(/^text\/vnd\.turbo-stream\.html/);
   }
-  get isScript() {
-    return this.contentType.match(/\b(?:java|ecma)script\b/);
-  }
   async renderTurboStream() {
     if (this.isTurboStream) {
       if (window.Turbo) {
@@ -5084,22 +5094,6 @@ var FetchResponse = class {
       return Promise.reject(new Error(`Expected a Turbo Stream response but got "${this.contentType}" instead`));
     }
   }
-  async activeScript() {
-    if (this.isScript) {
-      const script = document.createElement("script");
-      const metaTag = document.querySelector("meta[name=csp-nonce]");
-      if (metaTag) {
-        const nonce = metaTag.nonce === "" ? metaTag.content : metaTag.nonce;
-        if (nonce) {
-          script.setAttribute("nonce", nonce);
-        }
-      }
-      script.innerHTML = await this.text;
-      document.body.appendChild(script);
-    } else {
-      return Promise.reject(new Error(`Expected a Script response but got "${this.contentType}" instead`));
-    }
-  }
 };
 var RequestInterceptor = class {
   static register(interceptor) {
@@ -5145,7 +5139,7 @@ function stringEntriesFromFormData(formData) {
 function mergeEntries(searchParams, entries) {
   for (const [name, value] of entries) {
     if (value instanceof window.File) continue;
-    if (searchParams.has(name) && !name.includes("[]")) {
+    if (searchParams.has(name)) {
       searchParams.delete(name);
       searchParams.set(name, value);
     } else {
@@ -5168,16 +5162,11 @@ var FetchRequest = class {
     } catch (error) {
       console.error(error);
     }
-    const fetch = window.Turbo ? window.Turbo.fetch : window.fetch;
-    const response = new FetchResponse(await fetch(this.url, this.fetchOptions));
+    const response = new FetchResponse(await window.fetch(this.url, this.fetchOptions));
     if (response.unauthenticated && response.authenticationURL) {
       return Promise.reject(window.location.href = response.authenticationURL);
     }
-    if (response.isScript) {
-      await response.activeScript();
-    }
-    const responseStatusIsTurboStreamable = response.ok || response.unprocessableEntity;
-    if (responseStatusIsTurboStreamable && response.isTurboStream) {
+    if (response.ok && response.isTurboStream) {
       await response.renderTurboStream();
     }
     return response;
@@ -5187,38 +5176,27 @@ var FetchRequest = class {
     headers[key] = value;
     this.options.headers = headers;
   }
-  sameHostname() {
-    if (!this.originalUrl.startsWith("http:") && !this.originalUrl.startsWith("https:")) {
-      return true;
-    }
-    try {
-      return new URL(this.originalUrl).hostname === window.location.hostname;
-    } catch (_) {
-      return true;
-    }
-  }
   get fetchOptions() {
     return {
       method: this.method.toUpperCase(),
       headers: this.headers,
       body: this.formattedBody,
       signal: this.signal,
-      credentials: this.credentials,
-      redirect: this.redirect,
-      keepalive: this.keepalive
+      credentials: "same-origin",
+      redirect: this.redirect
     };
   }
   get headers() {
-    const baseHeaders = {
-      "X-Requested-With": "XMLHttpRequest",
-      "Content-Type": this.contentType,
-      Accept: this.accept
-    };
-    if (this.sameHostname()) {
-      baseHeaders["X-CSRF-Token"] = this.csrfToken;
-    }
     return compact(
-      Object.assign(baseHeaders, this.additionalHeaders)
+      Object.assign(
+        {
+          "X-Requested-With": "XMLHttpRequest",
+          "X-CSRF-Token": this.csrfToken,
+          "Content-Type": this.contentType,
+          Accept: this.accept
+        },
+        this.additionalHeaders
+      )
     );
   }
   get csrfToken() {
@@ -5242,8 +5220,6 @@ var FetchRequest = class {
         return "text/vnd.turbo-stream.html, text/html, application/xhtml+xml";
       case "json":
         return "application/json, application/vnd.api+json";
-      case "script":
-        return "text/javascript, application/javascript";
       default:
         return "*/*";
     }
@@ -5278,12 +5254,6 @@ var FetchRequest = class {
   get redirect() {
     return this.options.redirect || "follow";
   }
-  get credentials() {
-    return this.options.credentials || "same-origin";
-  }
-  get keepalive() {
-    return this.options.keepalive || false;
-  }
   get additionalHeaders() {
     return this.options.headers || {};
   }
@@ -5468,8 +5438,8 @@ var AttachmentPreview3 = AttachmentPreview;
 
 // dist/components/input-attachment.js
 var FormController = class _FormController {
-  static instance(form) {
-    return form.inputAttachmentFormController ||= new _FormController(form);
+  static instance(form, options = {}) {
+    return form.inputAttachmentFormController ||= new _FormController(form, options);
   }
   progressContainerTarget;
   dialog;
@@ -5478,25 +5448,25 @@ var FormController = class _FormController {
   controllers;
   submitted;
   processing;
-  constructor(form) {
+  constructor(form, { uploadDialog = true } = {}) {
     this.element = form;
     this.progressTargetMap = {};
     this.controllers = [];
     this.submitted = false;
     this.processing = false;
-    this.element.insertAdjacentHTML("beforeend", `<dialog id="form-controller-dialog">
-        <div class="direct-upload-wrapper">
-          <div class="direct-upload-content">
-            <h3>Uploading your media</h3>
-            <div id="progress-container"></div>
+    if (uploadDialog) {
+      this.element.insertAdjacentHTML("beforeend", `<dialog id="form-controller-dialog">
+          <div class="direct-upload-wrapper">
+            <div class="direct-upload-content">
+              <h3>Uploading your media</h3>
+              <div id="progress-container"></div>
+            </div>
           </div>
-        </div>
-      </dialog>`);
-    this.dialog = this.element.querySelector("#form-controller-dialog");
-    this.progressContainerTarget = this.dialog.querySelector("#progress-container");
-    if (this.element.dataset.remote !== "true" && (this.element.dataset.turbo == "false" || !window.Turbo?.session?.enabled)) {
-      this.element.addEventListener("submit", (event) => this.submit(event));
+        </dialog>`);
+      this.dialog = this.element.querySelector("#form-controller-dialog");
+      this.progressContainerTarget = this.dialog.querySelector("#progress-container");
     }
+    this.element.addEventListener("submit", (event) => this.submit(event));
     window.addEventListener("beforeunload", (event) => this.beforeUnload(event));
     this.element.addEventListener("direct-upload:initialize", (event) => this.init(event));
     this.element.addEventListener("direct-upload:start", (event) => this.start(event));
@@ -5512,13 +5482,14 @@ var FormController = class _FormController {
     }
   }
   submit(event) {
-    if (this.controllers.length === 0 && !this.hasUploadErrors())
+    if (this.controllers.length === 0 && !this.hasUploadErrors() && !this.processing)
       return;
     event.preventDefault();
     this.submitted = true;
+    this.setInputAttachmentsDisabled(true);
     this.startNextController();
     if (this.processing) {
-      this.dialog.showModal();
+      this.dialog?.showModal();
     }
   }
   startNextController() {
@@ -5527,10 +5498,18 @@ var FormController = class _FormController {
     const controller = this.controllers.shift();
     if (controller) {
       this.processing = true;
-      this.setInputAttachmentsDisabled(true);
+      if (this.submitted) {
+        this.setInputAttachmentsDisabled(true);
+      } else {
+        this.setControllerInputDisabled(controller, true);
+      }
       controller.start((error) => {
-        if (error) {
-          this.setInputAttachmentsDisabled(false);
+        if (this.submitted) {
+          if (error) {
+            this.setInputAttachmentsDisabled(false);
+          }
+        } else {
+          this.setControllerInputDisabled(controller, false);
         }
         this.processing = false;
         this.startNextController();
@@ -5543,16 +5522,22 @@ var FormController = class _FormController {
     return Array.from(this.element.querySelectorAll("attachment-file")).some((el) => el.state === "error");
   }
   submitForm() {
-    if (this.submitted) {
-      if (this.hasUploadErrors()) {
-        this.dialog.close();
-        this.setInputAttachmentsDisabled(false);
-        return;
-      }
-      this.setInputAttachmentsDisabled(true);
-      window.setTimeout(() => {
-        this.element.submit();
-      }, 10);
+    if (!this.submitted)
+      return;
+    if (this.hasUploadErrors()) {
+      this.dialog?.close();
+      this.setInputAttachmentsDisabled(false);
+      return;
+    }
+    this.setInputAttachmentsDisabled(true);
+    requestAnimationFrame(() => {
+      this.element.submit();
+    });
+  }
+  setControllerInputDisabled(controller, disabled) {
+    const inputAttachment = controller.uploadedFile.closest("input-attachment");
+    if (inputAttachment) {
+      inputAttachment.disabled = disabled;
     }
   }
   setInputAttachmentsDisabled(disabled) {
@@ -5562,36 +5547,41 @@ var FormController = class _FormController {
   }
   init(event) {
     const { id: id2, file, controller } = event.detail;
-    this.progressContainerTarget.insertAdjacentHTML("beforebegin", `
-      <progress-bar id="direct-upload-${id2}" class="direct-upload--pending">${file?.name || "Uploading..."}</progress-bar>
-    `);
-    const progressTarget = document.getElementById(`direct-upload-${id2}`);
-    this.progressTargetMap[id2] = progressTarget;
+    if (this.progressContainerTarget) {
+      this.progressContainerTarget.insertAdjacentHTML("beforebegin", `
+        <progress-bar id="direct-upload-${id2}" class="direct-upload--pending">${file?.name || "Uploading..."}</progress-bar>
+      `);
+      this.progressTargetMap[id2] = document.getElementById(`direct-upload-${id2}`);
+    }
     this.controllers.push(controller);
     this.startNextController();
   }
   start(event) {
-    this.progressTargetMap[event.detail.id].classList.remove("direct-upload--pending");
+    this.progressTargetMap[event.detail.id]?.classList.remove("direct-upload--pending");
   }
   progress(event) {
     const { id: id2, progress } = event.detail;
-    this.progressTargetMap[id2].percent = progress;
+    const target = this.progressTargetMap[id2];
+    if (target)
+      target.percent = progress;
   }
   error(event) {
     event.preventDefault();
     const { id: id2, error } = event.detail;
     const target = this.progressTargetMap[id2];
-    target.classList.add("direct-upload--error");
-    target.title = error;
+    if (target) {
+      target.classList.add("direct-upload--error");
+      target.title = error;
+    }
   }
   end(event) {
-    this.progressTargetMap[event.detail.id].classList.add("direct-upload--complete");
+    this.progressTargetMap[event.detail.id]?.classList.add("direct-upload--complete");
   }
   removeUploadedFile(event) {
     const uploadedFile = event.detail;
     const id2 = uploadedFile.controller?.directUpload?.id;
     if (id2) {
-      document.getElementById(`direct-upload-${id2}`).remove();
+      document.getElementById(`direct-upload-${id2}`)?.remove();
       delete this.progressTargetMap[id2];
     }
     this.setInputAttachmentsDisabled(false);
@@ -5776,6 +5766,7 @@ var InputAttachment$1 = /* @__PURE__ */ proxyCustomElement(class InputAttachment
   max;
   preview = true;
   disabled = false;
+  uploadDialog = true;
   form;
   internals;
   fileInput;
@@ -5792,7 +5783,7 @@ var InputAttachment$1 = /* @__PURE__ */ proxyCustomElement(class InputAttachment
     this.form = this.internals.form;
     if (this.form) {
       this.form.addEventListener("reset", () => this.reset());
-      FormController.instance(this.form);
+      FormController.instance(this.form, { uploadDialog: this.uploadDialog });
     }
     const existingFiles = Array.from(this.el.children).filter((e) => e.tagName == "ATTACHMENT-FILE");
     if (existingFiles.length > 0)
@@ -5965,12 +5956,12 @@ var InputAttachment$1 = /* @__PURE__ */ proxyCustomElement(class InputAttachment
     return this.disabled || !!this.el.closest("fieldset[disabled]");
   }
   render() {
-    return h(Host, { key: "da0ceb39e5024d0dfe50511a4aa1139188dcb4a2" }, h("input", { key: "b9197faa99dcd580bf7c0fb7f356daa715d901d1", ref: (el) => this.fileInput = el, type: "file", multiple: this.multiple, accept: this.accepts, required: this.required && this.files.length === 0, disabled: this.isDisabled, onChange: () => this.handleFileInputChange(), style: {
+    return h(Host, { key: "e63c2624a4d88232adacc7d1610983fac89eb9db" }, h("input", { key: "baea544d4d62e31e1228d92ba8b0356d40e75ce5", ref: (el) => this.fileInput = el, type: "file", multiple: this.multiple, accept: this.accepts, required: this.required && this.files.length === 0, disabled: this.isDisabled, onChange: () => this.handleFileInputChange(), style: {
       opacity: "0.01",
       width: "1px",
       height: "1px",
       zIndex: "-999"
-    } }), h("file-drop", { key: "ce0608a99601202d437b7228e87437b510ba639f", onClick: () => this.fileInput?.click(), onDrop: this.handleDrop }, h("p", { key: "658d85fa352e7517789d95ad0c25756dafc79c08", part: "title" }, h("strong", { key: "7a160aa3132cdc8159e4319262cca69aa0b60d63" }, "Choose ", this.multiple ? "files" : "file", " "), h("span", { key: "51ab69b28833c8d442d1907ead5ddc79a6820f53" }, "or drag ", this.multiple ? "them" : "it", " here.")), h("div", { key: "a5bbee999e0575e27f7fc058640d8ee281ee0728", class: `media-preview ${this.multiple ? "-stacked" : ""}` }, h("slot", { key: "3a07d4e5aeaaf80fd5e37e9b135eb820dfcef757" }))));
+    } }), h("file-drop", { key: "0b5621010445988462b8056cb360bf18ac6b0b59", onClick: () => this.fileInput?.click(), onDrop: this.handleDrop }, h("p", { key: "718fe6b91ed9cdc5c5a2b54317fad8f1f25b3cd4", part: "title" }, h("strong", { key: "f28b9ffc58bb086bb1941ee01e943fe5068482a4" }, "Choose ", this.multiple ? "files" : "file", " "), h("span", { key: "eeca7b2f619a7a4d7863f98ba37218d6a66fdcfd" }, "or drag ", this.multiple ? "them" : "it", " here.")), h("div", { key: "2a1d0a824139f5c26833611a5523354965be0d9d", class: `media-preview ${this.multiple ? "-stacked" : ""}` }, h("slot", { key: "59455a857d01dfabd7aa5e697616f4be72cbbb20" }))));
   }
   componentDidRender() {
     if (this.files.length === 0) {
@@ -6046,7 +6037,8 @@ var InputAttachment$1 = /* @__PURE__ */ proxyCustomElement(class InputAttachment
   "accepts": [1],
   "max": [2],
   "preview": [4],
-  "disabled": [4]
+  "disabled": [4],
+  "uploadDialog": [4, "upload-dialog"]
 }, [[0, "attachment-file:remove", "removeUploadedFile"], [0, "attachment-file:validation", "handleChildValidation"], [0, "attachment-file:ready", "handleChildReady"], [0, "direct-upload:end", "fireChangeEvent"]]]);
 var InputAttachment2 = InputAttachment$1;
 

data/input-attachment/package.json

@@ -21,7 +21,10 @@
   },
   "jest": {
     "testEnvironment": "jsdom",
-    "extensionsToTreatAsEsm": [".ts", ".tsx"],
+    "extensionsToTreatAsEsm": [
+      ".ts",
+      ".tsx"
+    ],
     "globals": {
       "ts-jest": {
         "useESM": true
@@ -53,5 +56,8 @@
       "import": "./dist/components/index.js"
     }
   },
-  "license": "MIT"
+  "license": "MIT",
+  "volta": {
+    "node": "22.22.1"
+  }
 }

data/input-attachment/src/components/attachment-file/direct-upload-controller.tsx

@@ -8,6 +8,8 @@ export default class DirectUploadController {
   recordXHR: XMLHttpRequest
   uploadXHR: XMLHttpRequest
   callback = null
+  cancelled = false
+  completed = false
 
   constructor(uploadedFile, file: File) {
     this.uploadedFile = uploadedFile
@@ -16,16 +18,14 @@ export default class DirectUploadController {
   }
 
   cancel() {
-    this.directUpload.url = null
+    this.cancelled = true
     this.abortXHR(this.recordXHR)
     this.abortXHR(this.uploadXHR)
+    this.complete("aborted", {})
   }
 
   abortXHR(xhr) {
     if(!xhr) return
-    xhr.addEventListener("abort", () => {
-      this.complete("aborted", {})
-    })
     xhr.abort()
   }
 
@@ -38,6 +38,8 @@ export default class DirectUploadController {
   }
 
   complete(error, _attributes) {
+    if (this.completed) return
+    this.completed = true
     if (error) {
       this.dispatchError(error)
     }
@@ -69,12 +71,14 @@ export default class DirectUploadController {
   }
   directUploadWillCreateBlobWithXHR(xhr) {
     this.recordXHR = xhr
+    if (this.cancelled) { xhr.send = () => {}; return }
     this.dispatch("before-blob-request", {
       xhr: xhr
     });
   }
   directUploadWillStoreFileWithXHR(xhr) {
     this.uploadXHR = xhr
+    if (this.cancelled) { xhr.send = () => {}; return }
     this.uploadedFile.value = this.recordXHR.response.signed_id
     this.dispatch("before-storage-request", {
       xhr: xhr

data/input-attachment/src/components/input-attachment/form-controller.spec.ts

@@ -0,0 +1,63 @@
+import FormController from "./form-controller"
+
+function createForm() {
+  const form = document.createElement("form")
+  document.body.appendChild(form)
+  return form
+}
+
+afterEach(() => {
+  document.body.innerHTML = ""
+})
+
+describe("FormController", () => {
+  describe("default (uploadDialog: true)", () => {
+    it("creates the dialog and progress container", () => {
+      const form = createForm()
+      const controller = FormController.instance(form)
+      expect(controller.dialog).toBeTruthy()
+      expect(controller.progressContainerTarget).toBeTruthy()
+      expect(form.querySelector("#form-controller-dialog")).toBeTruthy()
+      expect(form.querySelector("#progress-container")).toBeTruthy()
+    })
+  })
+
+  describe("uploadDialog: false", () => {
+    it("does not create the dialog or progress container", () => {
+      const form = createForm()
+      const controller = FormController.instance(form, { uploadDialog: false })
+      expect(controller.dialog).toBeFalsy()
+      expect(controller.progressContainerTarget).toBeFalsy()
+      expect(form.querySelector("#form-controller-dialog")).toBeNull()
+      expect(form.querySelector("#progress-container")).toBeNull()
+    })
+
+    it("still registers event listeners and queues controllers", () => {
+      const form = createForm()
+      FormController.instance(form, { uploadDialog: false })
+
+      const uploadedFile = document.createElement("div")
+      form.appendChild(uploadedFile)
+      const mockController = { start: jest.fn(cb => cb(null)), uploadedFile }
+      form.dispatchEvent(new CustomEvent("direct-upload:initialize", {
+        detail: { id: 1, file: { name: "test.jpg" }, controller: mockController },
+      }))
+
+      expect(mockController.start).toHaveBeenCalled()
+    })
+
+    it("does not create progress bars on init", () => {
+      const form = createForm()
+      FormController.instance(form, { uploadDialog: false })
+
+      const uploadedFile = document.createElement("div")
+      form.appendChild(uploadedFile)
+      const mockController = { start: jest.fn(cb => cb(null)), uploadedFile }
+      form.dispatchEvent(new CustomEvent("direct-upload:initialize", {
+        detail: { id: 1, file: { name: "test.jpg" }, controller: mockController },
+      }))
+
+      expect(form.querySelector("progress-bar")).toBeNull()
+    })
+  })
+})

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

@@ -1,8 +1,8 @@
 import DirectUploadController from "../attachment-file/direct-upload-controller"
 
 export default class FormController {
-  static instance(form) {
-    return form.inputAttachmentFormController ||= new FormController(form)
+  static instance(form, options = {}) {
+    return form.inputAttachmentFormController ||= new FormController(form, options)
   }
 
   progressContainerTarget: HTMLElement
@@ -14,29 +14,29 @@ export default class FormController {
   submitted: boolean
   processing: boolean
 
-  constructor(form) {
+  constructor(form, { uploadDialog = true } = {}) {
     this.element = form
     this.progressTargetMap = {}
     this.controllers = []
     this.submitted = false
     this.processing = false
 
-    this.element.insertAdjacentHTML("beforeend",
-      `<dialog id="form-controller-dialog">
-        <div class="direct-upload-wrapper">
-          <div class="direct-upload-content">
-            <h3>Uploading your media</h3>
-            <div id="progress-container"></div>
+    if (uploadDialog) {
+      this.element.insertAdjacentHTML("beforeend",
+        `<dialog id="form-controller-dialog">
+          <div class="direct-upload-wrapper">
+            <div class="direct-upload-content">
+              <h3>Uploading your media</h3>
+              <div id="progress-container"></div>
+            </div>
           </div>
-        </div>
-      </dialog>`)
+        </dialog>`)
 
-    this.dialog = this.element.querySelector("#form-controller-dialog")
-    this.progressContainerTarget = this.dialog.querySelector("#progress-container")
-
-    if(this.element.dataset.remote !== "true" && (this.element.dataset.turbo == "false" || !(window as any).Turbo?.session?.enabled)) {
-      this.element.addEventListener("submit", event => this.submit(event))
+      this.dialog = this.element.querySelector("#form-controller-dialog")
+      this.progressContainerTarget = this.dialog.querySelector("#progress-container")
     }
+
+    this.element.addEventListener("submit", event => this.submit(event))
     window.addEventListener("beforeunload", event => this.beforeUnload(event))
 
     this.element.addEventListener("direct-upload:initialize", event => this.init(event))
@@ -56,12 +56,13 @@ export default class FormController {
   }
 
   submit(event) {
-    if(this.controllers.length === 0 && !this.hasUploadErrors()) return
+    if(this.controllers.length === 0 && !this.hasUploadErrors() && !this.processing) return
     event.preventDefault()
     this.submitted = true
+    this.setInputAttachmentsDisabled(true)
     this.startNextController()
     if(this.processing) {
-      this.dialog.showModal()
+      this.dialog?.showModal()
     }
   }
 
@@ -71,10 +72,18 @@ export default class FormController {
     const controller = this.controllers.shift()
     if(controller) {
       this.processing = true
-      this.setInputAttachmentsDisabled(true)
+      if (this.submitted) {
+        this.setInputAttachmentsDisabled(true)
+      } else {
+        this.setControllerInputDisabled(controller, true)
+      }
       controller.start(error => {
-        if(error) {
-          this.setInputAttachmentsDisabled(false)
+        if (this.submitted) {
+          if(error) {
+            this.setInputAttachmentsDisabled(false)
+          }
+        } else {
+          this.setControllerInputDisabled(controller, false)
         }
         this.processing = false
         this.startNextController()
@@ -90,16 +99,22 @@ export default class FormController {
   }
 
   submitForm() {
-    if(this.submitted) {
-      if(this.hasUploadErrors()) {
-        this.dialog.close()
-        this.setInputAttachmentsDisabled(false)
-        return
-      }
-      this.setInputAttachmentsDisabled(true)
-      window.setTimeout(() => { // allow other async tasks to complete
-        this.element.submit()
-      }, 10)
+    if(!this.submitted) return
+    if(this.hasUploadErrors()) {
+      this.dialog?.close()
+      this.setInputAttachmentsDisabled(false)
+      return
+    }
+    this.setInputAttachmentsDisabled(true)
+    requestAnimationFrame(() => { // run after pending rAF callbacks (e.g. updateFormValue)
+      this.element.submit()
+    })
+  }
+
+  setControllerInputDisabled(controller: DirectUploadController, disabled: boolean) {
+    const inputAttachment = (controller.uploadedFile as any).closest('input-attachment')
+    if (inputAttachment) {
+      inputAttachment.disabled = disabled
     }
   }
 
@@ -113,42 +128,46 @@ export default class FormController {
   init(event) {
     const { id, file, controller } = event.detail
 
-    this.progressContainerTarget.insertAdjacentHTML("beforebegin", `
-      <progress-bar id="direct-upload-${id}" class="direct-upload--pending">${file?.name || 'Uploading...'}</progress-bar>
-    `)
-    const progressTarget = document.getElementById(`direct-upload-${id}`)
-    this.progressTargetMap[id] = progressTarget
+    if (this.progressContainerTarget) {
+      this.progressContainerTarget.insertAdjacentHTML("beforebegin", `
+        <progress-bar id="direct-upload-${id}" class="direct-upload--pending">${file?.name || 'Uploading...'}</progress-bar>
+      `)
+      this.progressTargetMap[id] = document.getElementById(`direct-upload-${id}`)
+    }
 
     this.controllers.push(controller)
     this.startNextController()
   }
 
   start(event) {
-    this.progressTargetMap[event.detail.id].classList.remove("direct-upload--pending")
+    this.progressTargetMap[event.detail.id]?.classList.remove("direct-upload--pending")
   }
 
   progress(event) {
     const { id, progress } = event.detail
-    this.progressTargetMap[id].percent = progress
+    const target = this.progressTargetMap[id]
+    if (target) target.percent = progress
   }
 
   error(event) {
     event.preventDefault()
     const { id, error } = event.detail
     const target = this.progressTargetMap[id]
-    target.classList.add("direct-upload--error")
-    target.title = error
+    if (target) {
+      target.classList.add("direct-upload--error")
+      target.title = error
+    }
   }
 
   end(event) {
-    this.progressTargetMap[event.detail.id].classList.add("direct-upload--complete")
+    this.progressTargetMap[event.detail.id]?.classList.add("direct-upload--complete")
   }
 
   removeUploadedFile(event) {
     const uploadedFile = event.detail
     const id = uploadedFile.controller?.directUpload?.id
     if(id) {
-      document.getElementById(`direct-upload-${id}`).remove()
+      document.getElementById(`direct-upload-${id}`)?.remove()
       delete this.progressTargetMap[id]
     }
     this.setInputAttachmentsDisabled(false)

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

@@ -22,6 +22,7 @@ export class InputAttachment {
   @Prop() max: number
   @Prop() preview: boolean = true
   @Prop() disabled: boolean = false
+  @Prop({ attribute: "upload-dialog" }) uploadDialog: boolean = true
 
 
   form: HTMLFormElement
@@ -37,7 +38,7 @@ export class InputAttachment {
     this.form = this.internals.form
     if (this.form) {
       this.form.addEventListener("reset", () => this.reset())
-      FormController.instance(this.form)
+      FormController.instance(this.form, { uploadDialog: this.uploadDialog })
     }
 
     // Note: Server-rendered children may not be available yet during componentWillLoad

data/input-attachment/src/components/input-attachment/readme.md

@@ -7,16 +7,17 @@
 
 ## Properties
 
-| Property       | Attribute      | Description | Type      | Default     |
-| -------------- | -------------- | ----------- | --------- | ----------- |
-| `accepts`      | `accepts`      |             | `string`  | `undefined` |
-| `directupload` | `directupload` |             | `string`  | `undefined` |
-| `disabled`     | `disabled`     |             | `boolean` | `false`     |
-| `max`          | `max`          |             | `number`  | `undefined` |
-| `multiple`     | `multiple`     |             | `boolean` | `false`     |
-| `name`         | `name`         |             | `string`  | `undefined` |
-| `preview`      | `preview`      |             | `boolean` | `true`      |
-| `required`     | `required`     |             | `boolean` | `false`     |
+| Property       | Attribute       | Description | Type      | Default     |
+| -------------- | --------------- | ----------- | --------- | ----------- |
+| `accepts`      | `accepts`       |             | `string`  | `undefined` |
+| `directupload` | `directupload`  |             | `string`  | `undefined` |
+| `disabled`     | `disabled`      |             | `boolean` | `false`     |
+| `max`          | `max`           |             | `number`  | `undefined` |
+| `multiple`     | `multiple`      |             | `boolean` | `false`     |
+| `name`         | `name`          |             | `string`  | `undefined` |
+| `preview`      | `preview`       |             | `boolean` | `true`      |
+| `required`     | `required`      |             | `boolean` | `false`     |
+| `uploadDialog` | `upload-dialog` |             | `boolean` | `true`      |
 
 
 ## Shadow Parts

data/input-attachment/src/components.d.ts

@@ -58,6 +58,10 @@ export namespace Components {
           * @default false
          */
         "required": boolean;
+        /**
+          * @default true
+         */
+        "uploadDialog": boolean;
     }
 }
 export interface AttachmentFileCustomEvent<T> extends CustomEvent<T> {
@@ -158,6 +162,10 @@ declare namespace LocalJSX {
           * @default false
          */
         "required"?: boolean;
+        /**
+          * @default true
+         */
+        "uploadDialog"?: boolean;
     }
     interface IntrinsicElements {
         "attachment-file": AttachmentFile;

data/lib/bard/attachment_field/cucumber.rb

@@ -309,6 +309,22 @@ Then "the {string} attachment field should be disabled" do |field|
   expect(is_disabled).to be true
 end
 
+Then "the {string} attachment field should not be disabled" do |field|
+  element = Bard::AttachmentField::TestHelper.find_field(page, field)
+
+  is_disabled = page.evaluate_script(<<~JS)
+    (function() {
+      const element = document.getElementById('#{element[:id]}');
+      if (element.hasAttribute('disabled')) return true;
+      if (element.closest('fieldset[disabled]')) return true;
+      const fileInput = element.shadowRoot?.querySelector('input[type="file"]');
+      return fileInput?.disabled || false;
+    })()
+  JS
+
+  expect(is_disabled).to be false
+end
+
 Then "the {string} attachment field should have a validation error containing {string}" do |field, message|
   element = Bard::AttachmentField::TestHelper.find_field(page, field)
   messages = Bard::AttachmentField::TestHelper.validation_messages(page, element)

data/lib/bard/attachment_field/field.rb

@@ -6,6 +6,9 @@ module Bard
           "directupload" => "/rails/active_storage/direct_uploads",
           "preview" => true,
         })
+        if options.key?("upload-dialog") && options["upload-dialog"] == false
+          options["upload-dialog"] = "false"
+        end
         add_default_name_and_id(options)
 
         content_tag("input-attachment", options) do

data/lib/bard/attachment_field/version.rb

@@ -2,6 +2,6 @@
 
 module Bard
   module AttachmentField
-    VERSION = "0.2.4"
+    VERSION = "0.3.0"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bard-attachment_field
 version: !ruby/object:Gem::Version
-  version: 0.2.4
+  version: 0.3.0
 platform: ruby
 authors:
 - Micah Geisel
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2026-03-04 00:00:00.000000000 Z
+date: 2026-03-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activestorage
@@ -361,6 +361,7 @@ files:
 - input-attachment/src/components/attachment-preview/attachment-preview.spec.tsx
 - input-attachment/src/components/attachment-preview/attachment-preview.tsx
 - input-attachment/src/components/attachment-preview/readme.md
+- input-attachment/src/components/input-attachment/form-controller.spec.ts
 - input-attachment/src/components/input-attachment/form-controller.tsx
 - input-attachment/src/components/input-attachment/input-attachment.css
 - input-attachment/src/components/input-attachment/input-attachment.e2e.ts