https://makethisbetter.dev/assets/src/direct_uploads-1a9cda7a.js

1addEventListener("direct-upload:initialize", event => {
2  const { target, detail } = event
3  const { id, file } = detail
4
5  const upload = document.createElement("div")
6  upload.id = `direct-upload-${id}`
7  upload.className = "direct-upload direct-upload--pending"
8
9  const progress = document.createElement("div")
10  progress.id = `direct-upload-progress-${id}`
11  progress.className = "direct-upload__progress"
12  progress.style.width = "0%"
13
14  const filename = document.createElement("span")
15  filename.className = "direct-upload__filename"
16  filename.textContent = file.name
17
18  upload.append(progress, filename)
19  target.before(upload)
20})
21
22addEventListener("direct-upload:start", event => {
23  const { id } = event.detail
24  const element = document.getElementById(`direct-upload-${id}`)
25  element.classList.remove("direct-upload--pending")
26})
27
28addEventListener("direct-upload:progress", event => {
29  const { id, progress } = event.detail
30  const progressElement = document.getElementById(`direct-upload-progress-${id}`)
31  progressElement.style.width = `${progress}%`
32})
33
34addEventListener("direct-upload:error", event => {
35  event.preventDefault()
36  const { id, error } = event.detail
37  const element = document.getElementById(`direct-upload-${id}`)
38  element.classList.add("direct-upload--error")
39  element.setAttribute("title", error)
40})
41
42addEventListener("direct-upload:end", event => {
43  const { id } = event.detail
44  const element = document.getElementById(`direct-upload-${id}`)
45  element.classList.add("direct-upload--complete")
46})