vgapp 1.1.1 → 1.1.3

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

@@ -1,154 +1,154 @@
-import { isElement, normalizeData } from "../../../utils/js/functions";
-import Params from "../../../utils/js/components/params";
-import Selectors from "../../../utils/js/dom/selectors";
-import { Manipulator } from "../../../utils/js/dom/manipulator";
-
-class VGFilesTemplateRender {
-	constructor(vgFilesInstance, element, params = {}) {
-		this.module = vgFilesInstance;
-		this.element = isElement(element) ? element : null;
-
-		if (!this.element) {
-			console.error('Invalid element provided:', element);
-			return;
-		}
-
-		this._params = new Params(params, element).get();
-		this._nodes = {
-			info: this.module._nodes.info,
-			drop: this.module._nodes.drop
-		};
-
-		this.bufferTemplate = '';
-		this.parsedFiles = [];
-	}
-
-	init() {
-		const $targetNode = this._nodes.info || this._nodes.drop;
-		if (!$targetNode) return false;
-
-		const area = this._nodes.info ? 'info' : 'drop';
-		return this._nativeRenderFiles(area, $targetNode);
-	}
-
-	_nativeRenderFiles(area, $node) {
-		const $list = Selectors.find(`.vg-files-${area}--list`, $node);
-		if (!$list) return false;
-
-		const $items = Array.from($list.children).filter(li => li.tagName === 'LI');
-		if ($items.length === 0) return false;
-
-		this._setTemplateInBuffer($items);
-		if (!this.bufferTemplate) return false;
-
-		this.parsedFiles = $items
-			.map(li => {
-				const rawData = Manipulator.get(li, 'data-file');
-				if (!rawData) return null;
-
-				return this._parseDataFile(rawData);
-			})
-			.filter(Boolean);
-
-		return true;
-	}
-
-	_parseDataFile(rawData) {
-		const dataFile = normalizeData(rawData);
-		if (!dataFile || typeof dataFile !== 'object' || Array.isArray(dataFile)) return null;
-
-		const binaryMeta = this._extractBinaryMeta(dataFile);
-		const name = this._toStringOrNull(dataFile.name);
-		const id = this._toStringOrNull(dataFile.id);
-		const src = this._toStringOrNull(dataFile.src);
-		const type = this._toStringOrNull(dataFile.type) || binaryMeta.type || 'application/octet-stream';
-		const size = this._toNumberOrNull(dataFile.size) ?? binaryMeta.size ?? 0;
-		const lastModified = this._toNumberOrNull(dataFile.lastModified ?? dataFile['last-modified']) ?? binaryMeta.lastModified ?? Date.now();
-
-		const result = {
-			id,
-			name,
-			size,
-			type,
-			src,
-			lastModified
-		};
-
-		if (dataFile.image !== undefined && dataFile.image !== null && dataFile.image !== '') {
-			result.image = dataFile.image;
-		}
-
-		const requiredKeys = ['id', 'name', 'size', 'type', 'src'];
-		const isValid = requiredKeys.every((key) => {
-			const value = result[key];
-			if (key === 'size') return Number.isFinite(value);
-			return value !== undefined && value !== null && value !== '';
-		});
-
-		if (!isValid) return null;
-
-		const customData = {};
-		const reserved = new Set(['id', 'name', 'size', 'type', 'src', 'image', 'lastModified', 'last-modified']);
-
-		Object.entries(dataFile).forEach(([key, value]) => {
-			if (reserved.has(key)) return;
-			if (value === undefined || value === null || value === '') return;
-			customData[key] = value;
-		});
-
-		if (Object.keys(customData).length) {
-			result.customData = customData;
-		}
-
-		return result;
-	}
-
-	_extractBinaryMeta(dataFile) {
-		const binary = dataFile.file || dataFile.blob || dataFile.originFile || null;
-		if (!(binary instanceof Blob)) return {};
-
-		const size = this._toNumberOrNull(binary.size);
-		const type = this._toStringOrNull(binary.type);
-		const lastModified = (binary instanceof File)
-			? this._toNumberOrNull(binary.lastModified)
-			: null;
-
-		return {
-			size: size ?? null,
-			type: type || null,
-			lastModified: lastModified ?? null
-		};
-	}
-
-	_toStringOrNull(value) {
-		if (value === undefined || value === null) return null;
-		const normalized = String(value).trim();
-		return normalized ? normalized : null;
-	}
-
-	_toNumberOrNull(value) {
-		if (value === undefined || value === null || value === '') return null;
-		const normalized = Number(value);
-		return Number.isFinite(normalized) ? normalized : null;
-	}
-
-	_setTemplateInBuffer($items) {
-		if (this.bufferTemplate || $items.length === 0) return;
-
-		const firstItem = $items[0];
-
-		if (!Manipulator.has(firstItem, 'data-file')) {
-			this.bufferTemplate = firstItem.outerHTML;
-			firstItem.remove();
-		} else {
-			this.bufferTemplate = firstItem.outerHTML;
-		}
-	}
-
-	dispose() {
-		this.bufferTemplate = '';
-		this.parsedFiles = [];
-	}
-}
-
+import { isElement, normalizeData } from "../../../utils/js/functions";
+import Params from "../../../utils/js/components/params";
+import Selectors from "../../../utils/js/dom/selectors";
+import { Manipulator } from "../../../utils/js/dom/manipulator";
+
+class VGFilesTemplateRender {
+	constructor(vgFilesInstance, element, params = {}) {
+		this.module = vgFilesInstance;
+		this.element = isElement(element) ? element : null;
+
+		if (!this.element) {
+			console.error('Invalid element provided:', element);
+			return;
+		}
+
+		this._params = new Params(params, element).get();
+		this._nodes = {
+			info: this.module._nodes.info,
+			drop: this.module._nodes.drop
+		};
+
+		this.bufferTemplate = '';
+		this.parsedFiles = [];
+	}
+
+	init() {
+		const $targetNode = this._nodes.info || this._nodes.drop;
+		if (!$targetNode) return false;
+
+		const area = this._nodes.info ? 'info' : 'drop';
+		return this._nativeRenderFiles(area, $targetNode);
+	}
+
+	_nativeRenderFiles(area, $node) {
+		const $list = Selectors.find(`.vg-files-${area}--list`, $node);
+		if (!$list) return false;
+
+		const $items = Array.from($list.children).filter(li => li.tagName === 'LI');
+		if ($items.length === 0) return false;
+
+		this._setTemplateInBuffer($items);
+		if (!this.bufferTemplate) return false;
+
+		this.parsedFiles = $items
+			.map(li => {
+				const rawData = Manipulator.get(li, 'data-file');
+				if (!rawData) return null;
+
+				return this._parseDataFile(rawData);
+			})
+			.filter(Boolean);
+
+		return true;
+	}
+
+	_parseDataFile(rawData) {
+		const dataFile = normalizeData(rawData);
+		if (!dataFile || typeof dataFile !== 'object' || Array.isArray(dataFile)) return null;
+
+		const binaryMeta = this._extractBinaryMeta(dataFile);
+		const name = this._toStringOrNull(dataFile.name);
+		const id = this._toStringOrNull(dataFile.id);
+		const src = this._toStringOrNull(dataFile.src);
+		const type = this._toStringOrNull(dataFile.type) || binaryMeta.type || 'application/octet-stream';
+		const size = this._toNumberOrNull(dataFile.size) ?? binaryMeta.size ?? 0;
+		const lastModified = this._toNumberOrNull(dataFile.lastModified ?? dataFile['last-modified']) ?? binaryMeta.lastModified ?? Date.now();
+
+		const result = {
+			id,
+			name,
+			size,
+			type,
+			src,
+			lastModified
+		};
+
+		if (dataFile.image !== undefined && dataFile.image !== null && dataFile.image !== '') {
+			result.image = dataFile.image;
+		}
+
+		const requiredKeys = ['id', 'name', 'size', 'type', 'src'];
+		const isValid = requiredKeys.every((key) => {
+			const value = result[key];
+			if (key === 'size') return Number.isFinite(value);
+			return value !== undefined && value !== null && value !== '';
+		});
+
+		if (!isValid) return null;
+
+		const customData = {};
+		const reserved = new Set(['id', 'name', 'size', 'type', 'src', 'image', 'lastModified', 'last-modified']);
+
+		Object.entries(dataFile).forEach(([key, value]) => {
+			if (reserved.has(key)) return;
+			if (value === undefined || value === null || value === '') return;
+			customData[key] = value;
+		});
+
+		if (Object.keys(customData).length) {
+			result.customData = customData;
+		}
+
+		return result;
+	}
+
+	_extractBinaryMeta(dataFile) {
+		const binary = dataFile.file || dataFile.blob || dataFile.originFile || null;
+		if (!(binary instanceof Blob)) return {};
+
+		const size = this._toNumberOrNull(binary.size);
+		const type = this._toStringOrNull(binary.type);
+		const lastModified = (binary instanceof File)
+			? this._toNumberOrNull(binary.lastModified)
+			: null;
+
+		return {
+			size: size ?? null,
+			type: type || null,
+			lastModified: lastModified ?? null
+		};
+	}
+
+	_toStringOrNull(value) {
+		if (value === undefined || value === null) return null;
+		const normalized = String(value).trim();
+		return normalized ? normalized : null;
+	}
+
+	_toNumberOrNull(value) {
+		if (value === undefined || value === null || value === '') return null;
+		const normalized = Number(value);
+		return Number.isFinite(normalized) ? normalized : null;
+	}
+
+	_setTemplateInBuffer($items) {
+		if (this.bufferTemplate || $items.length === 0) return;
+
+		const firstItem = $items[0];
+
+		if (!Manipulator.has(firstItem, 'data-file')) {
+			this.bufferTemplate = firstItem.outerHTML;
+			firstItem.remove();
+		} else {
+			this.bufferTemplate = firstItem.outerHTML;
+		}
+	}
+
+	dispose() {
+		this.bufferTemplate = '';
+		this.parsedFiles = [];
+	}
+}
+
 export default VGFilesTemplateRender;

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

@@ -482,14 +482,14 @@ class VGFiles extends VGFilesBase {
                 if (li) {
                     this._setButtonElement(file);
 
-                    const fileRemove = Selectors.find('.file-remove', li);
-                    if (fileRemove) {
-                        fileRemove.innerHTML = '';
-                        fileRemove.appendChild(this._setButtonElement(file, true, 'failing'));
-                        Classes.add(li, CLASS_NAME_FAILING);
-                    }
-                }
-            }
+                    const fileRemove = Selectors.find('.file-remove', li);
+                    if (fileRemove) {
+                        fileRemove.innerHTML = '';
+                        fileRemove.appendChild(this._setFailingButtons(file));
+                        Classes.add(li, CLASS_NAME_FAILING);
+                    }
+                }
+            }
 
             const payload = { file: uploadData.file };
 
@@ -677,8 +677,15 @@ class VGFiles extends VGFilesBase {
             }
         });
 
-        if (this._params.ajax && this._params.removes.single.route) {
-            if (!id) return;
+        if (this._params.ajax && this._params.removes.single.route) {
+            if (!id) {
+                this._files = this._files.filter(f => !(f.name === name && f.size === size));
+                this._updateStatsAfterRemove();
+                this._files.length ? this.build() : this.clear(true);
+                emitRemove();
+                this._resetFileInput();
+                return;
+            }
 
             const routeBase = this._params.removes.single.route;
             const routeSeparator = routeBase.includes('?') ? '&' : '?';
@@ -768,31 +775,36 @@ class VGFiles extends VGFilesBase {
         return Selectors.find(`button[data-name="${file.name}"][data-size="${file.size}"]`, this._element);
     }
 
-    _setButtonElement(file, isAjax = false, status = '') {
-        let icon = getSVG('trash'), action = 'data-vg-dismiss';
-        if (!this._params.info) icon = getSVG('cross');
-        if (isAjax) {
-            icon = getSVG('spinner');
-            if (status === 'completed') icon = getSVG('check');
-            else action = 'data-vg-reload';
-        }
-        if (this._failingUploadedKeys.has(this._getFileKey(file))) {
-            icon = getSVG('spinner');
-            action = 'data-vg-reload';
-        }
-
-        return this._tpl.button([
-            this._tpl.i({}, icon, { isHTML: true })
-        ], 'button', this._buildFileDataAttributes(file, {
+    _setButtonElement(file, isAjax = false, status = '') {
+        let icon = getSVG('trash'), action = 'data-vg-dismiss';
+        if (!this._params.info) icon = getSVG('cross');
+        if (isAjax) {
+            icon = getSVG('spinner');
+            if (status === 'completed') icon = getSVG('check');
+            else action = 'data-vg-reload';
+        }
+
+        return this._tpl.button([
+            this._tpl.i({}, icon, { isHTML: true })
+        ], 'button', this._buildFileDataAttributes(file, {
             type: 'button',
             [action]: 'file',
             'data-name': file.name,
             'data-size': file.size ?? 0,
             'data-type': file.type || '',
             'data-last-modified': file.lastModified || '',
-            'data-id': file.id || ''
-        }));
-    }
+            'data-id': file.id || ''
+        }));
+    }
+
+    _setFailingButtons(file) {
+        const wrapper = this._tpl.div({ class: 'file-failing-actions' }, [
+            this._setButtonElement(file, true, 'failing'),
+            this._setButtonElement(file)
+        ]);
+
+        return wrapper;
+    }
 
     _renderStat() {
         if (!this._nodes.stat) return;