update

template/javascript/product_form.html

@@ -13,53 +13,13 @@
     // Quan trọng: đăng ký plugin
     FilePond.registerPlugin(FilePondPluginImagePreview);
 
-    function initCustomFilePond(buttonSelector, previewSelector, inputSelector, options = {}) {
-        const button = document.querySelector(buttonSelector);
-        const preview = document.querySelector(previewSelector);
-        const input = document.querySelector(inputSelector);
-
-        // Ẩn ban đầu nhưng không dùng display:none
-        preview.style.opacity = "0";
-        preview.style.transition = "0.2s";
-
-        // Tạo FilePond instance
-        const pond = FilePond.create(input, {
-            allowMultiple: true,
-            allowImagePreview: true,
-            instantUpload: true,
-            credits: false,
-            labelIdle: "",
-            ...options
-        });
-
-        // Đưa UI FilePond vào container preview
-        preview.appendChild(pond.element);
-
-        // Nút bấm → mở chọn file
-        button.addEventListener("click", () => input.click());
-
-        // Khi thêm file → show preview
-        pond.on("addfile", () => {
-            preview.style.opacity = "1";
-        });
-
-        // Khi xoá hết file → ẩn
-        pond.on("removefile", () => {
-            if (pond.getFiles().length === 0) {
-                preview.style.opacity = "0";
-            }
-        });
-
-        return pond;
-    }
-
-    // Gọi function
-    initCustomFilePond(
-        "#btnUploadImg",
-        "#image-preview-filepond",
-        "#hidden-filepond-input"
-    );
-
+    FilePond.create(document.querySelector("#image-preview-filepond"), {
+        credits: false,
+        allowImageCrop: false,
+        allowImagePreview: false,
+        allowMultiple: true,
+        labelIdle: 'Kéo thả ảnh hoặc <span class="filepond--label-action">Chọn ảnh</span>',
+    })
 
 
     tinymce.init({