Skip to content

Instantly share code, notes, and snippets.

@brenogazzola
Created January 20, 2022 23:41
Show Gist options
  • Save brenogazzola/1b94ddec30848fd508ba0a88e7df8dca to your computer and use it in GitHub Desktop.
Save brenogazzola/1b94ddec30848fd508ba0a88e7df8dca to your computer and use it in GitHub Desktop.
Active Storage Direct Upload Progress
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment