bard-attachment_field 0.2.0 → 0.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: eb0a5828862fbe5feb5e9da0492d9e23dc3698a099168c09e04a90e83f40c493
-  data.tar.gz: f868efb0bb5eac969ecb0d6ed809c5385b7c8111b6c68e43ec64a8f6e91c7ae1
+  metadata.gz: 32a9e349c2ce7715b8a5732e730bbd96efb6c50f542b0f39fd470a1b39b2952e
+  data.tar.gz: 1da2861ccab4b81ffc92f0dc6b933c9266b07ba2b96747469d3030de9f44f9f2
 SHA512:
-  metadata.gz: 36b03a42ab7d9820fcb049f3406dbe2fe47bb57c13d73b2c102f2373194ed23eb22dee20360ada23f2d9618fa29cf789973702aae22f28a346212b39c11c26c7
-  data.tar.gz: 24f650bbdc0c0468a371e579255b52cc5a18cbfa5511d92e17671a9903383ad62e9f4ca9abbd73b9ca2c1b5997e4b895f1cb46a1a357f1a3e8f48be93f73f64d
+  metadata.gz: 26808a1afc2c0156726a2fb3443a600efb194bdf87ad4d9a284896e0a53ed24ba3cae9170875fa7bb27cc933de8eafa71fc5116669531ab3431329c59ec6c323
+  data.tar.gz: 0f48786c5c1eea01995a6e8d04e41f3cb24c5866456b99068d1a4cf6bbedf41e5879df2d02b4f28b02bb5b939f454a9230e2f7bf7e0a49c5a09ef618b200a2cd

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

@@ -5070,6 +5070,9 @@ 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) {
@@ -5081,6 +5084,22 @@ 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) {
@@ -5126,7 +5145,7 @@ function stringEntriesFromFormData(formData) {
 function mergeEntries(searchParams, entries) {
   for (const [name, value] of entries) {
     if (value instanceof window.File) continue;
-    if (searchParams.has(name)) {
+    if (searchParams.has(name) && !name.includes("[]")) {
       searchParams.delete(name);
       searchParams.set(name, value);
     } else {
@@ -5149,11 +5168,16 @@ var FetchRequest = class {
     } catch (error) {
       console.error(error);
     }
-    const response = new FetchResponse(await window.fetch(this.url, this.fetchOptions));
+    const fetch = window.Turbo ? window.Turbo.fetch : window.fetch;
+    const response = new FetchResponse(await fetch(this.url, this.fetchOptions));
     if (response.unauthenticated && response.authenticationURL) {
       return Promise.reject(window.location.href = response.authenticationURL);
     }
-    if (response.ok && response.isTurboStream) {
+    if (response.isScript) {
+      await response.activeScript();
+    }
+    const responseStatusIsTurboStreamable = response.ok || response.unprocessableEntity;
+    if (responseStatusIsTurboStreamable && response.isTurboStream) {
       await response.renderTurboStream();
     }
     return response;
@@ -5163,27 +5187,38 @@ 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: "same-origin",
-      redirect: this.redirect
+      credentials: this.credentials,
+      redirect: this.redirect,
+      keepalive: this.keepalive
     };
   }
   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(
-        {
-          "X-Requested-With": "XMLHttpRequest",
-          "X-CSRF-Token": this.csrfToken,
-          "Content-Type": this.contentType,
-          Accept: this.accept
-        },
-        this.additionalHeaders
-      )
+      Object.assign(baseHeaders, this.additionalHeaders)
     );
   }
   get csrfToken() {
@@ -5207,6 +5242,8 @@ 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 "*/*";
     }
@@ -5241,6 +5278,12 @@ 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 || {};
   }
@@ -5256,7 +5299,7 @@ var FetchRequest = class {
 var request = (verb, url, payload, headers) => {
   const req = new FetchRequest(verb, url, {
     headers: { Accept: "application/json", ...headers },
-    body: payload
+    ...{ query: payload }
   });
   return req.perform().then((response) => {
     if (response.response.ok) {
@@ -5466,6 +5509,8 @@ var FormController = class _FormController {
     }
   }
   submit(event) {
+    if (this.controllers.length === 0 && !this.hasUploadErrors())
+      return;
     event.preventDefault();
     this.submitted = true;
     this.startNextController();
@@ -5814,11 +5859,13 @@ var InputAttachment$1 = /* @__PURE__ */ proxyCustomElement(class InputAttachment
   set value(val) {
     const newValue = val || [];
     if (JSON.stringify(this.value) !== JSON.stringify(newValue)) {
-      this.files = newValue.map((signedId) => Object.assign(new AttachmentFile(), {
-        name: this.name,
-        preview: this.preview,
-        signedId
-      }));
+      this.files = newValue.map((signedId) => {
+        const attachmentFile = document.createElement("attachment-file");
+        attachmentFile.name = this.name;
+        attachmentFile.preview = this.preview;
+        attachmentFile.signedId = signedId;
+        return attachmentFile;
+      });
     }
   }
   // For form-persistence: store complete attachment data (not just signed_ids)
@@ -5912,12 +5959,12 @@ var InputAttachment$1 = /* @__PURE__ */ proxyCustomElement(class InputAttachment
     return this.disabled || !!this.el.closest("fieldset[disabled]");
   }
   render() {
-    return h(Host, { key: "c71c6869000f6fc105fe66f4417c4e64c3c70f68" }, h("input", { key: "4d03f907860f42f2c30d971360bd3ff9ffe19659", 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: "4ef61015f6e0abb87d50a3f9ff8e39f01dc44ead" }, h("input", { key: "fc02ff04ff705c2c26ef6bc9e21e23435eefe0d6", 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: "46a5e8eb22825afe03ce5e6e735d59143dec596a", onClick: () => this.fileInput?.click(), onDrop: this.handleDrop }, h("p", { key: "c68e8157ec03306c00e03330fc39d3bdbec0b38b", part: "title" }, h("strong", { key: "c4803833fe77c48882b3414c1f375b050c0659a0" }, "Choose ", this.multiple ? "files" : "file", " "), h("span", { key: "844abd650924319ae4836d2c6be9c13925232229" }, "or drag ", this.multiple ? "them" : "it", " here.")), h("div", { key: "2f355ee03d3bc033fd37d392555ad3f890ef22cb", class: `media-preview ${this.multiple ? "-stacked" : ""}` }, h("slot", { key: "255e79285dd1575386418ffd34f2517c5d7c717a" }))));
+    } }), h("file-drop", { key: "20ad744ab366a7af2404711a025240515198815f", onClick: () => this.fileInput?.click(), onDrop: this.handleDrop }, h("p", { key: "c5289e9d5b03ced01d95f2d2152ab06dfaaaa8fb", part: "title" }, h("strong", { key: "ed48073458e73fad729caebc1eea8c1ed31fd021" }, "Choose ", this.multiple ? "files" : "file", " "), h("span", { key: "daa4fbd6f33180060a306fdb5ea469d2a68a141b" }, "or drag ", this.multiple ? "them" : "it", " here.")), h("div", { key: "83a5aaf4ee4bc0d7c2917a781ef77568ce9fb9a6", class: `media-preview ${this.multiple ? "-stacked" : ""}` }, h("slot", { key: "8ce39f9805a8f292cc08c9d77c8f91d2754152f7" }))));
   }
   componentDidRender() {
     if (this.files.length === 0) {

data/input-attachment/package.json

@@ -32,6 +32,7 @@
     "@botandrose/file-drop": "^0.1.0",
     "@botandrose/progress-bar": "^0.1.1",
     "@rails/activestorage": "^8.1.0",
+    "@rails/request.js": "0.0.13",
     "@stencil/core": "^4.38.2",
     "rails-request-json": "^0.2.0",
     "ts-jest": "^29.4.5"

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

@@ -56,6 +56,7 @@ export default class FormController {
   }
 
   submit(event) {
+    if(this.controllers.length === 0 && !this.hasUploadErrors()) return
     event.preventDefault()
     this.submitted = true
     this.startNextController()

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

@@ -1,6 +1,5 @@
 import { Component, Element, Prop, Listen, Host, h, forceUpdate } from '@stencil/core';
 import FormController from "./form-controller"
-import { AttachmentFile } from "../attachment-file/attachment-file"
 import { arrayRemove } from "../../utils/utils"
 import '@botandrose/file-drop'
 import '@botandrose/progress-bar'
@@ -125,11 +124,13 @@ export class InputAttachment {
   set value(val) {
     const newValue = val || []
     if(JSON.stringify(this.value) !== JSON.stringify(newValue)) { // this is insane. javascript is fucking garbage.
-      this.files = newValue.map(signedId => Object.assign(new AttachmentFile(), {
-        name: this.name,
-        preview: this.preview,
-        signedId,
-      }))
+      this.files = newValue.map(signedId => {
+        const attachmentFile = document.createElement('attachment-file') as any
+        attachmentFile.name = this.name
+        attachmentFile.preview = this.preview
+        attachmentFile.signedId = signedId
+        return attachmentFile
+      })
     }
   }
 

data/lib/bard/attachment_field/cucumber.rb

@@ -24,7 +24,11 @@ module Bard::AttachmentField::TestHelper
   end
 
   def find_field(session, label)
-    label_element = session.find("label", text: /^#{Regexp.escape(label)}$/)
+    label_element = begin
+      session.find("label", exact_text: label, visible: :all, match: :first)
+    rescue Capybara::ElementNotFound
+      session.find("label", text: /^#{Regexp.escape(label)}/, visible: :all, match: :first)
+    end
     element_id = label_element[:for]
     session.find("input-attachment##{element_id}")
   end
@@ -34,7 +38,7 @@ module Bard::AttachmentField::TestHelper
   def attach_files(session, element_id, file_paths)
     session.execute_script("document.body.insertAdjacentHTML('beforeend', '<input type=\"file\" id=\"_cdp_file_helper\" multiple style=\"display:none\">')")
 
-    temp_input = session.find("#_cdp_file_helper", visible: :all)
+    temp_input = session.document.find("#_cdp_file_helper", visible: :all)
     temp_input.native.node.select_file(file_paths)
 
     session.execute_script(<<~JS)
@@ -47,12 +51,43 @@ module Bard::AttachmentField::TestHelper
     JS
   end
 
+  def wait_for_files(session, element_id, minimum, timeout: 15)
+    start = Process.clock_gettime(Process::CLOCK_MONOTONIC)
+    loop do
+      count = session.evaluate_script("document.getElementById('#{element_id}').querySelectorAll('attachment-file').length")
+      break if count >= minimum
+      elapsed = Process.clock_gettime(Process::CLOCK_MONOTONIC) - start
+      raise "Expected at least #{minimum} attachment-file(s) in ##{element_id}, found #{count} after #{timeout}s" if elapsed > timeout
+      sleep 0.1
+    end
+  end
+
+  def wait_for_no_files(session, element_id, selector = "attachment-file", timeout: 10)
+    start = Process.clock_gettime(Process::CLOCK_MONOTONIC)
+    loop do
+      count = session.evaluate_script("document.getElementById('#{element_id}').querySelectorAll('#{selector}').length")
+      break if count == 0
+      elapsed = Process.clock_gettime(Process::CLOCK_MONOTONIC) - start
+      raise "Expected no #{selector} in ##{element_id}, found #{count} after #{timeout}s" if elapsed > timeout
+      sleep 0.1
+    end
+  end
+
   def wait_for_upload(session, element_id, timeout: 30)
-    session.document.synchronize(timeout, errors: [RuntimeError]) do
-      states = session.evaluate_script(<<~JS)
-        Array.from(document.getElementById('#{element_id}').querySelectorAll('attachment-file')).map(e => e.getAttribute('state'))
+    start = Process.clock_gettime(Process::CLOCK_MONOTONIC)
+    loop do
+      result = session.evaluate_script(<<~JS)
+        (() => {
+          const files = document.getElementById('#{element_id}').querySelectorAll('attachment-file');
+          return Array.from(files).map(e => ({ state: e.getAttribute('state'), value: e.value }));
+        })()
       JS
-      raise "Uploads not complete (states=#{states})" unless states.all? { |s| s == "complete" || s == "error" }
+      states_done = result.all? { |f| f["state"] == "complete" || f["state"] == "error" }
+      values_set = result.all? { |f| f["state"] == "error" || (f["value"] && !f["value"].empty?) }
+      break if states_done && values_set
+      elapsed = Process.clock_gettime(Process::CLOCK_MONOTONIC) - start
+      raise "Uploads not complete after #{timeout}s (files=#{result})" if elapsed > timeout
+      sleep 0.1
     end
   end
 
@@ -116,6 +151,7 @@ class Chop::Form::AttachmentField < Chop::Form::Field
     end
 
     Bard::AttachmentField::TestHelper.attach_files(session, field[:id], file_paths)
+    Bard::AttachmentField::TestHelper.wait_for_files(session, field[:id], file_paths.length)
     Bard::AttachmentField::TestHelper.wait_for_upload(session, field[:id])
   end
 end
@@ -123,29 +159,32 @@ end
 # Step definitions
 
 When "I attach the file {string} to {string}" do |path, field|
-  element = Bard::AttachmentField::TestHelper.find_field(page, field)
   file_path_full = Bard::AttachmentField::TestHelper.resolve_fixture_path(path)
 
-  Bard::AttachmentField::TestHelper.attach_files(page, element[:id], [file_path_full])
-
-  page.document.synchronize(15, errors: [Capybara::ElementNotFound]) do
-    element.find("attachment-file")
+  begin
+    element = Bard::AttachmentField::TestHelper.find_field(page, field)
+  rescue Capybara::ElementNotFound
+    attach_file field, file_path_full
+    next
   end
 
+  Bard::AttachmentField::TestHelper.attach_files(page, element[:id], [file_path_full])
+  Bard::AttachmentField::TestHelper.wait_for_files(page, element[:id], 1)
   Bard::AttachmentField::TestHelper.wait_for_upload(page, element[:id])
 end
 
 When "I attach the following files to {string}:" do |field, table|
   files = table.raw.map(&:first).map { |filename| Bard::AttachmentField::TestHelper.resolve_fixture_path(filename) }
 
-  element = Bard::AttachmentField::TestHelper.find_field(page, field)
-
-  Bard::AttachmentField::TestHelper.attach_files(page, element[:id], files)
-
-  page.document.synchronize(15, errors: [Capybara::ElementNotFound]) do
-    element.all("attachment-file", minimum: files.length)
+  begin
+    element = Bard::AttachmentField::TestHelper.find_field(page, field)
+  rescue Capybara::ElementNotFound
+    attach_file field, files
+    next
   end
 
+  Bard::AttachmentField::TestHelper.attach_files(page, element[:id], files)
+  Bard::AttachmentField::TestHelper.wait_for_files(page, element[:id], files.length)
   Bard::AttachmentField::TestHelper.wait_for_upload(page, element[:id], timeout: 60)
 end
 
@@ -161,11 +200,7 @@ When "I remove the file from {string}" do |field|
       removeLink.click();
     })(arguments[0])
   JS
-  # Wait for the file to be removed (refetch element to avoid stale reference)
-  page.document.synchronize(5, errors: [Capybara::ElementNotFound]) do
-    fresh_element = page.find("##{element_id}")
-    expect(fresh_element).to have_no_css("attachment-file")
-  end
+  Bard::AttachmentField::TestHelper.wait_for_no_files(page, element_id)
 end
 
 When "I remove {string} from {string}" do |filename, field|
@@ -180,11 +215,21 @@ When "I remove {string} from {string}" do |filename, field|
       removeLink.click();
     })(arguments[0], arguments[1])
   JS
-  # Wait for the file to be removed (refetch element to avoid stale reference)
-  page.document.synchronize(5, errors: [Capybara::ElementNotFound]) do
-    fresh_element = page.find("##{element_id}")
-    expect(fresh_element).to have_no_css("attachment-file[filename='#{filename}']")
-  end
+  Bard::AttachmentField::TestHelper.wait_for_no_files(page, element_id, "attachment-file[filename='#{filename}']")
+end
+
+When "I remove {string} from the {string} field" do |filename, field|
+  element = Bard::AttachmentField::TestHelper.find_field(page, field)
+  element_id = element[:id]
+  page.execute_script(<<~JS, element_id, filename)
+    ((elementId, filename) => {
+      const host = document.getElementById(elementId);
+      const attachmentFile = host.querySelector(`attachment-file[filename='${filename}']`);
+      const removeLink = attachmentFile.shadowRoot.querySelector('a.remove-media');
+      removeLink.click();
+    })(arguments[0], arguments[1])
+  JS
+  Bard::AttachmentField::TestHelper.wait_for_no_files(page, element_id, "attachment-file[filename='#{filename}']")
 end
 
 When "I drag the file {string} onto the {string} attachment field" do |path, field|
@@ -227,6 +272,13 @@ Then "I should see a preview of {string} for the {string} field" do |filename, f
   expect(element.find("attachment-file")[:filename]).to eq(filename)
 end
 
+Then "I should see the following media previews for the {string} field:" do |field, table|
+  element = Bard::AttachmentField::TestHelper.find_field(page, field)
+  element.assert_selector("attachment-file", minimum: table.raw.length)
+  actual = Bard::AttachmentField::TestHelper.get_files(element).map { |f| [f] }
+  table.diff! actual
+end
+
 When "I follow the {string} download link for {string}" do |filename, field|
   element = Bard::AttachmentField::TestHelper.find_field(page, field)
   # Click the download link inside attachment-file's shadow DOM

data/lib/bard/attachment_field/version.rb

@@ -2,6 +2,6 @@
 
 module Bard
   module AttachmentField
-    VERSION = "0.2.0"
+    VERSION = "0.2.2"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bard-attachment_field
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.2.2
 platform: ruby
 authors:
 - Micah Geisel
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2026-03-03 00:00:00.000000000 Z
+date: 2026-03-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activestorage