bard-attachment_field 0.1.0

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

@@ -0,0 +1,146 @@
+import DirectUploadController from "../attachment-file/direct-upload-controller"
+
+export default class FormController {
+  static instance(form) {
+    return form.inputAttachmentFormController ||= new FormController(form)
+  }
+
+  progressContainerTarget: HTMLElement
+  dialog: HTMLDialogElement
+
+  element: HTMLFormElement
+  progressTargetMap: {}
+  controllers: Array<DirectUploadController>
+  submitted: boolean
+  processing: boolean
+  errors: boolean
+
+  constructor(form) {
+    this.element = form
+    this.progressTargetMap = {}
+    this.controllers = []
+    this.submitted = false
+    this.processing = false
+    this.errors = 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>
+          </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 as any).Turbo?.session?.enabled)) {
+      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))
+    this.element.addEventListener("direct-upload:progress", event => this.progress(event))
+    this.element.addEventListener("direct-upload:error", event => this.error(event))
+    this.element.addEventListener("direct-upload:end", event => this.end(event))
+
+    this.element.addEventListener("attachment-file:remove", event => this.removeUploadedFile(event))
+  }
+
+  beforeUnload(event) {
+    if(this.processing) {
+      event.preventDefault()
+      return (event.returnValue = "")
+    }
+  }
+
+  submit(event) {
+    event.preventDefault()
+    this.submitted = true
+    this.startNextController()
+    if(this.processing) {
+      this.dialog.showModal()
+    }
+  }
+
+  startNextController() {
+    if(this.processing) return
+
+    const controller = this.controllers.shift()
+    if(controller) {
+      this.processing = true
+      this.setInputAttachmentsDisabled(true)
+      controller.start(error => {
+        if(error) {
+          this.setInputAttachmentsDisabled(false)
+        }
+        this.processing = false
+        this.startNextController()
+      })
+    } else {
+      this.submitForm()
+    }
+  }
+
+  submitForm() {
+    if(this.submitted) {
+      this.setInputAttachmentsDisabled(true)
+      window.setTimeout(() => { // allow other async tasks to complete
+        this.element.submit()
+      }, 10)
+    }
+  }
+
+  setInputAttachmentsDisabled(disabled: boolean) {
+    Array.from(this.element.querySelectorAll("input-attachment"))
+      .forEach((el: any) => {
+        el.disabled = disabled
+      })
+  }
+
+  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
+
+    this.controllers.push(controller)
+    this.startNextController()
+  }
+
+  start(event) {
+    this.progressTargetMap[event.detail.id].classList.remove("direct-upload--pending")
+  }
+
+  progress(event) {
+    const { id, progress } = event.detail
+    this.progressTargetMap[id].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
+  }
+
+  end(event) {
+    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()
+      delete this.progressTargetMap[id]
+    }
+  }
+}

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

@@ -0,0 +1,100 @@
+:host {
+  display: block;
+  padding: 25px;
+  color: var(--input-attachment-text-color, #000);
+  font-size: 13px;
+}
+
+:host *{
+  box-sizing: border-box;
+  position: relative;
+}
+
+file-drop {
+  cursor: pointer;
+  display: block;
+  outline-offset: -10px;
+  background: rgba(255,255,255, 0.25);
+  padding: 20px;
+  text-align: center;
+  transition: all 0.15s;
+  outline: 2px dashed rgba(0,0,0,0.25);
+  color: #444;
+  font-size: 14px;
+}
+
+file-drop.-full{
+  width: 100%;
+}
+
+p{
+  padding: 10px 20px;
+  margin: 0;
+}
+
+.-dragover{
+  background: rgba(255,255,255,0.5);
+  outline: 2px dashed rgba(0,0,0,0.25);
+}
+
+.media-preview {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+// UPLOADER
+
+.direct-upload-wrapper{
+  position: fixed;
+  z-index: 9999;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(#333, 0.9);
+}
+
+.direct-upload-content{
+  display: block;
+  background: #fcfcfc;
+  padding: 40px 60px 60px;
+  border-radius: 3px;
+  width: 60vw;
+}
+.direct-upload-content h3{
+  border-bottom: 2px solid #1f1f1f;
+  margin-bottom: 20px;
+}
+
+.separate-upload{
+  padding: 0 10px;
+  margin-top: 10px;
+  font-size: 0.9em;
+}
+
+.direct-upload--pending{
+  opacity: 0.6;
+}
+
+.direct-upload--complete {
+  opacity: 0.4;
+}
+
+.direct-upload--error{
+  border-color: red;
+}
+
+input[type=file][data-direct-upload-url][disabled]{
+  display: none;
+}
+
+:host.separate-upload{
+  padding: 0 10px;
+  margin-top: 10px;
+  font-size: 0.9em;
+}

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

@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('input-attachment', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<input-attachment></input-attachment>');
+
+    const element = await page.find('input-attachment');
+    expect(element).toHaveClass('hydrated');
+  });
+});

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

@@ -0,0 +1,37 @@
+
+// Mock rails-request-json to avoid ES module issues
+jest.mock('rails-request-json', () => ({
+  get: jest.fn(() => Promise.resolve({}))
+}));
+
+// Mock @botandrose/file-drop to avoid ES module issues
+jest.mock('@botandrose/file-drop', () => ({}));
+
+import { newSpecPage } from '@stencil/core/testing';
+import { InputAttachment } from './input-attachment';
+
+describe('input-attachment', () => {
+
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [InputAttachment],
+      html: `<form><input-attachment></input-attachment></form>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <input-attachment>
+        <mock:shadow-root>
+          <input type="file" style="opacity: 0.01; width: 1px; height: 1px; z-index: -999;">
+          <file-drop>
+            <p part="title">
+              <strong>Choose file </strong>
+              <span>or drag it here.</span>
+            </p>
+            <div class="media-preview">
+              <slot></slot>
+            </div>
+          </file-drop>
+        </mock:shadow-root>
+      </input-attachment>
+    `);
+  });
+});

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

@@ -0,0 +1,353 @@
+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'
+
+@Component({
+  tag: 'input-attachment',
+  styleUrl: 'input-attachment.css',
+  shadow: true,
+  formAssociated: true,
+})
+export class InputAttachment {
+  @Element() el: HTMLElement
+
+  @Prop() name: string
+  @Prop() directupload: string
+  @Prop() multiple: boolean = false
+
+  @Prop() required: boolean = false
+  @Prop() accepts: string
+  @Prop() max: number
+  @Prop() preview: boolean = true
+  @Prop() disabled: boolean = false
+
+
+  form: HTMLFormElement
+  internals: ElementInternals
+  fileInput: HTMLInputElement
+  _files: Array<any> = []
+
+  constructor() {
+    this.internals = (this.el as any).attachInternals()
+  }
+
+  componentWillLoad() {
+    this.form = this.internals.form
+    if (this.form) {
+      this.form.addEventListener("reset", () => this.reset())
+      FormController.instance(this.form)
+    }
+
+    // Note: Server-rendered children may not be available yet during componentWillLoad
+    // when using lazy-loaded Stencil components. We'll check again in componentDidRender.
+    const existingFiles = Array.from(this.el.children).filter(e => e.tagName == "ATTACHMENT-FILE");
+    if(existingFiles.length > 0) this.files = existingFiles
+
+    // Restore from localStorage BEFORE setting initial validity (which triggers saveToLocalStorage)
+    this.restoreFromLocalStorage()
+
+    // Set initial validity state (only if we have files from above)
+    if(this.files.length > 0) this.updateFormValue()
+  }
+
+  componentDidLoad() {
+    // Clear persistence data when form is submitted
+    if (this.form) {
+      this.form.addEventListener('submit', () => this.clearLocalStorage())
+    }
+
+    // Listen for file input changes directly (JSX onChange doesn't reliably work in shadow DOM)
+    this.fileInput?.addEventListener('change', this.handleFileInputChange)
+  }
+
+  get localStorageKey() {
+    if (!this.form || !this.name) return null
+    const formId = this.form.id || this.form.action || 'form'
+    return `input-attachment:${formId}:${this.name}`
+  }
+
+  saveToLocalStorage() {
+    const key = this.localStorageKey
+    if (!key) return
+
+    const data = this.persistenceData
+    if (data.length > 0) {
+      localStorage.setItem(key, JSON.stringify(data))
+    } else {
+      localStorage.removeItem(key)
+    }
+  }
+
+  restoreFromLocalStorage() {
+    const key = this.localStorageKey
+    if (!key || this.files.length > 0) return
+
+    try {
+      const stored = localStorage.getItem(key)
+      if (stored) {
+        const data = JSON.parse(stored)
+        if (Array.isArray(data) && data.length > 0) {
+          this.restoreFromPersistence(data)
+        }
+      }
+    } catch (e) {
+      // Invalid JSON, ignore
+    }
+  }
+
+  clearLocalStorage() {
+    const key = this.localStorageKey
+    if (key) {
+      localStorage.removeItem(key)
+    }
+  }
+
+  // Methods
+
+  get files() {
+    return this._files
+  }
+
+  set files(val) {
+    this._files = val
+    if(!this.multiple) this._files = this._files.slice(-1)
+    forceUpdate(this.el)
+    this.fireChangeEvent()
+  }
+
+  get value() {
+    return this.files.map(e => e.value)
+  }
+
+  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,
+      }))
+    }
+  }
+
+  // For form-persistence: store complete attachment data (not just signed_ids)
+  get persistenceData() {
+    return this.files.map(f => ({
+      value: f.value,
+      filename: f.filename,
+      src: f.src,
+      state: f.state,
+      percent: f.percent,
+      size: f.size,
+      filetype: f.filetype,
+    }))
+  }
+
+  restoreFromPersistence(data: any[]) {
+    if (!Array.isArray(data) || data.length === 0) return
+
+    this.files = data.map(item => {
+      const attachmentFile = document.createElement('attachment-file') as any
+      attachmentFile.name = this.name
+      attachmentFile.preview = this.preview
+      attachmentFile.value = item.value
+      attachmentFile.filename = item.filename
+      attachmentFile.src = item.src
+      attachmentFile.state = item.state || 'complete'
+      attachmentFile.percent = item.percent || 100
+      attachmentFile.size = item.size
+      attachmentFile.filetype = item.filetype
+      return attachmentFile
+    })
+    requestAnimationFrame(() => this.componentDidRender())
+  }
+
+  updateFormValue() {
+    if (!this.name || !this.internals?.setFormValue) return
+    const formData = new FormData()
+    const values = this.value.filter(v => v) // filter out empty values
+    if (this.multiple) {
+      // For has_many_attached: append each signed_id separately
+      values.forEach(signedId => formData.append(this.name, signedId))
+      // If empty, append empty string so Rails gets an empty array
+      if (values.length === 0) formData.append(this.name, '')
+    } else {
+      // For has_one_attached: set single value (or empty string if none)
+      formData.set(this.name, values[0] || '')
+    }
+    this.internals.setFormValue(formData)
+
+    // Save to localStorage for persistence across page reloads
+    this.saveToLocalStorage()
+
+    // Update validity state - check for required and child validation errors
+    if (this.required && this.files.length === 0) {
+      this.internals.setValidity({ valueMissing: true }, "Please select a file.", this.fileInput)
+    } else {
+      // Check if any child attachment-file has validation errors
+      const childErrors = this.files
+        .map(f => f.validationError)
+        .filter(e => e && e.length > 0)
+      if (childErrors.length > 0) {
+        this.internals.setValidity({ customError: true }, childErrors[0], this.fileInput)
+      } else {
+        this.internals.setValidity({})
+      }
+    }
+  }
+
+  reset() {
+    this.value = []
+    this.clearLocalStorage()
+  }
+
+  handleFileInputChange = () => {
+    if (!this.fileInput?.files?.length) return
+    this.addFiles(this.fileInput.files)
+    this.fileInput.value = null
+  }
+
+  handleDrop = (event: DragEvent) => {
+    event.preventDefault()
+    if (this.isDisabled) return
+    if (event.dataTransfer?.files?.length) {
+      this.addFiles(event.dataTransfer.files)
+    }
+  }
+
+  @Listen("attachment-file:remove")
+  removeUploadedFile(event) {
+    arrayRemove(this.files, event.detail)
+    this.files = this.files
+  }
+
+  @Listen("attachment-file:validation")
+  handleChildValidation(_event) {
+    // Re-check form validity when a child's validation state changes
+    this.updateFormValue()
+  }
+
+  @Listen("direct-upload:end")
+  fireChangeEvent() {
+    requestAnimationFrame(() => {
+      this.updateFormValue()
+      this.el.dispatchEvent(new Event("change", { bubbles: true }))
+    })
+  }
+
+  // Rendering
+
+  get isDisabled() {
+    return this.disabled || !!this.el.closest('fieldset[disabled]')
+  }
+
+  render() {
+    return (
+      <Host>
+        <input
+          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'
+          }}
+        />
+        <file-drop onClick={() => this.fileInput?.click()} onDrop={this.handleDrop}>
+          <p part="title">
+            <strong>Choose {this.multiple ? "files" : "file"} </strong>
+            <span>or drag {this.multiple ? "them" : "it"} here.</span>
+          </p>
+
+          <div class={`media-preview ${this.multiple ? '-stacked' : ''}`}>
+            <slot></slot>
+          </div>
+        </file-drop>
+      </Host>
+    )
+  }
+
+  componentDidRender() {
+    // Check for server-rendered children that we haven't captured yet
+    // This handles the case where children aren't available in componentWillLoad
+    if (this.files.length === 0) {
+      const existingFiles = Array.from(this.el.children).filter(e => e.tagName == "ATTACHMENT-FILE");
+      if (existingFiles.length > 0) {
+        this._files = existingFiles as any[]
+      }
+    }
+
+    const wrapper = document.createElement("div")
+    this.files.forEach(file => wrapper.appendChild(file))
+
+    let needsUpdate = false
+    if (wrapper.children.length !== this.el.children.length) {
+      needsUpdate = true
+    } else {
+      for (let i = 0; i < wrapper.children.length; i++) {
+        if (wrapper.children[i] !== this.el.children[i]) {
+          needsUpdate = true
+          break
+        }
+      }
+    }
+
+    if (needsUpdate) {
+      while (this.el.firstChild) {
+        this.el.removeChild(this.el.firstChild)
+      }
+      this.el.appendChild(wrapper)
+    }
+
+    this.updateFormValue()
+  }
+
+  // Test helper - adds files programmatically with proper lifecycle
+  addFiles(files: FileList | File[]) {
+    const fileArray = Array.from(files)
+    fileArray.forEach(file => {
+      const attachmentFile = document.createElement('attachment-file') as any
+      attachmentFile.name = this.name
+      attachmentFile.preview = this.preview
+      attachmentFile.url = this.directupload
+      attachmentFile.accepts = this.accepts
+      attachmentFile.max = this.max
+      attachmentFile.file = file
+      this._files.push(attachmentFile)
+    })
+    this.files = this._files
+    // Manually trigger DOM update since Stencil's state change may not re-render
+    // when called from external JavaScript
+    requestAnimationFrame(() => this.componentDidRender())
+  }
+
+  // Validations
+
+  checkValidity() {
+    if (this.required && this.files.length === 0) {
+      return false
+    }
+    return true
+  }
+
+  setCustomValidity(msg: string) {
+    this.internals.setValidity(msg ? { customError: true } : {}, msg, this.fileInput)
+  }
+
+  reportValidity() {
+    return this.internals.reportValidity()
+  }
+
+  get validationMessage() {
+    return this.internals.validationMessage
+  }
+}

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

@@ -0,0 +1,45 @@
+# input-attachment
+
+
+
+<!-- Auto Generated Below -->
+
+
+## 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`     |
+
+
+## Shadow Parts
+
+| Part      | Description |
+| --------- | ----------- |
+| `"title"` |             |
+
+
+## Dependencies
+
+### Depends on
+
+- [attachment-file](../attachment-file)
+
+### Graph
+```mermaid
+graph TD;
+  input-attachment --> attachment-file
+  attachment-file --> attachment-preview
+  style input-attachment fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*