hakumi_components 0.1.3.pre

data/app/javascript/hakumi_components/controllers/hakumi/upload_controller.js

@@ -0,0 +1,1101 @@
+import RegistryController from "../base/registry_controller.js"
+
+
+const ALLOWED_URL_PROTOCOLS = ["http:", "https:", "data:"]
+
+
+const VALID_STATUSES = ["ready", "uploading", "done", "error", "aborted"]
+
+export default class extends RegistryController {
+  static targets = ["input", "list", "dropzone", "inlineTrigger", "avatar", "avatarWrapper"]
+
+  static values = {
+    action: String,
+    name: String,
+    accept: String,
+    multiple: Boolean,
+    maxCount: Number,
+    maxSize: Number,
+    disabled: Boolean,
+    listType: String,
+    showUploadList: Boolean,
+    drag: Boolean,
+    headers: Object,
+    data: Object,
+    defaultFileList: Array,
+    withCredentials: Boolean,
+    autoUpload: { type: Boolean, default: true },
+    inlineTrigger: { type: Boolean, default: false },
+    avatarShape: String,
+    avatarSize: Number,
+    avatarIcon: String
+  }
+
+  
+  setup() {
+    this.fileList = this.normalizeFileList(this.defaultFileListValue || [])
+    this.renderFileList()
+  }
+
+  
+  teardown() {
+
+    this.fileList.forEach((record) => {
+      if (record.xhr) {
+        record.xhr.abort()
+      }
+      if (record.blobUrl && record.url) {
+        URL.revokeObjectURL(record.url)
+      }
+    })
+  }
+
+  
+  registerApi() {
+    const api = {
+
+      upload: (file) => this.upload(file),
+      uploadAll: () => this.uploadAll(),
+      remove: (file) => this.remove(file),
+      removeAll: () => this.removeAll(),
+      getFileList: () => this.getFileList(),
+      setFileList: (list) => this.setFileList(list),
+      abort: (file) => this.abort(file),
+      abortAll: () => this.abortAll(),
+
+
+      addFile: (fileData) => this.addFile(fileData),
+      setProgress: (uid, percent) => this.setProgress(uid, percent),
+      setStatus: (uid, status, error) => this.setStatus(uid, status, error),
+      simulateUpload: (uid, options) => this.simulateUpload(uid, options),
+
+
+      openPreview: (file) => this.openPreview(file),
+      getPreviewItems: () => this.getPreviewItems()
+    }
+
+    this.element.hakumiComponent = {
+      name: "upload",
+      version: 1,
+      singleton: false,
+      api
+    }
+  }
+
+
+
+
+
+  
+
+  addFile(fileData) {
+    if (!fileData || typeof fileData !== "object") return null
+
+    const record = {
+      uid: `upload_${Date.now()}_${Math.random().toString(16).slice(2)}`,
+      name: this.sanitizeFileName(fileData.name || "file"),
+      status: this.validateStatus(fileData.status) || "ready",
+      url: this.sanitizeUrl(fileData.url),
+      percent: this.clampPercent(fileData.percent || 0),
+      size: typeof fileData.size === "number" ? fileData.size : null,
+      error: typeof fileData.error === "string" ? fileData.error : null
+    }
+
+
+    if (this.hasMaxCountValue && this.fileList.length >= this.maxCountValue) {
+      return null
+    }
+
+    this.fileList.push(record)
+    this.renderFileList()
+    this.dispatchChange(record)
+
+    return record
+  }
+
+  
+
+  setProgress(uid, percent) {
+    const record = this.resolveRecord(uid)
+    if (!record) return
+
+    record.percent = this.clampPercent(percent)
+    this.renderFileList()
+    this.dispatchProgress(record, null)
+  }
+
+  
+
+  setStatus(uid, status, error) {
+    const record = this.resolveRecord(uid)
+    if (!record) return
+
+    const validStatus = this.validateStatus(status)
+    if (!validStatus) return
+
+    record.status = validStatus
+
+    if (validStatus === "error" && error) {
+      record.error = String(error).slice(0, 500)
+    }
+
+    if (validStatus === "done") {
+      record.percent = 100
+    }
+
+    this.renderFileList()
+    this.dispatchChange(record)
+
+    if (validStatus === "done") {
+      this.dispatchSuccess(record)
+    } else if (validStatus === "error") {
+      this.dispatchError(record, record.error)
+    }
+  }
+
+  
+
+  simulateUpload(uid, options = {}) {
+    const record = this.resolveRecord(uid)
+    if (!record) return Promise.reject(new Error("File not found"))
+
+    const duration = Math.min(Math.max(options.duration || 2000, 500), 30000)
+    const shouldSucceed = options.success !== false
+
+    return new Promise((resolve) => {
+      record.status = "uploading"
+      record.percent = 0
+      this.renderFileList()
+      this.dispatchChange(record)
+
+      const startTime = Date.now()
+      const animate = () => {
+        const elapsed = Date.now() - startTime
+        const progress = Math.min((elapsed / duration) * 100, 100)
+
+        record.percent = Math.round(progress)
+        this.renderFileList()
+        this.dispatchProgress(record, null)
+
+        if (progress < 100) {
+          requestAnimationFrame(animate)
+        } else {
+
+          if (shouldSucceed) {
+            record.status = "done"
+            this.dispatchSuccess(record)
+          } else {
+            record.status = "error"
+            record.error = options.error || "Upload failed"
+            this.dispatchError(record, record.error)
+          }
+          this.renderFileList()
+          this.dispatchChange(record)
+          resolve(record)
+        }
+      }
+
+      requestAnimationFrame(animate)
+    })
+  }
+
+
+
+
+
+  
+
+  sanitizeFileName(name) {
+    if (typeof name !== "string") return "file"
+
+    return name
+      .replace(/[<>:"\/\\|?*\x00-\x1f]/g, "_")
+      .slice(0, 255)
+  }
+
+  
+
+  sanitizeUrl(url) {
+    if (!url || typeof url !== "string") return null
+
+    try {
+
+      if (url.startsWith("data:")) {
+
+        if (url.startsWith("data:image/")) {
+          return url.slice(0, 1024 * 100)
+        }
+        return null
+      }
+
+      const parsed = new URL(url)
+      if (ALLOWED_URL_PROTOCOLS.includes(parsed.protocol)) {
+        return parsed.href
+      }
+    } catch {
+
+    }
+
+    return null
+  }
+
+  
+
+  validateStatus(status) {
+    if (typeof status !== "string") return null
+    const normalized = status.toLowerCase()
+    return VALID_STATUSES.includes(normalized) ? normalized : null
+  }
+
+  
+
+  clampPercent(percent) {
+    const num = Number(percent)
+    if (isNaN(num)) return 0
+    return Math.max(0, Math.min(100, Math.round(num)))
+  }
+
+  
+
+  validateFileType(file) {
+    if (!this.acceptValue) return true
+
+    const acceptTypes = this.acceptValue.split(",").map((t) => t.trim().toLowerCase())
+    const fileName = file.name.toLowerCase()
+    const fileType = file.type.toLowerCase()
+
+    return acceptTypes.some((accept) => {
+      if (accept.startsWith(".")) {
+        return fileName.endsWith(accept)
+      } else if (accept.endsWith("/*")) {
+        return fileType.startsWith(accept.slice(0, -2))
+      } else {
+        return fileType === accept
+      }
+    })
+  }
+
+  getCsrfToken() {
+    const meta = document.querySelector('meta[name="csrf-token"]')
+    return meta ? meta.getAttribute("content") : null
+  }
+
+
+
+
+
+  triggerInput(event) {
+    if (event) event.preventDefault()
+    if (this.disabledValue) return
+    if (this.hasInputTarget) this.inputTarget.click()
+  }
+
+  handleInput(event) {
+    if (this.disabledValue) return
+    const files = Array.from(event.target.files || [])
+
+
+    if (this.listTypeValue === "avatar" && files.length > 0) {
+      this.handleAvatarUpload(files[0])
+    } else {
+      this.addFiles(files)
+    }
+
+    event.target.value = ""
+  }
+
+  dragOver(event) {
+    if (this.disabledValue) return
+    event.preventDefault()
+    if (this.hasDropzoneTarget) this.dropzoneTarget.classList.add("hakumi-upload-drag-hover")
+  }
+
+  dragLeave(event) {
+    if (this.disabledValue) return
+    event.preventDefault()
+    if (this.hasDropzoneTarget) this.dropzoneTarget.classList.remove("hakumi-upload-drag-hover")
+  }
+
+  drop(event) {
+    if (this.disabledValue) return
+    event.preventDefault()
+    if (this.hasDropzoneTarget) this.dropzoneTarget.classList.remove("hakumi-upload-drag-hover")
+
+    const files = Array.from(event.dataTransfer?.files || [])
+    this.addFiles(files)
+  }
+
+  addFiles(files) {
+    if (!files.length) return
+
+    const maxCount = this.hasMaxCountValue ? this.maxCountValue : null
+    const remaining = maxCount ? Math.max(maxCount - this.fileList.length, 0) : files.length
+    const acceptedFiles = files.slice(0, remaining)
+    const filesToUpload = []
+
+    acceptedFiles.forEach((file) => {
+      const record = this.buildFileRecord(file)
+
+
+      if (!this.validateFileType(file)) {
+        record.status = "error"
+        record.error = "File type not accepted"
+        this.fileList.push(record)
+        this.dispatchError(record)
+        return
+      }
+
+
+      if (this.hasMaxSizeValue && file.size > this.maxSizeValue) {
+        record.status = "error"
+        record.error = "File exceeds max size"
+        this.fileList.push(record)
+        this.dispatchError(record)
+      } else {
+        this.fileList.push(record)
+        this.dispatchChange(record)
+        filesToUpload.push(record)
+      }
+    })
+
+    this.renderFileList()
+
+
+    const isDemoMode = !this.actionValue || this.actionValue === "#"
+    if (this.autoUploadValue && !isDemoMode && filesToUpload.length > 0) {
+      filesToUpload.forEach((record) => this.performUpload(record))
+    }
+  }
+
+  upload(file) {
+    if (this.disabledValue) return
+    const record = this.resolveRecord(file)
+    if (!record || record.status === "uploading") return
+    this.performUpload(record)
+  }
+
+  uploadAll() {
+    if (this.disabledValue) return
+    this.fileList.forEach((record) => {
+      if (["ready", "error"].includes(record.status)) {
+        this.performUpload(record)
+      }
+    })
+  }
+
+  remove(file) {
+    const record = this.resolveRecord(file)
+    if (!record) return
+
+
+    if (record.xhr) {
+      record.xhr.abort()
+    }
+
+
+    if (record.blobUrl && record.url) {
+      URL.revokeObjectURL(record.url)
+    }
+
+    this.fileList = this.fileList.filter((item) => item.uid !== record.uid)
+    this.renderFileList()
+    this.dispatchChange(record)
+  }
+
+  removeFromEvent(event) {
+    const uid = event.currentTarget?.dataset?.uid
+    this.remove(uid)
+  }
+
+  previewFromEvent(event) {
+    const uid = event.currentTarget?.dataset?.uid
+    if (uid) this.openPreview(uid)
+  }
+
+  removeAll() {
+
+    this.fileList.forEach((record) => {
+      if (record.xhr) record.xhr.abort()
+      if (record.blobUrl && record.url) URL.revokeObjectURL(record.url)
+    })
+
+    this.fileList = []
+    this.renderFileList()
+    this.dispatchChange(null)
+  }
+
+  getFileList() {
+
+    return this.fileList.map((record) => ({ ...record }))
+  }
+
+  setFileList(list) {
+
+    this.fileList.forEach((record) => {
+      if (record.xhr) record.xhr.abort()
+      if (record.blobUrl && record.url) URL.revokeObjectURL(record.url)
+    })
+
+    this.fileList = this.normalizeFileList(list || [])
+    this.renderFileList()
+    this.dispatchChange(null)
+  }
+
+  abort(file) {
+    const record = this.resolveRecord(file)
+    if (!record || !record.xhr) return
+    record.xhr.abort()
+    record.status = "aborted"
+    this.renderFileList()
+    this.dispatchError(record, "aborted")
+    this.dispatchChange(record)
+  }
+
+  abortAll() {
+    this.fileList.forEach((record) => {
+      if (record.xhr) record.xhr.abort()
+      if (record.status === "uploading") record.status = "aborted"
+    })
+    this.renderFileList()
+    this.dispatchError(null, "aborted")
+    this.dispatchChange(null)
+  }
+
+  performUpload(record) {
+    if (!this.actionValue) return
+    if (!record.raw) return
+
+
+    if (this.actionValue === "#") {
+      this.simulateUpload(record.uid, { duration: 1500, success: true })
+      return
+    }
+
+    record.status = "uploading"
+    record.percent = 0
+    this.renderFileList()
+    this.dispatchChange(record)
+
+    const xhr = new XMLHttpRequest()
+    record.xhr = xhr
+
+
+    if (this.withCredentialsValue) {
+      xhr.withCredentials = true
+    }
+
+    xhr.upload.addEventListener("progress", (event) => {
+      if (!event.lengthComputable) return
+      record.percent = Math.round((event.loaded / event.total) * 100)
+      this.renderFileList()
+      this.dispatchProgress(record, event)
+    })
+
+    xhr.addEventListener("load", () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        record.status = "done"
+        record.percent = 100
+        try {
+          record.response = JSON.parse(xhr.response)
+        } catch {
+          record.response = xhr.response
+        }
+        this.renderFileList()
+        this.dispatchSuccess(record)
+        this.dispatchChange(record)
+      } else {
+        record.status = "error"
+        record.error = xhr.statusText || "Upload failed"
+        this.renderFileList()
+        this.dispatchError(record)
+        this.dispatchChange(record)
+      }
+    })
+
+    xhr.addEventListener("error", () => {
+      record.status = "error"
+      record.error = "Network error"
+      this.renderFileList()
+      this.dispatchError(record)
+      this.dispatchChange(record)
+    })
+
+    xhr.addEventListener("abort", () => {
+      record.status = "aborted"
+      this.renderFileList()
+      this.dispatchError(record, "aborted")
+      this.dispatchChange(record)
+    })
+
+    xhr.open("POST", this.actionValue)
+
+
+    const csrfToken = this.getCsrfToken()
+    if (csrfToken) {
+      xhr.setRequestHeader("X-CSRF-Token", csrfToken)
+    }
+
+
+    const headers = this.ensureObject(this.headersValue)
+    if (headers) {
+      Object.entries(headers).forEach(([key, value]) => {
+
+        const lowerKey = key.toLowerCase()
+        if (!["cookie", "host", "origin", "referer"].includes(lowerKey)) {
+          xhr.setRequestHeader(key, value)
+        }
+      })
+    }
+
+    const formData = new FormData()
+    const extraData = this.ensureObject(this.dataValue)
+    if (extraData) {
+      Object.entries(extraData).forEach(([key, value]) => {
+        formData.append(key, value)
+      })
+    }
+
+    formData.append(this.nameValue || "file", record.raw)
+    xhr.send(formData)
+  }
+
+  normalizeFileList(list) {
+    return (list || []).map((item, index) => {
+      if (item instanceof File) return this.buildFileRecord(item)
+
+      const record = {
+        uid: item.uid || `upload_${Date.now()}_${index}`,
+        name: this.sanitizeFileName(item.name || item.filename || "file"),
+        status: this.validateStatus(item.status) || "ready",
+        url: this.sanitizeUrl(item.url),
+        percent: this.clampPercent(item.percent || 0),
+        size: item.size,
+        response: item.response,
+        error: typeof item.error === "string" ? item.error : null,
+        raw: item.raw || item.file
+      }
+
+      return record
+    })
+  }
+
+  buildFileRecord(file) {
+    const record = {
+      uid: `upload_${Date.now()}_${Math.random().toString(16).slice(2)}`,
+      name: this.sanitizeFileName(file.name),
+      status: "ready",
+      percent: 0,
+      size: file.size,
+      raw: file
+    }
+
+
+    if (this.shouldGeneratePreview(file)) {
+      record.url = URL.createObjectURL(file)
+      record.blobUrl = true
+    }
+
+    return record
+  }
+
+  
+
+  shouldGeneratePreview(file) {
+    if (!["picture", "picture-card"].includes(this.listTypeValue)) return false
+    if (!file.type.startsWith("image/")) return false
+
+    if (file.size > 10 * 1024 * 1024) return false
+    return true
+  }
+
+  resolveRecord(fileOrUid) {
+    if (!fileOrUid) return null
+
+    if (fileOrUid instanceof File) {
+      const record = this.buildFileRecord(fileOrUid)
+      this.fileList.push(record)
+      this.renderFileList()
+      return record
+    }
+
+    if (typeof fileOrUid === "string") {
+      return this.fileList.find((record) => record.uid === fileOrUid)
+    }
+
+    if (fileOrUid.uid) {
+      return this.fileList.find((record) => record.uid === fileOrUid.uid) || fileOrUid
+    }
+
+    return null
+  }
+
+  renderFileList() {
+    if (!this.hasListTarget) return
+
+    this.listTarget.classList.toggle("hakumi-upload-list-empty", this.fileList.length === 0)
+
+
+    const existingItems = this.listTarget.querySelectorAll(".hakumi-upload-list-item:not(.hakumi-upload-list-item-trigger)")
+    existingItems.forEach((item) => item.remove())
+
+
+    const inlineTrigger = this.listTarget.querySelector(".hakumi-upload-list-item-trigger")
+
+    this.fileList.forEach((record) => {
+      const item = document.createElement("li")
+      item.className = `hakumi-upload-list-item hakumi-upload-list-item-${record.status || "done"}`
+      item.dataset.uid = record.uid
+
+      const info = document.createElement("div")
+      info.className = "hakumi-upload-list-item-info"
+
+      if (["picture", "picture-card"].includes(this.listTypeValue) && record.url) {
+        const thumb = document.createElement("span")
+        thumb.className = "hakumi-upload-list-item-thumbnail"
+        const img = document.createElement("img")
+        img.src = record.url
+        img.alt = record.name
+        thumb.appendChild(img)
+        info.appendChild(thumb)
+      }
+
+      const name = document.createElement("span")
+      name.className = "hakumi-upload-list-item-name"
+      name.textContent = record.name
+      info.appendChild(name)
+
+      const actions = document.createElement("div")
+      actions.className = "hakumi-upload-list-item-actions"
+
+
+      if (this.listTypeValue === "picture-card") {
+
+        if (record.url && record.status === "done") {
+          const viewButton = document.createElement("button")
+          viewButton.type = "button"
+          viewButton.className = "hakumi-upload-list-item-action hakumi-upload-list-item-view"
+          viewButton.innerHTML = `<svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"/></svg>`
+          viewButton.title = "Preview"
+          viewButton.addEventListener("click", (e) => {
+            e.stopPropagation()
+            this.openPreview(record)
+          })
+          actions.appendChild(viewButton)
+        }
+
+        const removeButton = document.createElement("button")
+        removeButton.type = "button"
+        removeButton.className = "hakumi-upload-list-item-action hakumi-upload-list-item-remove"
+        removeButton.innerHTML = `<svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"/></svg>`
+        removeButton.title = "Remove"
+        removeButton.addEventListener("click", (e) => {
+          e.stopPropagation()
+          this.remove(record.uid)
+        })
+        actions.appendChild(removeButton)
+
+
+        info.appendChild(actions)
+      } else {
+
+        const removeButton = document.createElement("button")
+        removeButton.type = "button"
+        removeButton.className = "hakumi-upload-list-item-action hakumi-upload-list-item-remove"
+        removeButton.textContent = "×"
+        removeButton.title = "Remove"
+        removeButton.addEventListener("click", (e) => {
+          e.stopPropagation()
+          this.remove(record.uid)
+        })
+        actions.appendChild(removeButton)
+        item.appendChild(actions)
+      }
+
+      const progress = document.createElement("div")
+      progress.className = "hakumi-upload-list-item-progress"
+      progress.style.setProperty("--hakumi-upload-progress", `${record.percent || 0}%`)
+
+      const progressBar = document.createElement("div")
+      progressBar.className = "hakumi-upload-list-item-progress-bar"
+      progress.appendChild(progressBar)
+
+      item.appendChild(info)
+      item.appendChild(progress)
+
+
+      if (inlineTrigger) {
+        this.listTarget.insertBefore(item, inlineTrigger)
+      } else {
+        this.listTarget.appendChild(item)
+      }
+    })
+
+
+    this.updateInlineTriggerVisibility()
+  }
+
+  updateInlineTriggerVisibility() {
+    if (!this.hasInlineTriggerTarget) return
+
+    const isAtMax = this.hasMaxCountValue && this.fileList.length >= this.maxCountValue
+    this.inlineTriggerTarget.classList.toggle("hakumi-upload-list-item-trigger-hidden", isAtMax)
+  }
+
+  dispatchChange(file) {
+    this.element.dispatchEvent(
+      new CustomEvent("hakumi:upload:change", {
+        bubbles: true,
+        detail: { file, fileList: this.getFileList() }
+      })
+    )
+  }
+
+  dispatchProgress(file, event) {
+    this.element.dispatchEvent(
+      new CustomEvent("hakumi:upload:progress", {
+        bubbles: true,
+        detail: { file: file ? { ...file } : null, fileList: this.getFileList(), event }
+      })
+    )
+  }
+
+  dispatchSuccess(file) {
+    this.element.dispatchEvent(
+      new CustomEvent("hakumi:upload:success", {
+        bubbles: true,
+        detail: { file: file ? { ...file } : null, fileList: this.getFileList() }
+      })
+    )
+
+
+    if (window.HakumiComponents?.renderComponent && file?.name) {
+      window.HakumiComponents.renderComponent("message", {
+        params: {
+          id: "hakumi-upload-message",
+          type: "success",
+          message: `${file.name} uploaded successfully`,
+          duration: 3
+        }
+      })
+    }
+  }
+
+  dispatchError(file, error) {
+    this.element.dispatchEvent(
+      new CustomEvent("hakumi:upload:error", {
+        bubbles: true,
+        detail: { file: file ? { ...file } : null, fileList: this.getFileList(), error }
+      })
+    )
+
+
+    if (window.HakumiComponents?.renderComponent) {
+      const errorMsg = error || file?.error || "Upload failed"
+      window.HakumiComponents.renderComponent("message", {
+        params: {
+          id: "hakumi-upload-message",
+          type: "error",
+          message: file?.name ? `${file.name}: ${errorMsg}` : errorMsg,
+          duration: 3
+        }
+      })
+    }
+  }
+
+  ensureObject(value) {
+    if (!value) return null
+    if (typeof value === "object") return value
+
+    try {
+      return JSON.parse(value)
+    } catch {
+      return null
+    }
+  }
+
+
+
+
+
+  
+
+  handleAvatarUpload(file) {
+    if (!this.hasAvatarTarget || !this.hasAvatarWrapperTarget) return
+
+
+    if (!this.validateFileType(file)) {
+      if (window.HakumiComponents?.renderComponent) {
+        window.HakumiComponents.renderComponent("message", {
+          params: {
+            id: "hakumi-upload-avatar-message",
+            type: "error",
+            message: "Please upload an image file",
+            duration: 3
+          }
+        })
+      }
+      return
+    }
+
+
+    if (this.hasMaxSizeValue && file.size > this.maxSizeValue) {
+      if (window.HakumiComponents?.renderComponent) {
+        window.HakumiComponents.renderComponent("message", {
+          params: {
+            id: "hakumi-upload-avatar-message",
+            type: "error",
+            message: "File exceeds max size",
+            duration: 3
+          }
+        })
+      }
+      return
+    }
+
+
+    this.avatarWrapperTarget.classList.add("hakumi-upload-avatar-wrapper-loading")
+
+
+    const loadingIcon = `<span class="anticon anticon-loading" style="animation: spin 1s linear infinite;"><svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span>`
+    this.avatarTarget.innerHTML = loadingIcon
+
+
+    const previewUrl = URL.createObjectURL(file)
+
+
+    const record = this.buildFileRecord(file)
+    record.url = previewUrl
+    record.blobUrl = true
+
+
+    const isDemoMode = !this.actionValue || this.actionValue === "#"
+
+    const updateAvatar = () => {
+      this.avatarWrapperTarget.classList.remove("hakumi-upload-avatar-wrapper-loading")
+
+
+      const img = document.createElement("img")
+      img.src = previewUrl
+      img.alt = file.name
+      img.style.cssText = "width: 100%; height: 100%; object-fit: cover;"
+      this.avatarTarget.innerHTML = ""
+      this.avatarTarget.appendChild(img)
+      this.avatarTarget.classList.add("hakumi-avatar-image")
+
+
+      this.dispatchSuccess({ ...record, status: "done" })
+    }
+
+    if (isDemoMode) {
+
+      setTimeout(updateAvatar, 1500)
+    } else {
+
+      this.performAvatarUpload(record, updateAvatar)
+    }
+  }
+
+  
+
+  performAvatarUpload(record, onSuccess) {
+    const xhr = new XMLHttpRequest()
+
+    if (this.withCredentialsValue) {
+      xhr.withCredentials = true
+    }
+
+    xhr.addEventListener("load", () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        try {
+          record.response = JSON.parse(xhr.response)
+        } catch {
+          record.response = xhr.response
+        }
+        onSuccess()
+      } else {
+        this.avatarWrapperTarget?.classList.remove("hakumi-upload-avatar-wrapper-loading")
+        this.dispatchError(record, xhr.statusText || "Upload failed")
+      }
+    })
+
+    xhr.addEventListener("error", () => {
+      this.avatarWrapperTarget?.classList.remove("hakumi-upload-avatar-wrapper-loading")
+      this.dispatchError(record, "Network error")
+    })
+
+    xhr.open("POST", this.actionValue)
+
+    const csrfToken = this.getCsrfToken()
+    if (csrfToken) {
+      xhr.setRequestHeader("X-CSRF-Token", csrfToken)
+    }
+
+    const headers = this.ensureObject(this.headersValue)
+    if (headers) {
+      Object.entries(headers).forEach(([key, value]) => {
+        const lowerKey = key.toLowerCase()
+        if (!["cookie", "host", "origin", "referer"].includes(lowerKey)) {
+          xhr.setRequestHeader(key, value)
+        }
+      })
+    }
+
+    const formData = new FormData()
+    const extraData = this.ensureObject(this.dataValue)
+    if (extraData) {
+      Object.entries(extraData).forEach(([key, value]) => {
+        formData.append(key, value)
+      })
+    }
+
+    formData.append(this.nameValue || "file", record.raw)
+    xhr.send(formData)
+  }
+
+
+
+
+
+  
+
+  getPreviewItems() {
+    return this.fileList
+      .filter((record) => record.status === "done" && record.url)
+      .map((record) => ({
+        src: record.url,
+        alt: record.name,
+        uid: record.uid
+      }))
+  }
+
+  
+
+  openPreview(fileOrUid) {
+    const record = this.resolveRecord(fileOrUid)
+    if (!record || !record.url) return
+
+    const items = this.getPreviewItems()
+    const currentIndex = items.findIndex((item) => item.uid === record.uid)
+
+    if (currentIndex === -1) return
+
+    this.#createPreviewModal(items, currentIndex)
+  }
+
+  #previewState = {
+    modal: null,
+    items: [],
+    currentIndex: 0
+  }
+
+  #createPreviewModal(items, startIndex) {
+
+    this.#closePreviewModal()
+
+    this.#previewState.items = items
+    this.#previewState.currentIndex = startIndex
+
+
+    const modal = document.createElement("div")
+    modal.className = "hakumi-upload-preview-root"
+    modal.innerHTML = `
+      <div class="hakumi-upload-preview-mask"></div>
+      <div class="hakumi-upload-preview-wrap">
+        <div class="hakumi-upload-preview-body">
+          <img class="hakumi-upload-preview-img" src="" alt="" />
+        </div>
+        <div class="hakumi-upload-preview-operations">
+          <button type="button" class="hakumi-upload-preview-close" title="Close">
+            <svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"/></svg>
+          </button>
+        </div>
+        ${items.length > 1 ? `
+          <button type="button" class="hakumi-upload-preview-switch hakumi-upload-preview-switch-left" title="Previous">
+            <svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"/></svg>
+          </button>
+          <button type="button" class="hakumi-upload-preview-switch hakumi-upload-preview-switch-right" title="Next">
+            <svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V183c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"/></svg>
+          </button>
+          <div class="hakumi-upload-preview-counter">
+            <span class="hakumi-upload-preview-counter-current">${startIndex + 1}</span>
+            <span>/</span>
+            <span class="hakumi-upload-preview-counter-total">${items.length}</span>
+          </div>
+        ` : ""}
+      </div>
+    `
+
+    this.#previewState.modal = modal
+    document.body.appendChild(modal)
+    document.body.style.overflow = "hidden"
+
+
+    this.#updatePreviewImage()
+
+
+    modal.querySelector(".hakumi-upload-preview-mask").addEventListener("click", () => this.#closePreviewModal())
+    modal.querySelector(".hakumi-upload-preview-close").addEventListener("click", () => this.#closePreviewModal())
+    modal.querySelector(".hakumi-upload-preview-switch-left")?.addEventListener("click", () => this.#prevPreviewImage())
+    modal.querySelector(".hakumi-upload-preview-switch-right")?.addEventListener("click", () => this.#nextPreviewImage())
+
+
+    this._previewKeyHandler = (e) => {
+      if (e.key === "Escape") this.#closePreviewModal()
+      else if (e.key === "ArrowLeft") this.#prevPreviewImage()
+      else if (e.key === "ArrowRight") this.#nextPreviewImage()
+    }
+    document.addEventListener("keydown", this._previewKeyHandler)
+
+
+    requestAnimationFrame(() => {
+      modal.classList.add("hakumi-upload-preview-active")
+    })
+  }
+
+  #updatePreviewImage() {
+    const { modal, items, currentIndex } = this.#previewState
+    if (!modal) return
+
+    const item = items[currentIndex]
+    const img = modal.querySelector(".hakumi-upload-preview-img")
+    img.src = item.src
+    img.alt = item.alt || ""
+
+    const counterCurrent = modal.querySelector(".hakumi-upload-preview-counter-current")
+    if (counterCurrent) {
+      counterCurrent.textContent = currentIndex + 1
+    }
+  }
+
+  #prevPreviewImage() {
+    const { items, currentIndex } = this.#previewState
+    if (items.length <= 1) return
+    this.#previewState.currentIndex = (currentIndex - 1 + items.length) % items.length
+    this.#updatePreviewImage()
+  }
+
+  #nextPreviewImage() {
+    const { items, currentIndex } = this.#previewState
+    if (items.length <= 1) return
+    this.#previewState.currentIndex = (currentIndex + 1) % items.length
+    this.#updatePreviewImage()
+  }
+
+  #closePreviewModal() {
+    const { modal } = this.#previewState
+    if (!modal) return
+
+    modal.classList.remove("hakumi-upload-preview-active")
+
+    if (this._previewKeyHandler) {
+      document.removeEventListener("keydown", this._previewKeyHandler)
+      this._previewKeyHandler = null
+    }
+
+    setTimeout(() => {
+      modal.remove()
+      this.#previewState.modal = null
+      document.body.style.overflow = ""
+    }, 300)
+  }
+}