Active Storage Direct Upload Progress

direct_upload.js

import Rails from '@rails/ujs'

const DirectUpload = {
  start () {
    document.addEventListener('direct-upload:initialize', DirectUpload.initialize)
    document.addEventListener('direct-upload:start', DirectUpload.begin)
    document.addEventListener('direct-upload:progress', DirectUpload.progress)
    document.addEventListener('direct-upload-error', DirectUpload.error)
    document.addEventListener('direct-upload:end', DirectUpload.end)
  },

  initialize (event) {
    const input = document.querySelector('form input[type=\'file\']')

    if (input.multiple) {
      multipleFileUpload(event, input)
    } else {
      singleFileUpload(event)
    }

    function singleFileUpload (event) {
      const id = event.detail.id

      const directUpload = document.createElement('div')
      directUpload.classList.add('direct-upload')
      directUpload.classList.add('direct-upload--single')
      directUpload.classList.add('direct-upload--pending')
      directUpload.id = 'direct-upload-' + id

      const directUploadProgress = document.createElement('div')
      directUploadProgress.classList.add('direct-upload__progress')
      directUploadProgress.id = 'direct-upload-progress-' + id
      directUpload.appendChild(directUploadProgress)

      document.querySelector('body').insertAdjacentElement('afterBegin', directUpload)
    }

    function multipleFileUpload (event, input) {
      const id = event.detail.id

      const directUpload = document.createElement('div')
      directUpload.classList.add('direct-upload')
      directUpload.classList.add('direct-upload--multiple')
      directUpload.classList.add('direct-upload--pending')
      directUpload.id = 'direct-upload-' + id

      const directUploadProgress = document.createElement('div')
      directUploadProgress.classList.add('direct-upload__progress')
      directUploadProgress.id = 'direct-upload-progress-' + id
      directUpload.appendChild(directUploadProgress)

      const directUploadFilename = document.createElement('span')
      directUploadFilename.classList.add('direct-upload__filename')
      directUploadFilename.textContent = event.detail.file.name
      directUpload.appendChild(directUploadFilename)

      input.insertAdjacentElement('beforeBegin', directUpload)
    }
  },

  begin (event) {
    const id = event.detail.id

    const element = document.getElementById('direct-upload-' + id)
    element.classList.remove('direct-upload--pending')
  },

  progress (event) {
    const id = event.detail.id
    const progress = event.detail.progress

    const element = document.getElementById('direct-upload-progress-' + id)
    element.style.width = (progress + '%')
  },

  error (event) {
    const id = event.detail.id
    const error = event.detail.error

    const element = document.getElementById('direct-upload-' + id)
    element.classList.add('direct-upload--error')
    element.setAttribute('title', error)
  },

  end (event) {
    const id = event.detail.id

    const element = document.getElementById('direct-upload-' + id)
    element.classList.remove('direct-upload--complete')
  },

  update_label (event) {
    const input = event.target
    const label = document.querySelector('label[for=\'' + input.id + '\']')

    const text = (input.files.length > 1 ? ' fotos' : ' foto')
    label.textContent = input.files.length + text
  }
}

export default DirectUpload