https://app.branchcast.com/assets/controllers/uploads_controller-5…621b3918f00cd9707cfe36aa2b0d150514130495.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  connect() {
5    document.addEventListener("direct-upload:initialize", this.handleInitialize)
6    document.addEventListener("direct-upload:start", this.handleStart)
7    document.addEventListener("direct-upload:progress", this.handleProgress)
8    document.addEventListener("direct-upload:error", this.handleError)
9    document.addEventListener("direct-upload:end", this.handleEnd)
10    this.progressArea = document.getElementById('upload-progress-container')
11    console.log(this.element)
12  }
13
14  disconnect() {
15    document.removeEventListener("direct-upload:initialize", this.handleInitialize)
16    document.removeEventListener("direct-upload:start", this.handleStart)
17    document.removeEventListener("direct-upload:progress", this.handleProgress)
18    document.removeEventListener("direct-upload:error", this.handleError)
19    document.removeEventListener("direct-upload:end", this.handleEnd)
20  }
21
22  handleInitialize = (event) => {
23    const { target, detail } = event
24    const { id, file } = detail
25    this.progressArea.innerHTML = `
26      <div class="my-3 block w-full bg-zinc-100 shadow rounded-full h-4" id="direct-upload-${id}">
27        <div id="direct-upload-progress-${id}" class="transition-[width] rounded-full bg-indigo-500 h-4" role="progressbar" style="width: 0%;"></div>
28      </div>
29    `
30  }
31
32  handleStart = (event) => {
33    const { id } = event.detail
34    const element = document.getElementById(`direct-upload-${id}`)
35  }
36
37  handleProgress = (event) => {
38    const { id, progress } = event.detail
39    const progressElement = document.getElementById(`direct-upload-progress-${id}`)
40    progressElement.style.width = `${progress}%`
41  }
42
43  handleError = (event) => {
44    event.preventDefault()
45    const { id, error } = event.detail
46    const element = document.getElementById(`direct-upload-progress-${id}`)
47    element.classList.remove("bg-indigo-500")
48    element.classList.add("bg-rose-500")
49    element.setAttribute("title", error)
50  }
51
52  handleEnd = (event) => {
53    const { id } = event.detail
54    const element = document.getElementById(`direct-upload-progress-${id}`)
55    element.classList.remove("bg-indigo-500")
56    element.classList.add("bg-emerald-500")
57  }
58};