vgapp 1.0.1 → 1.0.3

package/app/langs/en/messages.json

@@ -22,7 +22,8 @@
     "titles": "Deleting files",
     "title": "Deleting file",
     "descriptions": "Do you really want to delete all uploaded files from the server?",
-    "description": "It will not be possible to return it"
+    "description": "It will not be possible to return it",
+    "drop-active": "Release to upload"
   },
   "alert": {
     "title": "Default header",
@@ -32,4 +33,4 @@
   "select": {
     "loading": "Loading"
   }
-}
+}

package/app/langs/ru/messages.json

@@ -1,35 +1,36 @@
-{
-  "errors": {
-    "went_wrong": "Что-то пошло не так, повторите позже",
-    "400": "Неверный запрос",
-    "401": "Не авторизован",
-    "403": "Запрещено",
-    "404": "Не найдено",
-    "413": "Слишком большой запрос",
-    "419": "Проблемы с токеном CSRF",
-    "422": "Неверный запрос",
-    "500": "Внутренняя ошибка сервера",
-    "504": "Превышено время ожидания"
-  },
-  "form-sender": {
-    "bootstrap_not_found": "VGApp не удалось найти bootstrap, модалки не будут закрыты, попробуйте сделать это через коллбек afterSend."
-  },
-  "files": {
-    "is-count": "Превышен лимит по количеству файлов",
-    "is-sizes": "Превышен размер файл",
-    "is-types": "Недопустимый тип файла",
-    "is-total-size": "Превышен максимально разрешённый размер для выбранных файлов",
-    "titles": "Удаление файлов",
-    "title": "Удаление файлa",
-    "descriptions": "Вы действительно хотите удалить все загруженные файлы с сервера?",
-    "description": "Вернуть будет невозможно"
-  },
-  "alert": {
-    "title": "Заголовок по умолчанию",
-    "description": "Описание текущего действия",
-    "reason": "Алерт уже открыт"
-  },
-  "select": {
-    "loading": "Загрузка"
-  }
-}
+{
+  "errors": {
+    "went_wrong": "Что-то пошло не так, повторите позже",
+    "400": "Неверный запрос",
+    "401": "Не авторизован",
+    "403": "Запрещено",
+    "404": "Не найдено",
+    "413": "Слишком большой запрос",
+    "419": "Проблемы с токеном CSRF",
+    "422": "Неверный запрос",
+    "500": "Внутренняя ошибка сервера",
+    "504": "Превышено время ожидания"
+  },
+  "form-sender": {
+    "bootstrap_not_found": "VGApp не удалось найти bootstrap, модалки не будут закрыты, попробуйте сделать это через коллбек afterSend."
+  },
+  "files": {
+    "is-count": "Превышен лимит по количеству файлов",
+    "is-sizes": "Превышен размер файл",
+    "is-types": "Недопустимый тип файла",
+    "is-total-size": "Превышен максимально разрешённый размер для выбранных файлов",
+    "titles": "Удаление файлов",
+    "title": "Удаление файлa",
+    "descriptions": "Вы действительно хотите удалить все загруженные файлы с сервера?",
+    "description": "Вернуть будет невозможно",
+    "drop-active": "Отпустите, чтобы загрузить"
+  },
+  "alert": {
+    "title": "Заголовок по умолчанию",
+    "description": "Описание текущего действия",
+    "reason": "Алерт уже открыт"
+  },
+  "select": {
+    "loading": "Загрузка"
+  }
+}

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

@@ -137,12 +137,12 @@ class VGFilesBase extends BaseModule {
 			Boolean(this._params?.replace) &&
 			isSingle;
 
-		if (shouldReplaceOnSingle) {
-			this.clear();
-			this.append(filesArray, true);
-			this._revokeUrls();
-			this._cleanupFakeInputs();
-			this._cleanupErrors();
+		if (shouldReplaceOnSingle) {
+			this.clear(false);
+			this.append(filesArray, true);
+			this._revokeUrls();
+			this._cleanupFakeInputs();
+			this._cleanupErrors();
 
 			this._files = this._filterFiles(filesArray);
 			if (this._params.prepend) this._files.reverse();
@@ -314,7 +314,8 @@ class VGFilesBase extends BaseModule {
 
 	_parseTemplate() {
 		const render = this._render;
-		let tmpl = this.template;
+		const fallbackTemplate = '<li data-file="" class="file"><div class="file-image"></div><div class="file-custom"><div class="file-info"></div><div class="file-remove"></div></div></li>';
+		let tmpl = this.template || fallbackTemplate;
 
 		if (render) {
 			if (render.bufferTemplate) tmpl = render.bufferTemplate;
@@ -322,7 +323,12 @@ class VGFilesBase extends BaseModule {
 
 		const temp = document.createElement('div');
 		temp.innerHTML = tmpl;
-		const liElement = temp.firstElementChild;
+		let liElement = temp.firstElementChild;
+
+		if (!liElement) {
+			temp.innerHTML = fallbackTemplate;
+			liElement = temp.firstElementChild;
+		}
 		const liClasses = liElement.className || '';
 		const liClassList = liClasses ? liClasses.split(' ').filter(cls => cls.trim() !== '') : [];
 
@@ -372,16 +378,11 @@ class VGFilesBase extends BaseModule {
 				}
 			}
 
-			let parts = [];
-			$itemsTemplate.forEach(tmpl => {
-				if (tmpl.className === 'file-image') {
-					parts.push(this._renderUIImage(file))
-				} else if (tmpl.className === 'file-remove') {
-					parts.push(this._renderUIDetach(file))
-				} else {
-					parts.push(tmpl.element.cloneNode(true));
-				}
-			});
+			let parts = [];
+			$itemsTemplate.forEach(tmpl => {
+				const part = this._renderTemplatePart(tmpl.element, file, null, { isDrop: true });
+				if (part) parts.push(part);
+			});
 
 			const $li = this._tpl.li(
 				{ 'data-name': file.name, 'data-size': file.size, 'data-id': file.id || '', class: 'file ' + classes.join(' ') }, parts
@@ -393,8 +394,17 @@ class VGFilesBase extends BaseModule {
 		$list.innerHTML = '';
 		$list.appendChild(fragment);
 
-		const $message = Selectors.find(`.${this._getClass('drop-message')}`, this._nodes.drop);
-		if ($message) Classes.remove($message, 'show');
+		const $message = Selectors.find(`.${this._getClass('drop-message')}`, this._nodes.drop);
+		if ($message) {
+			if (files.length) Classes.add($message, 'has-files');
+			else Classes.remove($message, 'has-files');
+
+			const isSingle = Number(this._params?.limits?.count) === 1;
+			if (isSingle) {
+				if (files.length) Classes.remove($message, 'show');
+				else Classes.add($message, 'show');
+			}
+		}
 
 		this._nodes.drop.appendChild($list);
 		Classes.add(this._nodes.drop, 'active');
@@ -425,18 +435,11 @@ class VGFilesBase extends BaseModule {
 			if (this._params.detach) classes.push('with-remove')
 			if (this._params.sortable.enabled) classes.push('with-sortable');
 
-			let parts = [];
-			$itemsTemplate.forEach(tmpl => {
-				if (tmpl.className === 'file-image') {
-					parts.push(this._renderUIImage(file))
-				} else if (tmpl.className === 'file-info') {
-					parts.push(this._renderUIInfo(file, i))
-				} else if (tmpl.className === 'file-remove') {
-					parts.push(this._renderUIDetach(file))
-				} else {
-					parts.push(tmpl.element.cloneNode(true));
-				}
-			});
+			let parts = [];
+			$itemsTemplate.forEach(tmpl => {
+				const part = this._renderTemplatePart(tmpl.element, file, i);
+				if (part) parts.push(part);
+			});
 
 			const $li = this._tpl.li(
 				{ 'data-name': file.name, 'data-size': file.size, 'data-type': file.type, 'data-id': file.id || '', class: 'file ' + classes.join(' ') + ' ' }, parts
@@ -448,6 +451,50 @@ class VGFilesBase extends BaseModule {
 		Classes.add(this._nodes.info, 'show')
 	}
 
+	_renderTemplatePart(element, file, index = null, options = {}) {
+		if (!element) return null;
+		const { isDrop = false } = options;
+
+		const classList = element?.classList;
+
+		if (classList?.contains('file-image')) return this._renderUIImage(file);
+		if (classList?.contains('file-info')) {
+			if (isDrop) return null;
+			return this._renderUIInfo(file, index);
+		}
+		if (classList?.contains('file-remove')) return this._wrapInFileCustom(this._renderUIDetach(file));
+
+		const $part = element.cloneNode(true);
+
+		this._replaceTemplateSlot($part, '.file-image', () => this._renderUIImage(file));
+		this._replaceTemplateSlot($part, '.file-info', () => isDrop ? null : this._renderUIInfo(file, index));
+		this._replaceTemplateSlot($part, '.file-remove', () => this._renderUIDetach(file));
+
+		return this._wrapInFileCustom($part);
+	}
+
+	_wrapInFileCustom(node) {
+		if (!node) return null;
+		if (node.classList?.contains('file-custom')) return node;
+
+		const wrapper = document.createElement('div');
+		wrapper.className = 'file-custom';
+		wrapper.appendChild(node);
+
+		return wrapper;
+	}
+
+	_replaceTemplateSlot(container, selector, renderer) {
+		const isMatchSelf = container?.matches && container.matches(selector);
+		const matched = isMatchSelf ? [container] : Array.from(container.querySelectorAll(selector));
+
+		matched.forEach((node) => {
+			const replacement = renderer();
+			if (replacement) node.replaceWith(replacement);
+			else node.remove();
+		});
+	}
+
 	_renderUIDetach(file) {
 		if (this._params.detach) {
 			return this._tpl.div({ class: 'file-remove' }, [
@@ -539,12 +586,14 @@ class VGFilesBase extends BaseModule {
 		Selectors.findAll('[data-vg-files="generated"]', this._element).forEach(el => el.remove());
 	}
 
-	clear() {
-		this._revokeUrls();
-		this._resetFileInput();
-		this._cleanupFakeInputs();
-		this._cleanupErrors();
-		this._files = [];
+	clear(resetInput = true) {
+		this._revokeUrls();
+		if (resetInput) {
+			this._resetFileInput();
+		}
+		this._cleanupFakeInputs();
+		this._cleanupErrors();
+		this._files = [];
 
 		if (this._nodes.info) {
 			Classes.remove(this._nodes.info, 'show');
@@ -555,8 +604,15 @@ class VGFilesBase extends BaseModule {
 			const $list = Selectors.find(`.${this._getClass('drop-list')}`, this._element);
 			if ($list) $list.innerHTML = '';
 
-			const $message = Selectors.find(`.${this._getClass('drop-message')}`, this._element);
-			if ($message) Classes.add($message, 'show');
+			const $message = Selectors.find(`.${this._getClass('drop-message')}`, this._element);
+			if ($message) {
+				Classes.remove($message, 'has-files');
+
+				const isSingle = Number(this._params?.limits?.count) === 1;
+				if (isSingle) {
+					Classes.add($message, 'show');
+				}
+			}
 
 			Classes.remove(this._nodes.drop, 'active');
 		}
@@ -599,4 +655,4 @@ class VGFilesBase extends BaseModule {
 	}
 }
 
-export default VGFilesBase;
+export default VGFilesBase;

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

@@ -13,11 +13,11 @@ const CLASS_NAME_DROP_HOVER = 'drop-hover';
 const NAME = 'drop-and-drop';
 const NAME_KEY = 'vg.drop-and-drop';
 
-class VGFilesDroppable extends BaseModule {
-    /**
-     * @param {HTMLElement} element
-     * @param {Object} params
-     */
+class VGFilesDroppable extends BaseModule {
+    /**
+     * @param {HTMLElement} element
+     * @param {Object} params
+     */
     constructor(element, params = {}) {
         super(element, params);
         this._element = element;
@@ -31,10 +31,15 @@ class VGFilesDroppable extends BaseModule {
     static get NAME() { return NAME; }
     static get NAME_KEY() { return NAME_KEY; }
 
-    _init() {
-        this._findInput();
-        this._setupEvents();
-    }
+    _init() {
+        VGFilesDroppable._instances.add(this);
+        if (this._params?.smartdrop) {
+            VGFilesDroppable._smartInstances.add(this);
+            this._bindGlobalEvents();
+        }
+        this._findInput();
+        this._setupEvents();
+    }
 
     /**
      * Поиск связанного input[type="file"] внутри или рядом с drop-зоной
@@ -53,8 +58,8 @@ class VGFilesDroppable extends BaseModule {
     /**
      * Настройка событий перетаскивания
      */
-    _setupEvents() {
-        if (!isElement(this._element)) return;
+    _setupEvents() {
+        if (!isElement(this._element)) return;
 
         const isSortableDrag = (e) => {
             // 1) если sortable реально активен — на элементе есть класс dragging
@@ -64,70 +69,76 @@ class VGFilesDroppable extends BaseModule {
             let plain = '';
             try { plain = e.dataTransfer?.getData?.('text/plain') || ''; } catch (_) {}
             return plain === 'vgsortable';
-        };
+        };
 
-        EventHandler.on(this._element, 'dragover', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
+        EventHandler.on(this._element, 'dragover', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
 
             // ✅ Сортировка: НЕ подсвечиваем dropzone
-            if (isSortableDrag(e)) {
-                Classes.remove(this._element, [CLASS_NAME_DROP_ACTIVE, CLASS_NAME_DROP_HOVER]);
-                e.dataTransfer.dropEffect = 'none';
-                return;
-            }
+            if (isSortableDrag(e)) {
+                Classes.remove(this._element, [CLASS_NAME_DROP_ACTIVE, CLASS_NAME_DROP_HOVER]);
+                VGFilesDroppable._setDropMessageTitleState(this._element, false);
+                e.dataTransfer.dropEffect = 'none';
+                return;
+            }
 
             if (!Classes.has(this._element, CLASS_NAME_DROP_ACTIVE)) {
                 Classes.add(this._element, CLASS_NAME_DROP_HOVER);
             }
         });
 
-        EventHandler.on(this._element, 'dragenter', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
+        EventHandler.on(this._element, 'dragenter', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
 
             // ✅ Сортировка: НЕ подсвечиваем dropzone
-            if (isSortableDrag(e)) {
-                Classes.remove(this._element, [CLASS_NAME_DROP_ACTIVE, CLASS_NAME_DROP_HOVER]);
-                return;
-            }
-
-            Classes.add(this._element, [CLASS_NAME_DROP_ACTIVE, CLASS_NAME_DROP_HOVER]);
-        });
+            if (isSortableDrag(e)) {
+                Classes.remove(this._element, [CLASS_NAME_DROP_ACTIVE, CLASS_NAME_DROP_HOVER]);
+                VGFilesDroppable._setDropMessageTitleState(this._element, false);
+                return;
+            }
+
+            Classes.add(this._element, [CLASS_NAME_DROP_ACTIVE, CLASS_NAME_DROP_HOVER]);
+            VGFilesDroppable._setDropMessageTitleState(this._element, true);
+        });
 
         EventHandler.on(this._element, 'dragleave', (e) => {
             e.preventDefault();
             e.stopPropagation();
 
             // ✅ Сортировка: гарантированно без подсветки
-            if (isSortableDrag(e)) {
-                Classes.remove(this._element, [CLASS_NAME_DROP_ACTIVE, CLASS_NAME_DROP_HOVER]);
-                return;
-            }
+            if (isSortableDrag(e)) {
+                Classes.remove(this._element, [CLASS_NAME_DROP_ACTIVE, CLASS_NAME_DROP_HOVER]);
+                VGFilesDroppable._setDropMessageTitleState(this._element, false);
+                return;
+            }
 
             if (e.target === this._element || e.target.closest('.' + CLASS_NAME_DROP) === this._element) {
                 Classes.remove(this._element, CLASS_NAME_DROP_HOVER);
                 setTimeout(() => {
-                    if (!this._element.matches(':hover')) {
-                        Classes.remove(this._element, CLASS_NAME_DROP_ACTIVE);
-                    }
-                }, 50);
-            }
-        });
-
-        EventHandler.on(this._element, 'drop', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
+                    if (!this._element.matches(':hover')) {
+                        Classes.remove(this._element, CLASS_NAME_DROP_ACTIVE);
+                        VGFilesDroppable._setDropMessageTitleState(this._element, false);
+                    }
+                }, 50);
+            }
+        });
 
-            Classes.remove(this._element, [CLASS_NAME_DROP_ACTIVE, CLASS_NAME_DROP_HOVER]);
+        EventHandler.on(this._element, 'drop', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            Classes.remove(this._element, [CLASS_NAME_DROP_ACTIVE, CLASS_NAME_DROP_HOVER]);
+            VGFilesDroppable._setDropMessageTitleState(this._element, false);
 
             // ✅ сортировка: не трогаем input
-            if (isSortableDrag(e)) {
-                return;
-            }
-
-            const files = e.dataTransfer?.files;
-            if (!files || !files.length) return;
+            if (isSortableDrag(e)) {
+                return;
+            }
+
+            const files = e.dataTransfer?.files;
+            if (!files || !files.length) return;
 
             this._files = files;
 
@@ -135,25 +146,209 @@ class VGFilesDroppable extends BaseModule {
                 this._input.files = files;
                 EventHandler.trigger(this._input, 'change');
             }
-        });
-    }
+        });
+    }
+
+    _bindGlobalEvents() {
+        if (VGFilesDroppable._isGlobalEventsBound) return;
+
+        VGFilesDroppable._globalHandlers = {
+            dragenter: (e) => this._updateSuggestedDrop(e),
+            dragover: (e) => this._updateSuggestedDrop(e),
+            dragleave: (e) => {
+                if (!this._isFileDrag(e)) return;
+                if (e.relatedTarget === null || e.target === document || e.target === document.documentElement) {
+                    VGFilesDroppable._clearSuggestedDrop();
+                }
+            },
+            drop: (e) => {
+                if (!this._isFileDrag(e)) {
+                    VGFilesDroppable._clearSuggestedDrop();
+                    return;
+                }
+
+                const activeDrop = VGFilesDroppable._activeSuggestedDrop;
+                if (activeDrop) {
+                    const instance = Array.from(VGFilesDroppable._smartInstances).find(i => i._element === activeDrop);
+                    const files = e.dataTransfer?.files;
+
+                    if (instance && files && files.length && isElement(instance._input)) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        instance._files = files;
+                        instance._input.files = files;
+                        EventHandler.trigger(instance._input, 'change');
+                    }
+                }
+
+                VGFilesDroppable._clearSuggestedDrop();
+            },
+            dragend: () => VGFilesDroppable._clearSuggestedDrop(),
+        };
+
+        EventHandler.on(document, 'dragenter', VGFilesDroppable._globalHandlers.dragenter);
+        EventHandler.on(document, 'dragover', VGFilesDroppable._globalHandlers.dragover);
+        EventHandler.on(document, 'dragleave', VGFilesDroppable._globalHandlers.dragleave);
+        EventHandler.on(document, 'drop', VGFilesDroppable._globalHandlers.drop);
+        EventHandler.on(document, 'dragend', VGFilesDroppable._globalHandlers.dragend);
+
+        EventHandler.on(window, 'dragenter', VGFilesDroppable._globalHandlers.dragenter);
+        EventHandler.on(window, 'dragover', VGFilesDroppable._globalHandlers.dragover);
+        EventHandler.on(window, 'dragleave', VGFilesDroppable._globalHandlers.dragleave);
+        EventHandler.on(window, 'drop', VGFilesDroppable._globalHandlers.drop);
+        EventHandler.on(window, 'dragend', VGFilesDroppable._globalHandlers.dragend);
+
+        VGFilesDroppable._isGlobalEventsBound = true;
+    }
+
+    _updateSuggestedDrop(e) {
+        if (!this._isFileDrag(e)) {
+            VGFilesDroppable._clearSuggestedDrop();
+            return;
+        }
+
+        const visibleDrops = this._getVisibleDropZonesInViewport();
+
+        if (visibleDrops.length === 1) {
+                const [dropZone] = visibleDrops;
+                if (VGFilesDroppable._activeSuggestedDrop !== dropZone) {
+                    VGFilesDroppable._clearSuggestedDrop();
+                    Classes.add(dropZone, CLASS_NAME_DROP_ACTIVE);
+                    VGFilesDroppable._setDropMessageTitleState(dropZone, true);
+                    VGFilesDroppable._activeSuggestedDrop = dropZone;
+                }
+
+            if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
+            e.preventDefault();
+            return;
+        }
+
+        VGFilesDroppable._clearSuggestedDrop();
+    }
+
+    _isFileDrag(e) {
+        try {
+            const dt = e?.dataTransfer;
+            if (!dt) return false;
+
+            if (dt.files && dt.files.length > 0) return true;
+
+            if (dt.items && dt.items.length > 0) {
+                return Array.from(dt.items).some(item => item.kind === 'file');
+            }
+
+            if (dt.types) {
+                return Array.from(dt.types).includes('Files');
+            }
+
+            return false;
+        } catch (_) {
+            return false;
+        }
+    }
+
+    _getVisibleDropZonesInViewport() {
+        const dropZones = Array.from(Selectors.findAll(`.${CLASS_NAME_DROP}`) || []);
+        return dropZones.filter((el) => this._isVisibleInViewport(el));
+    }
+
+    _isVisibleInViewport(el) {
+        if (!isElement(el) || !el.isConnected) return false;
+
+        const style = window.getComputedStyle(el);
+        if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') {
+            return false;
+        }
+
+        const rect = el.getBoundingClientRect();
+        if (!rect.width || !rect.height) return false;
+
+        const inViewport =
+            rect.bottom > 0 &&
+            rect.right > 0 &&
+            rect.top < window.innerHeight &&
+            rect.left < window.innerWidth;
+
+        return inViewport;
+    }
+
+    static _clearSuggestedDrop() {
+        if (!VGFilesDroppable._activeSuggestedDrop) return;
+
+        VGFilesDroppable._setDropMessageTitleState(VGFilesDroppable._activeSuggestedDrop, false);
+        Classes.remove(VGFilesDroppable._activeSuggestedDrop, CLASS_NAME_DROP_ACTIVE);
+        VGFilesDroppable._activeSuggestedDrop = null;
+    }
+
+    static _setDropMessageTitleState(dropElement, isActive) {
+        if (!isElement(dropElement)) return;
+
+        const title = Selectors.find('.vg-files-drop-message .title', dropElement);
+        if (!title) return;
+
+        const originalText = (title.getAttribute('data-drop-original-text') || '').trim() || (title.textContent || '').trim();
+        title.setAttribute('data-drop-original-text', originalText);
+
+        const activeText = (dropElement.getAttribute('data-drop-active-text') || '').trim();
+        if (isActive && activeText) {
+            title.textContent = activeText;
+            return;
+        }
+
+        title.textContent = originalText;
+    }
+
+    static _unbindGlobalEvents() {
+        if (!VGFilesDroppable._isGlobalEventsBound) return;
+
+        const handlers = VGFilesDroppable._globalHandlers || {};
+
+        EventHandler.off(document, 'dragenter', handlers.dragenter);
+        EventHandler.off(document, 'dragover', handlers.dragover);
+        EventHandler.off(document, 'dragleave', handlers.dragleave);
+        EventHandler.off(document, 'drop', handlers.drop);
+        EventHandler.off(document, 'dragend', handlers.dragend);
+
+        EventHandler.off(window, 'dragenter', handlers.dragenter);
+        EventHandler.off(window, 'dragover', handlers.dragover);
+        EventHandler.off(window, 'dragleave', handlers.dragleave);
+        EventHandler.off(window, 'drop', handlers.drop);
+        EventHandler.off(window, 'dragend', handlers.dragend);
+
+        VGFilesDroppable._isGlobalEventsBound = false;
+        VGFilesDroppable._globalHandlers = null;
+        VGFilesDroppable._clearSuggestedDrop();
+    }
 
     getFiles() {
         return this._files;
     }
 
-    dispose() {
-        EventHandler.off(this._element, 'dragover');
-        EventHandler.off(this._element, 'dragenter');
-        EventHandler.off(this._element, 'dragleave');
-        EventHandler.off(this._element, 'drop');
-        this._input = null;
-        this._files = null;
-    }
+    dispose() {
+        EventHandler.off(this._element, 'dragover');
+        EventHandler.off(this._element, 'dragenter');
+        EventHandler.off(this._element, 'dragleave');
+        EventHandler.off(this._element, 'drop');
+
+        VGFilesDroppable._instances.delete(this);
+        VGFilesDroppable._smartInstances.delete(this);
+        if (!VGFilesDroppable._smartInstances.size) {
+            VGFilesDroppable._unbindGlobalEvents();
+        }
+
+        this._input = null;
+        this._files = null;
+    }
 
     init() {
         return this;
     }
-}
-
-export default VGFilesDroppable;
+}
+
+VGFilesDroppable._instances = new Set();
+VGFilesDroppable._smartInstances = new Set();
+VGFilesDroppable._isGlobalEventsBound = false;
+VGFilesDroppable._activeSuggestedDrop = null;
+VGFilesDroppable._globalHandlers = null;
+
+export default VGFilesDroppable;