Fix(uploader): refactor code of uploader for upload files with reactive events

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);
     };
 

library/modules/uploader/files/base.ts

@@ -67,7 +67,7 @@ export class BaseFile extends ReactiveModel<IFile> {
 	#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<IFile> {
 		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<IFile> {
 		};
 		reader.onerror = event => this.#onerror(event);
 		reader.readAsDataURL(file);
-
 		return promise;
 	};
 
@@ -121,11 +119,23 @@ export class BaseFile extends ReactiveModel<IFile> {
 		}
 	};
 
+	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<IFile> {
 		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
 	};
 }

library/modules/uploader/index.ts

@@ -19,6 +19,10 @@ export /*bundle*/ class Uploader extends ReactiveModel<IUploader> {
 	#selector: HTMLElement;
 	#attrs;
 	#draggable;
+
+	get draggable() {
+		return this.#draggable;
+	}
 	#control: HTMLElement;
 	#specs;
 	#errors;
@@ -41,6 +45,7 @@ export /*bundle*/ class Uploader extends ReactiveModel<IUploader> {
 		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<IUploader> {
 	#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<IUploader> {
 		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<IUploader> {
 
 	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<IUploader> {
 		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<IUploader> {
 			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();