Cleanup Jua upload handler

This commit is contained in:
the-djmaze 2022-10-28 01:36:49 +02:00
parent 9130da9dca
commit 7a0ec76d25
3 changed files with 46 additions and 120 deletions

View file

@ -1045,9 +1045,6 @@ export class ComposePopupView extends AbstractViewPopup {
attachmentSizeLimit = pInt(SettingsGet('AttachmentLimit'));
oJua
// .on('onLimitReached', (limit) => {
// alert(limit);
// })
.on('onDragEnter', () => {
this.dragAndDropOver(true);
})

View file

@ -281,7 +281,6 @@ export class ContactsPopupView extends AbstractViewPopup {
const j = new Jua({
action: serverRequest('UploadContacts'),
limit: 1,
disableDocumentDropPrevent: true,
clickElement: this.importButton()
});

162
vendors/jua/jua.js vendored
View file

@ -6,32 +6,28 @@
* @param {*} aItems
* @param {Function} fFileCallback
* @param {number=} iLimit = 20
* @param {Function=} fLimitCallback
*/
getDataFromFiles = (aItems, fFileCallback, iLimit, fLimitCallback) =>
getDataFromFiles = (aItems, fFileCallback, iLimit) =>
{
if (aItems?.length)
{
let
oFile,
iInputLimit = iLimit,
bUseLimit = 0 < iLimit,
bCallLimit = !fLimitCallback
iCount = 0,
bCallLimit = false
;
[...aItems].forEach(oItem => {
if (oItem)
{
if (!bUseLimit || 0 <= --iLimit)
{
if (oItem) {
if (iLimit && iLimit < ++iCount) {
if (!bCallLimit) {
bCallLimit = true;
// fLimitCallback(iLimit);
}
} else {
oFile = getDataFromFile(oItem);
oFile && fFileCallback(oFile);
}
else if (bUseLimit && !bCallLimit)
{
bCallLimit = true;
fLimitCallback(iInputLimit);
}
}
});
}
@ -57,14 +53,7 @@
: null; // Folder
},
eventContainsFiles = oEvent =>
{
try {
return oEvent.dataTransfer.types.includes('Files');
} catch (e) {
return false;
}
};
eventContainsFiles = oEvent => oEvent.dataTransfer.types.includes('Files');
class Queue extends Array
{
@ -111,8 +100,7 @@
onDragEnter: null,
onDragLeave: null,
onBodyDragEnter: null,
onBodyDragLeave: null,
onLimitReached: null
onBodyDragLeave: null
};
self.oXhrs = {};
@ -120,11 +108,13 @@
self.options = Object.assign({
action: '',
name: 'uploader',
hidden: {},
limit: 0
limit: 0,
// clickElement:
// dragAndDropElement:
}, options || {});
self.oQueue = new Queue();
// clickElement
if (el) {
el.style.position = 'relative';
el.style.overflow = 'hidden';
@ -136,111 +126,58 @@
}
el = options.dragAndDropElement;
if (el)
{
let oBigDropZone = options.dragAndDropBodyElement || doc;
if (!options.disableDocumentDropPrevent)
{
doc.addEventListener('dragover', oEvent => {
if (eventContainsFiles(oEvent))
{
try
{
if (el) {
addEventListeners(doc, {
dragover: oEvent => {
if (eventContainsFiles(oEvent)) {
timerStop();
if (el.contains(oEvent.target)) {
oEvent.dataTransfer.dropEffect = 'copy';
oEvent.stopPropagation();
} else {
oEvent.dataTransfer.dropEffect = 'none';
oEvent.preventDefault();
}
catch (oExc) {
console.error(oExc);
}
oEvent.preventDefault();
}
});
}
if (oBigDropZone)
{
addEventListeners(oBigDropZone, {
dragover: () => timerStop(),
dragenter: oEvent => {
if (eventContainsFiles(oEvent))
{
timerStop();
oEvent.preventDefault();
self.runEvent('onBodyDragEnter', oEvent);
}
},
dragleave: oEvent =>
oEvent.dataTransfer && timerStart(() => self.runEvent('onBodyDragLeave', oEvent)),
drop: oEvent => {
if (oEvent.dataTransfer) {
let bFiles = eventContainsFiles(oEvent);
bFiles && oEvent.preventDefault();
self.runEvent('onBodyDragLeave', oEvent);
return !bFiles;
}
return false;
}
});
}
addEventListeners(el, {
},
dragenter: oEvent => {
if (eventContainsFiles(oEvent)) {
timerStop();
oEvent.preventDefault();
self.runEvent('onDragEnter', el, oEvent);
}
},
dragover: oEvent => {
if (eventContainsFiles(oEvent)) {
try
{
let sEffect = oEvent.dataTransfer.effectAllowed;
self.runEvent('onBodyDragEnter', oEvent);
if (el.contains(oEvent.target)) {
timerStop();
oEvent.dataTransfer.dropEffect = (sEffect === 'move' || sEffect === 'linkMove') ? 'move' : 'copy';
oEvent.stopPropagation();
oEvent.preventDefault();
}
catch (oExc) {
console.error(oExc);
self.runEvent('onDragEnter', el, oEvent);
}
}
},
dragleave: oEvent => {
if (oEvent.dataTransfer) {
if (eventContainsFiles(oEvent)) {
let oRelatedTarget = doc.elementFromPoint(oEvent.clientX, oEvent.clientY);
if (!oRelatedTarget || !el.contains(oRelatedTarget)) {
timerStop();
self.runEvent('onDragLeave', el, oEvent);
}
timerStart(() => self.runEvent('onBodyDragLeave', oEvent))
}
},
drop: oEvent => {
if (eventContainsFiles(oEvent)) {
timerStop();
oEvent.preventDefault();
getDataFromFiles(
oEvent.files || oEvent.dataTransfer.files,
oFile => {
if (oFile) {
self.addFile(oFile);
timerStop();
}
},
self.options.limit,
self.getEvent('onLimitReached')
);
if (el.contains(oEvent.target)) {
getDataFromFiles(
oEvent.files || oEvent.dataTransfer.files,
oFile => {
if (oFile) {
self.addFile(oFile);
}
},
self.options.limit
);
}
}
self.runEvent('onDragLeave', oEvent);
self.runEvent('onBodyDragLeave', oEvent);
}
});
}
@ -308,7 +245,6 @@
oXhr = new XMLHttpRequest(),
oFormData = new FormData(),
sAction = this.options.action,
aHidden = this.options.hidden,
fStartFunction = this.getEvent('onStart'),
fProgressFunction = this.getEvent('onProgress')
;
@ -350,9 +286,6 @@
fStartFunction && fStartFunction(sUid);
oFormData.append(this.options.name, oFileInfo['File']);
Object.entries(aHidden).forEach(([key, value]) =>
oFormData.append(key, (typeof value === "function" ? value(oFileInfo) : value).toString())
);
oXhr.send(oFormData);
@ -393,10 +326,7 @@
}, 10);
};
if (oInput.files?.length) {
getDataFromFiles(oInput.files, fFileCallback,
limit,
self.getEvent('onLimitReached')
);
getDataFromFiles(oInput.files, fFileCallback, limit);
} else {
fFileCallback({
FileName: oInput.value.split(/\\\//).pop(),