From 21b62c45a5cb7f8062bf1aabc53600e2cb83dfbf Mon Sep 17 00:00:00 2001 From: gabojcb Date: Wed, 28 Feb 2024 21:47:05 -0400 Subject: [PATCH] Fix: refactor code of uploader for upload files with reactive events --- library/modules/uploader/draggable.ts | 2 -- library/modules/uploader/files/base.ts | 24 +++++++++++++++++------- library/modules/uploader/index.ts | 25 +++++++++++++++++-------- 3 files changed, 34 insertions(+), 17 deletions(-) diff --git a/library/modules/uploader/draggable.ts b/library/modules/uploader/draggable.ts index 7b8b635..a75492a 100644 --- a/library/modules/uploader/draggable.ts +++ b/library/modules/uploader/draggable.ts @@ -14,7 +14,6 @@ export class DraggableUploader { onDrop = (event: DragEvent) => { event.preventDefault(); const { dataTransfer } = event; - console.log(19, event); if (!dataTransfer.items.length) { return; } @@ -25,7 +24,6 @@ export class DraggableUploader { files.push(file); } } - this.#files.readLocal(files); }; diff --git a/library/modules/uploader/files/base.ts b/library/modules/uploader/files/base.ts index bdbf3a9..2d23106 100644 --- a/library/modules/uploader/files/base.ts +++ b/library/modules/uploader/files/base.ts @@ -67,7 +67,7 @@ export class BaseFile extends ReactiveModel { #onloadend = (event: any, file: any) => { this.#loaded = this.#loaded + 1; - const name = file.name.replace(this.regExp, ''); + const name = file.name; file = this._items.get(name); file.src = event.target.result; @@ -88,14 +88,13 @@ export class BaseFile extends ReactiveModel { const isValid = !!this.FILE_TYPE[this.#type].find(item => item === file.type); if (!isValid) { - this.#errors.push(file.name.replace(this.regExp, '')); + this.#errors.push(file.name); } return isValid; }; #readFile = async (file: any) => { const promise = new PendingPromise(); - if (this.#type !== 'any') { const isValid = await this.validate(file); if (!isValid) { @@ -112,7 +111,6 @@ export class BaseFile extends ReactiveModel { }; reader.onerror = event => this.#onerror(event); reader.readAsDataURL(file); - return promise; }; @@ -121,11 +119,23 @@ export class BaseFile extends ReactiveModel { } }; + validateExtension = (file: any, allowedExtensions: string[]) => { + + const fileExtension = file.name.substring(file.name.lastIndexOf('.')).toLowerCase(); + const isValidExtension = allowedExtensions.includes(fileExtension); + + if (!isValidExtension) { + this.#errors.push(file.name); + } + + return isValidExtension; + }; + clean = () => { this._items = new Map(); this.#loaded = 0; - this.triggerEvent(); + this.triggerEvent('items.loaded'); }; /** @@ -138,13 +148,13 @@ export class BaseFile extends ReactiveModel { const promises = []; for (let i = 0; i < fileList.length; ++i) { const file = fileList[i]; - this._items.set(file.name.replace(this.regExp, ''), file); + this._items.set(file.name, file); promises.push(this.#readFile(file)); } await Promise.all(promises); - this.fetching = false; + this.triggerEvent('items.loaded'); //@todo trigger remove }; } diff --git a/library/modules/uploader/index.ts b/library/modules/uploader/index.ts index 35370b7..2aca0c1 100644 --- a/library/modules/uploader/index.ts +++ b/library/modules/uploader/index.ts @@ -19,6 +19,10 @@ export /*bundle*/ class Uploader extends ReactiveModel { #selector: HTMLElement; #attrs; #draggable; + + get draggable() { + return this.#draggable; + } #control: HTMLElement; #specs; #errors; @@ -41,6 +45,7 @@ export /*bundle*/ class Uploader extends ReactiveModel { this.#draggable = new DraggableUploader(this); globalThis.up = this; this.#files.on('change', this.#listenChanges); + this.#files.on('items.loaded', this.#updateItems); this.#files.on('error', this.getErrors); this.#files.on('loadend', this.filesLoaded); const params = {...specs.input}; @@ -52,6 +57,7 @@ export /*bundle*/ class Uploader extends ReactiveModel { #listenChanges = () => { this.fetching = this.#files.fetching; this.ready = this.#files.ready; + this.triggerEvent(); }; setAttributes = specs => { if (!specs) specs = {}; @@ -71,9 +77,13 @@ export /*bundle*/ class Uploader extends ReactiveModel { this.#attrs = attrs; }; + #updateItems = () => { + this.triggerEvent('items.loaded') + }; // }; openDialog = () => { + console.log(0.5, 'this'); this.#fileInput.click(); }; filesLoaded = () => this.triggerEvent('loadend'); @@ -83,14 +93,17 @@ export /*bundle*/ class Uploader extends ReactiveModel { clean = async () => { await this.#files.clean(); - // await this.#mobileFiles.clean(); }; - delete = async (fileName: string) => { - await this.#files.items.delete(fileName); - this.triggerEvent(); + delete = (fileName: string) => { + this.#files.items.delete(fileName); + this.triggerEvent('item.delete'); }; + isDrap = () => { + return this.#draggable.onDragOver(); + } + create = (selector: HTMLElement, draggableSelector: HTMLElement | undefined) => { if (mediaDevice.type === 'MOBILE') { selector.addEventListener('click', mediaDevice.openGallery); @@ -110,16 +123,13 @@ export /*bundle*/ class Uploader extends ReactiveModel { if (draggableSelector) this.#draggable.add(draggableSelector); }; #onChangeInput = async event => { - this.clean(); this.fetching = true; - this.triggerEvent(); // todo: fetching property need to fires this event const target = event.currentTarget; window.setTimeout(async () => { this.#files.total = target.files.length; await this.#files.readLocal(target.files); this.fetching = false; - this.triggerEvent(); // todo: fetching property need to fires this event }, 0); }; @@ -142,7 +152,6 @@ export /*bundle*/ class Uploader extends ReactiveModel { if (!params.hasOwnProperty(param)) continue; form.append(param, params[param]); } - const xhr = new XHRLoader(); const response = await xhr.upload(form, specs.url); return response.json();