update

template/javascript/product_form.html

@@ -1,8 +1,66 @@
 <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
 <script src="{{ 'RowExpand.js' | asset_url }}"></script>
 
+<link href="https://unpkg.com/filepond/dist/filepond.min.css" rel="stylesheet" />
+<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css"
+    rel="stylesheet" />
+
+<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
+<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
+
 
 <script>
+    // 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"
+    );
+
+
 
     tinymce.init({
         selector: 'textarea#product-desc',