86 lines
2.1 KiB
JavaScript
86 lines
2.1 KiB
JavaScript
let dropArea = document.getElementById('drop-area');
|
|
let filesDone = 0
|
|
let filesToDo = 0
|
|
let progressBar = document.getElementById('progress-bar')
|
|
|
|
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
|
dropArea.addEventListener(eventName, preventDefaults, false)
|
|
})
|
|
|
|
function preventDefaults (e) {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
}
|
|
|
|
;['dragenter', 'dragover'].forEach(eventName => {
|
|
dropArea.addEventListener(eventName, highlight, false)
|
|
})
|
|
|
|
;['dragleave', 'drop'].forEach(eventName => {
|
|
dropArea.addEventListener(eventName, unhighlight, false)
|
|
})
|
|
|
|
function highlight(e) {
|
|
dropArea.classList.add('highlight')
|
|
}
|
|
|
|
function unhighlight(e) {
|
|
dropArea.classList.remove('highlight')
|
|
}
|
|
|
|
dropArea.addEventListener('drop', handleDrop, false)
|
|
|
|
function handleDrop(e) {
|
|
let dt = e.dataTransfer
|
|
let files = dt.files
|
|
|
|
handleFiles(files)
|
|
}
|
|
|
|
function handleFiles(files) {
|
|
files = [...files]
|
|
initializeProgress(files.length)
|
|
files.forEach(uploadFile)
|
|
files.forEach(previewFile)
|
|
}
|
|
function uploadFile(file) {
|
|
let url = 'YOUR URL HERE'
|
|
let formData = new FormData()
|
|
|
|
formData.append('file', file)
|
|
|
|
fetch(url, {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(progressDone) // <- Add `progressDone` call here
|
|
.catch(() => { /* Error. Inform the user */ })
|
|
}
|
|
|
|
function previewFile(file) {
|
|
let reader = new FileReader()
|
|
reader.readAsDataURL(file)
|
|
reader.onloadend = function() {
|
|
let fig = document.createElement('figure')
|
|
fig.id = file.name
|
|
document.getElementById('gallery').appendChild(fig)
|
|
let img = document.createElement('img')
|
|
img.src = reader.result
|
|
document.getElementById(file.name).appendChild(img)
|
|
let caption = document.createElement('figcaption')
|
|
caption.textContent = file.name
|
|
document.getElementById(file.name).appendChild(caption)
|
|
}
|
|
}
|
|
|
|
function initializeProgress(numfiles) {
|
|
progressBar.value = 0
|
|
filesDone = 0
|
|
filesToDo = numfiles
|
|
}
|
|
|
|
function progressDone() {
|
|
filesDone++
|
|
progressBar.value = filesDone / filesToDo * 100
|
|
}
|