${options.allowDrop ? this.options.dndLabel : ''}
`))
this.fileBtn = this.el.querySelector('.file-input')
this.fileBtn.setAttribute('accept', [...this.options.allowedMimes, ...this.options.allowedExtensions.map(item => '.'+item)].join(', '))
if(this.options.maxFiles>1) this.fileBtn.setAttribute('multiple', '')
this.dropArea = this.el.querySelector('.file-drop-area')
this.dropAreaText = this.el.querySelector('.file-drop-area .file-msg')
this.dropArea.prepend(this.browseBtn.el)
this.previewArea = this.el.querySelector('.file-preview-area')
this.buttonsArea = this.el.querySelector('.buttons-area')
if(!this.options.noUpload){
this.buttonsArea.append(this.uploadBtn.el)
this.buttonsArea.append(this.resetBtn.el)
}
this.filesList = []
this.fileBtn.addEventListener("change", (e) => {
if((!e.target.files) || (e.target.files.length==0)) return
if((this.filesList.length + e.target.files.length) > this.options.maxFiles) return
this.addFiles(e.target.files)
})
if(options.allowDrop) {
this.initDnd()
this.enableDnd()
} else this.disableDnd()
this.refreshFilesList() //List still empty but that hides buttons depending on options
}
initDnd() {
window.addEventListener('drop', (e) => { e.preventDefault(); e.stopPropagation(); })
window.addEventListener('dragover', (e) => { e.preventDefault(); e.stopPropagation(); })
this.dropArea.addEventListener('dragenter', ((e) => {
e.stopPropagation(); e.preventDefault();
if(this.dndDisabled) return
this.dropArea.classList.add('dragover')
}).bind(this));
this.dropArea.addEventListener('dragleave', ((e) =>{
e.stopPropagation(); e.preventDefault();
let elBelow = document.elementFromPoint(e.clientX, e.clientY)
if( (elBelow.classList.contains('file-drop-area'))
|| (elBelow.classList.contains('file-msg'))
|| (elBelow.classList.contains('file-input'))
) return //leaving towards the child, so still over it
if(this.dndDisabled) return
this.dropArea.classList.remove('dragover')
}).bind(this))
this.dropArea.addEventListener('drop', ((e) => {
e.stopPropagation(); e.preventDefault();
if(this.dndDisabled) return
this.dropArea.classList.remove('dragover')
if((!e.dataTransfer) || (!e.dataTransfer.files) || (e.dataTransfer.files.length==0)) return
if((this.filesList.length + e.dataTransfer.files.length) > this.options.maxFiles) return
this.addFiles(e.dataTransfer.files)
}).bind(this));
}
disableDnd() {
this.dndDisabled = true
this.dropAreaText.classList.add('disabled')
}
enableDnd() {
this.dndDisabled = false
this.dropAreaText.classList.remove('disabled')
}
addFiles(files) {
for(let file of files) {
if((file.type!='') && this.checkFileType(file) && (file.size <= this.options.maxSize)) {
this.filesList.push(file)
this.onFileAdded(this.filesList.length-1, file)
this.refreshFilesList()
} else {
this.onWrongFileType(file)
}
}
}
removeFile(e) {
e.stopPropagation(); e.preventDefault();
let el = (e.target.tagName.toLocaleLowerCase()=='button') ? e.target : e.target.parentElement
let fileIdx = el.dataset['id']
let [file, ] = this.filesList.splice(fileIdx,1)
this.refreshFilesList()
this.onFileRemoved(fileIdx, file)
}
checkFileType(file) {
let ext = file.name.substring(file.name.lastIndexOf('.')+1)
return((this.options.allowedMimes.indexOf(file.type)>-1) && (this.options.allowedExtensions.indexOf(ext)>-1))
}
refreshFilesList() {
let html = ''; let itemLine, file, ext, icon, type;
for(let fileIdx in this.filesList) {
file = this.filesList[fileIdx]
ext = file.name.substring(file.name.lastIndexOf('.')+1)
if(this.options.mimeTypes.hasOwnProperty(file.type)) {
icon = this.options.mimeTypes[file.type].icon
type = this.options.mimeTypes[file.type].label
} else {
icon = 'attachment'
type = '".'+ext+'"'
}
icon = (this.options.mimeTypes.hasOwnProperty(file.type)) ? this.options.mimeTypes[file.type].icon : 'attachment'
itemLine = this.fileItemTpl
itemLine = itemLine.replace('%{icon}', `