refactor(Uploader): Extend HTMLElement directly

Dropping the AlchemyHTMLElement base class avoids the constructor-time
innerHTML capture and attribute processing. The file input and dropzone
listeners, plus the self-registered Alchemy.upload.successful handler,
are now wired in connectedCallback.

The external dropzone element's listeners are removed in
disconnectedCallback, since they would otherwise hold closures that
keep the Uploader alive after removal. The dropzone attribute is
exposed via a plain getter.

FileUpload and Progress receive the same treatment. FileUpload now
sets its initial "in-progress" status through the status setter in
initialize(), so a status that is set before the element is appended
(e.g. status = "failed" in tests) is no longer clobbered when the
element connects. Progress pulls its template out into a module-level
function and uses private methods and fields for the internals that
are not part of the public contract.

Author: tvdeyen

app/assets/builds/alchemy/alchemy_admin.min.js

@@ -3,36 +3,75 @@
  * @property {string} name
  * @property {number} size
  */
-import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
 import { Progress } from "alchemy_admin/components/uploader/progress"
 import { FileUpload } from "alchemy_admin/components/uploader/file_upload"
 import { translate } from "alchemy_admin/i18n"
 import { getToken } from "alchemy_admin/utils/ajax"
 
-export class Uploader extends AlchemyHTMLElement {
-  static properties = {
-    dropzone: { default: false }
-  }
+export class Uploader extends HTMLElement {
+  #dropzoneElement = null
+  #isDraggedOver = false
 
-  connected() {
-    this.fileInput.addEventListener("change", (event) => {
-      this._uploadFiles(Array.from(event.target.files))
-    })
+  connectedCallback() {
+    this.fileInput.addEventListener("change", this.#onFileInputChange)
     if (this.dropzone) {
-      this._dragAndDropBehavior()
+      this.#setupDropZone()
     }
     this.addEventListener("Alchemy.upload.successful", this)
   }
 
+  disconnectedCallback() {
+    this.fileInput?.removeEventListener("change", this.#onFileInputChange)
+    if (this.#dropzoneElement) {
+      this.#dropzoneElement.removeEventListener(
+        "dragleave",
+        this.#onDropzoneDragleave
+      )
+      this.#dropzoneElement.removeEventListener("drop", this.#onDropzoneDrop)
+      this.#dropzoneElement.removeEventListener(
+        "dragover",
+        this.#onDropzoneDragover
+      )
+      this.#dropzoneElement = null
+    }
+  }
+
   handleEvent(evt) {
     switch (evt.type) {
       case "Alchemy.upload.successful":
-        this._handleUploadComplete()
+        this.#handleUploadComplete()
         break
     }
   }
 
-  _handleUploadComplete() {
+  #onFileInputChange = (event) => {
+    this.uploadFiles(Array.from(event.target.files))
+  }
+
+  #toggleDropzoneClass = (enabled) => {
+    if (this.#isDraggedOver !== enabled) {
+      this.#isDraggedOver = enabled
+      this.#dropzoneElement.classList.toggle("dragover")
+    }
+  }
+
+  #onDropzoneDragleave = () => this.#toggleDropzoneClass(false)
+
+  #onDropzoneDrop = async (event) => {
+    event.preventDefault()
+    this.#toggleDropzoneClass(false)
+
+    const files = [...event.dataTransfer.items].map((item) => item.getAsFile())
+
+    this.uploadFiles(files)
+  }
+
+  #onDropzoneDragover = (event) => {
+    event.preventDefault() // dragover has to be disabled to use the custom drop event
+    this.#toggleDropzoneClass(true)
+  }
+
+  #handleUploadComplete() {
     setTimeout(() => {
       const url = this.redirectUrl
       const turboFrame = this.closest("turbo-frame")
@@ -53,42 +92,22 @@ export class Uploader extends AlchemyHTMLElement {
    * add dragover class to indicate, if the file is draggable
    * @private
    */
-  _dragAndDropBehavior() {
-    const dropzoneElement = document.querySelector(this.dropzone)
-    let isDraggedOver = false
-
-    const toggleDropzoneClass = (enabled) => {
-      if (isDraggedOver !== enabled) {
-        isDraggedOver = enabled
-        dropzoneElement.classList.toggle("dragover")
-      }
-    }
+  #setupDropZone() {
+    this.#dropzoneElement = document.querySelector(this.dropzone)
+    if (!this.#dropzoneElement) return
 
-    dropzoneElement.addEventListener("dragleave", () =>
-      toggleDropzoneClass(false)
+    this.#dropzoneElement.addEventListener(
+      "dragleave",
+      this.#onDropzoneDragleave
     )
-    dropzoneElement.addEventListener("drop", async (event) => {
-      event.preventDefault()
-      toggleDropzoneClass(false)
-
-      const files = [...event.dataTransfer.items].map((item) =>
-        item.getAsFile()
-      )
-
-      this._uploadFiles(files)
-    })
-
-    dropzoneElement.addEventListener("dragover", (event) => {
-      event.preventDefault() // dragover has to be disabled to use the custom drop event
-      toggleDropzoneClass(true)
-    })
+    this.#dropzoneElement.addEventListener("drop", this.#onDropzoneDrop)
+    this.#dropzoneElement.addEventListener("dragover", this.#onDropzoneDragover)
   }
 
   /**
    * @param {File[]} files
-   * @private
    */
-  _uploadFiles(files) {
+  uploadFiles(files) {
     // prepare file progress bars and server request
     let fileUploadCount = 0
 
@@ -102,21 +121,21 @@ export class Uploader extends AlchemyHTMLElement {
         fileUpload.errorMessage = translate("Maximum number of files exceeded")
       } else if (fileUpload.valid) {
         fileUploadCount++
-        this._submitFile(request, file)
+        this.#submitFile(request, file)
       }
 
       return fileUpload
     })
 
-    this._createProgress(fileUploads)
+    this.#createProgress(fileUploads)
   }
 
   /**
    * @param {XMLHttpRequest} request
    * @param {File} file
    * @private
    */
-  _submitFile(request, file) {
+  #submitFile(request, file) {
     const form = this.querySelector("form")
     const formData = new FormData(form)
     formData.set(this.fileInput.name, file)
@@ -132,20 +151,26 @@ export class Uploader extends AlchemyHTMLElement {
    * @param {FileUpload[]} fileUploads
    * @private
    */
-  _createProgress(fileUploads) {
+  #createProgress(fileUploads) {
     if (this.uploadProgress) {
       this.uploadProgress.cancel()
       document.body.removeChild(this.uploadProgress)
     }
     this.uploadProgress = new Progress()
     this.uploadProgress.initialize(fileUploads)
     this.uploadProgress.onComplete = (status) => {
-      this.dispatchCustomEvent(`upload.${status}`)
+      this.dispatchEvent(
+        new CustomEvent(`Alchemy.upload.${status}`, { bubbles: true })
+      )
     }
 
     document.body.append(this.uploadProgress)
   }
 
+  get dropzone() {
+    return this.getAttribute("dropzone")
+  }
+
   /**
    * @returns {HTMLInputElement}
    */

app/assets/builds/alchemy/alchemy_admin.min.js.map

@@ -1,38 +1,22 @@
-import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
 import { formatFileSize } from "alchemy_admin/utils/format"
 import { translate } from "alchemy_admin/i18n"
 import { growl } from "alchemy_admin/growler"
 
-export class FileUpload extends AlchemyHTMLElement {
-  constructor() {
-    super()
-
-    this.file = null
-    this.request = null
-
-    this.progressEventLoaded = 0
-    this.progressEventTotal = 0
-    this.className = "in-progress"
-    this.valid = true
-    this.value = 0
-  }
-
-  /**
-   * Initialize the component with file and request
-   * @param {File} file
-   * @param {XMLHttpRequest} request
-   */
-  initialize(file, request) {
-    this.file = file
-    this.request = request
-    this.progressEventTotal = file ? file.size : 0
-
-    this._validateFile()
-    this._addRequestEventListener()
-  }
-
-  render() {
-    return `
+export class FileUpload extends HTMLElement {
+  // public — used by callers (Uploader, Progress, tests)
+  file = null
+  request = null
+  progressEventLoaded = 0
+  progressEventTotal = 0
+
+  // private — backing state for getters/setters
+  #valid = true
+  #value = 0
+  #status = undefined
+  #errorMessage = ""
+
+  connectedCallback() {
+    this.innerHTML = `
       <sl-progress-bar value="${this.value}"></sl-progress-bar>
       <div class="description">
         <span class="file-name">${this.file?.name}</span>
@@ -45,9 +29,7 @@ export class FileUpload extends AlchemyHTMLElement {
         </button>
       </sl-tooltip>
     `
-  }
 
-  afterRender() {
     this.querySelector("button").addEventListener("click", () => this.cancel())
 
     if (this.file?.type.includes("image")) {
@@ -61,6 +43,21 @@ export class FileUpload extends AlchemyHTMLElement {
     }
   }
 
+  /**
+   * Initialize the component with file and request
+   * @param {File} file
+   * @param {XMLHttpRequest} request
+   */
+  initialize(file, request) {
+    this.file = file
+    this.request = request
+    this.progressEventTotal = file ? file.size : 0
+    this.status = "in-progress"
+
+    this.#validateFile()
+    this.#addRequestEventListener()
+  }
+
   /**
    * cancel the upload
    */
@@ -72,11 +69,18 @@ export class FileUpload extends AlchemyHTMLElement {
     }
   }
 
+  /**
+   * Dispatches a custom event with given name, namespaced under `Alchemy.`.
+   * @param {string} name The name of the custom event
+   */
+  dispatchCustomEvent(name) {
+    this.dispatchEvent(new CustomEvent(`Alchemy.${name}`, { bubbles: true }))
+  }
+
   /**
    * validate given file with the `Alchemy.uploader_defaults` - configuration
-   * @private
    */
-  _validateFile() {
+  #validateFile() {
     const config = Alchemy.uploader_defaults
     const maxFileSize = config.file_size_limit * Math.pow(1024, 2) // in Byte
     let errorMessage = undefined
@@ -107,9 +111,8 @@ export class FileUpload extends AlchemyHTMLElement {
 
   /**
    * register event listeners to react on request changes
-   * @private
    */
-  _addRequestEventListener() {
+  #addRequestEventListener() {
     // prevent errors if the component will be called without a request - object
     if (!this.request) {
       return
@@ -149,14 +152,14 @@ export class FileUpload extends AlchemyHTMLElement {
    * @returns {string}
    */
   get errorMessage() {
-    return this._errorMessage || ""
+    return this.#errorMessage || ""
   }
 
   /**
    * @param {string} message
    */
   set errorMessage(message) {
-    this._errorMessage = message
+    this.#errorMessage = message
     const errorMessageContainer = this.querySelector(".error-message")
     if (errorMessageContainer) {
       errorMessageContainer.textContent = message
@@ -215,14 +218,14 @@ export class FileUpload extends AlchemyHTMLElement {
    * @returns {string}
    */
   get status() {
-    return this._status
+    return this.#status
   }
 
   /**
    * @param {string} status
    */
   set status(status) {
-    this._status = status
+    this.#status = status
     this.className = status
 
     this.progressElement?.toggleAttribute(
@@ -235,14 +238,14 @@ export class FileUpload extends AlchemyHTMLElement {
    * @returns {boolean}
    */
   get valid() {
-    return this._valid
+    return this.#valid
   }
 
   /**
    * @param {boolean} isValid
    */
   set valid(isValid) {
-    this._valid = isValid
+    this.#valid = isValid
     this.classList.toggle("invalid", !isValid)
   }
 
@@ -251,14 +254,14 @@ export class FileUpload extends AlchemyHTMLElement {
    * @returns {number}
    */
   get value() {
-    return this._value
+    return this.#value
   }
 
   /**
    * @param {number} value
    */
   set value(value) {
-    this._value = value
+    this.#value = value
     if (this.progressElement) {
       this.progressElement.value = value
     }