vgapp 0.9.3 → 0.9.5

package/app/modules/vgfiles/js/base.js

@@ -31,6 +31,8 @@ class VGFilesBase extends BaseModule {
 		};
 
 		this.template = '<li data-file="" class="file"><div class="file-image"></div><div class="file-info"></div><div class="file-remove"></div></li>';
+		this._onNativeInputChange = (e) => this.change(e?.target);
+
 		this._init();
 	}
 
@@ -61,6 +63,17 @@ class VGFilesBase extends BaseModule {
 
 		const filesArray = Array.from(incomingFiles);
 
+		const shouldReplaceOnSingle =
+			Boolean(this._params?.replace) &&
+			Number(this._params?.limits?.count) === 1;
+
+		if (shouldReplaceOnSingle) {
+			this.clear();
+			this.append(filesArray, true);
+			this.build();
+			return;
+		}
+
 		if (!this._params.allowed) {
 			this.append(filesArray, false);
 			this.build();
@@ -262,7 +275,7 @@ class VGFilesBase extends BaseModule {
 		const fragment = document.createDocumentFragment();
 
 		files.forEach((file) => {
-			let classes = $itemsTemplateClasses;;
+			let classes = $itemsTemplateClasses;
 
 			if (this._params.detach) classes.push('with-remove')
 			if (this._params.sortable.enabled) classes.push('with-sortable')
@@ -415,12 +428,21 @@ class VGFilesBase extends BaseModule {
 	_generateHiddenInputs(files) {
 		this._cleanupFakeInputs();
 		const fragment = document.createDocumentFragment();
-		const name = this._element.querySelector('[data-vg-toggle]')?.name || 'files[]';
+		const idInput = this._element.querySelector('label').getAttribute('for') || '';
+		const name = this._element.querySelector('#' + idInput)?.name || this._element.querySelector('#' + idInput)?.dataset.originalName || 'files[]';
+
+		// если name уже "files[]" — убираем скобки, чтобы дальше корректно собрать имя
+		const baseName = name.endsWith('[]') ? name.slice(0, -2) : name;
+		const isSingle = Number(this._params?.limits?.count) === 1;
 
 		files.forEach((file, index) => {
 			const input = document.createElement('input');
 			input.type = 'file';
-			input.name = `${name.replace('[]', '')}[${index}]`;
+
+			// count=1 => name без массива (без [] и без [0])
+			// иначе => name как массив: baseName[index]
+			input.name = isSingle ? baseName : `${baseName}[${index}]`;
+
 			input.dataset.vgFiles = 'generated';
 			Manipulator.hide(input);
 
@@ -486,7 +508,8 @@ class VGFilesBase extends BaseModule {
 
 	_addEventListener() {
 		Selectors.findAll('[data-vg-toggle="files"]', this._element).forEach(el => {
-			el.addEventListener('change', () => this.change(el));
+			el.removeEventListener('change', this._onNativeInputChange);
+			el.addEventListener('change', this._onNativeInputChange);
 		});
 	}
 

package/app/modules/vgfiles/js/render.js

@@ -6,7 +6,7 @@ import { Classes, Manipulator } from "../../../utils/js/dom/manipulator";
 class VGFilesTemplateRender {
 	constructor(vgFilesInstance, element, params = {}) {
 		this.module = vgFilesInstance;
-		this.element = isElement(element);
+		this.element = isElement(element) ? element : null;
 
 		if (!this.element) {
 			console.error('Invalid element provided:', element);

package/app/modules/vgfiles/js/vgfiles.js

@@ -41,6 +41,7 @@ class VGFiles extends VGFilesBase {
             types: [],
             ajax: false,
             prepend: true,
+            replace: true,
             uploads: {
                 mode: 'sequential',
                 route: '',
@@ -98,13 +99,15 @@ class VGFiles extends VGFilesBase {
 
         if (this._params.ajax) {
             this._params.allowed = false;
+        }
 
-            if (this.isRenderNonInit) return;
-            this.isRenderNonInit = this._render.init();
-            if (this._render.parsedFiles.length) {
-                this._addExternalFiles(this._render.parsedFiles);
-            }
+        if (this.isRenderNonInit) return;
+        this.isRenderNonInit = this._render.init();
+
+        if (this._render.parsedFiles.length) {
+            this._addExternalFiles(this._render.parsedFiles);
         }
+
         if (this._params.allowed && !this._params.ajax) this._params.detach = false;
         if (this._nodes.drop) {
             this._params.image = true;
@@ -179,15 +182,24 @@ class VGFiles extends VGFilesBase {
 
     _addEventListenerExtended() {
         Selectors.findAll(SELECTOR_DATA_TOGGLE, this._element).forEach(el => {
-            el.removeEventListener('change', this.change.bind(this));
-            el.addEventListener('change', e => this._handleChange(e));
+            if (this._onNativeInputChange) {
+                el.removeEventListener('change', this._onNativeInputChange);
+            }
+
+            el.addEventListener('change', (e) => this._handleChange(e));
         });
     }
 
     _handleChange(e) {
+        const input = e?.target;
+        this.change(input);
+
         if (this._params.ajax) this.uploadAll(this._files);
-        this._triggerCallback('onChange', { files: this._files, input: e?.target || e?.src || '' });
-        EventHandler.trigger(this._element, `${NAME_KEY}.change`, { files: this._files });
+
+        const payload = { files: this._files, input: e?.target || e?.src || '' };
+
+        this._triggerCallback('onChange', payload);
+        this._triggerEvent('change', { files: this._files, input: payload.input });
     }
 
     async uploadAll(files) {
@@ -232,6 +244,10 @@ class VGFiles extends VGFilesBase {
             files: notUploadedFiles,
             total: notUploadedFiles.length
         });
+        this._triggerEvent('upload.start', {
+            files: notUploadedFiles,
+            total: notUploadedFiles.length
+        });
 
         try {
             await this._uploader.uploadFiles(notUploadedFiles, this._params.uploads.route, uploadParams);
@@ -322,12 +338,15 @@ class VGFiles extends VGFilesBase {
                 }
             }
 
-            this._triggerCallback('onUploadProgress', {
+            const payload = {
                 file: uploadData.file,
                 progress: uploadData.progress,
                 bytesSent: uploadData.bytesSent,
                 totalBytes: uploadData.totalBytes
-            });
+            };
+
+            this._triggerCallback('onUploadProgress', payload);
+            this._triggerEvent('upload.progress', payload);
         });
 
         this._uploader.onComplete((uploadData) => {
@@ -372,12 +391,15 @@ class VGFiles extends VGFilesBase {
             this._setStatItem('completed', this._uploadedKeys.size);
             this._setStatItem('pending', this._pendingUploadedKeys.size);
 
-            this._triggerCallback('onUploadComplete', {
+            const payload = {
                 file: uploadData.file,
                 response: uploadData.result?.response,
                 status: uploadData.result?.status,
                 id: file.id
-            });
+            };
+
+            this._triggerCallback('onUploadComplete', payload);
+            this._triggerEvent('upload.complete', payload);
         });
 
         this._uploader.onError((uploadData) => {
@@ -413,13 +435,14 @@ class VGFiles extends VGFilesBase {
                 }
             }
 
-            this._triggerCallback('onUploadError', {
-                file: uploadData.file
-            });
+            const payload = { file: uploadData.file };
+
+            this._triggerCallback('onUploadError', payload);
+            this._triggerEvent('upload.error', payload);
         });
 
         this._uploader.onAllComplete(() => {
-            EventHandler.trigger(this._element, `${NAME_KEY}.upload.allComplete`);
+            this._triggerEvent('upload.allComplete');
             this._updateStat(false);
 
             if (!this._failingUploadedKeys.size) {
@@ -436,11 +459,13 @@ class VGFiles extends VGFilesBase {
                 }
             }
 
-            this._triggerCallback('onUploadAllComplete', {
+            const payload = {
                 uploaded: this._uploadedKeys.size,
                 failed: this._failingUploadedKeys.size,
                 total: this._files.length
-            });
+            };
+
+            this._triggerCallback('onUploadAllComplete', payload);
         });
     }
 
@@ -467,10 +492,13 @@ class VGFiles extends VGFilesBase {
         this._setStatItem('failing', this._failingUploadedKeys.size);
         this._setStatItem('pending', this._pendingUploadedKeys.size);
 
-        this._triggerCallback('onReload', {
+        const payload = {
             button: button,
             file: fileToRetry
-        });
+        };
+
+        this._triggerCallback('onReload', payload);
+        this._triggerEvent('reload', payload);
 
         this.upload(fileToRetry);
     }
@@ -567,13 +595,16 @@ class VGFiles extends VGFilesBase {
 
         this._resetFileInput();
 
-        this._triggerCallback('onRemoveFile', {
+        const payload = {
             button: button,
             name: name,
             size: size,
             id: id,
             remaining: this._files.length
-        });
+        };
+
+        this._triggerCallback('onRemoveFile', payload);
+        this._triggerEvent('remove', payload);
     }
 
     _updateStatsAfterRemove() {
@@ -707,6 +738,10 @@ class VGFiles extends VGFilesBase {
         }
     }
 
+    _triggerEvent(suffix, payload = {}) {
+        EventHandler.trigger(this._element, `${NAME_KEY}.${suffix}`, payload);
+    }
+
     _getUploadedIds() {
         return Array.from(this._uploadedKeys).map(key => {
             const file = this._files.find(f => this._getFileKey(f) === key);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vgapp",
-	"version": "0.9.3",
+	"version": "0.9.5",
 	"description": "",
 	"author": {
 		"name": "Vegas Studio",