@fctc/widget-logic 4.8.8 → 4.9.0

package/dist/index.js

@@ -4415,6 +4415,28 @@ function useStorageState(key) {
   );
   return [state, setValue];
 }
+var guessTypeFromUrl = (url) => {
+  const ext = url.split(".").pop()?.toLowerCase();
+  if (!ext) return null;
+  const map = {
+    jpg: "image/jpeg",
+    jpeg: "image/jpeg",
+    png: "image/png",
+    webp: "image/webp",
+    gif: "image/gif",
+    svg: "image/svg+xml",
+    bmp: "image/bmp",
+    tiff: "image/tiff",
+    pdf: "application/pdf",
+    zip: "application/zip",
+    rar: "application/x-rar-compressed",
+    xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    xls: "application/vnd.ms-excel",
+    mp4: "video/mp4",
+    mov: "video/quicktime"
+  };
+  return map[ext] || null;
+};
 
 // src/utils.ts
 __reExport(utils_exports, require("@fctc/interface-logic/utils"));
@@ -6208,126 +6230,102 @@ var colorFieldController = (props) => {
 
 // src/widget/basic/binary-field/controller.ts
 var import_react22 = require("react");
-var import_utils16 = require("@fctc/interface-logic/utils");
-var ALLOWED_TYPES = [
-  "image/jpeg",
-  "image/png",
-  "application/pdf",
-  "video/mp4",
-  "application/zip",
-  "application/x-zip-compressed",
-  "application/vnd.ms-excel",
-  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-  "application/json"
-];
-var MAX_FILE_SIZE = 10 * 1024 * 1024;
-var MAX_TOTAL_SIZE = 50 * 1024 * 1024;
 var binaryFieldController = (props) => {
   const {
     name,
     methods,
     readonly = false,
-    value,
     filename,
+    onChange: handleOnchange,
+    service,
+    xNode,
+    path,
     rootField,
     index,
-    onChange: handleOnchange
+    value
   } = props;
-  const inputId = (0, import_react22.useId)();
-  const [selectedFile, setSelectedFile] = (0, import_react22.useState)(null);
-  const [selectedPreview, setSelectedPreview] = (0, import_react22.useState)(null);
-  const [initialFile, setInitialFile] = (0, import_react22.useState)(value || null);
-  const binaryRef = (0, import_react22.useRef)(null);
-  const convertUrlToBase64 = async (url) => {
+  const { useUploadFile: useUploadFile2 } = (0, provider_exports.useService)();
+  const { mutateAsync } = useUploadFile2();
+  const [url, setUrl] = (0, import_react22.useState)(value || null);
+  const [fileInfo, setFileInfo] = (0, import_react22.useState)(null);
+  (0, import_react22.useEffect)(() => {
+    if (!value) return;
+    fetchFileMeta(value);
+  }, [value]);
+  const formatSize = (bytes) => {
+    if (bytes < 1024) return bytes + " B";
+    let kb = bytes / 1024;
+    if (kb < 1024) return kb.toFixed(2) + " KB";
+    let mb = kb / 1024;
+    if (mb < 1024) return mb.toFixed(2) + " MB";
+    return (mb / 1024).toFixed(2) + " GB";
+  };
+  const fetchFileMeta = async (url2) => {
     try {
-      const response = await fetch(url);
-      const blob = await response.blob();
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onloadend = () => resolve(reader.result);
-        reader.onerror = reject;
-        reader.readAsDataURL(blob);
+      const res = await fetch(url2, { method: "HEAD" });
+      const size = res.headers.get("content-length") || "";
+      let type = res.headers.get("content-type") || "";
+      const date = res.headers.get("last-modified") || "";
+      const guessed = guessTypeFromUrl(url2);
+      if (guessed) type = guessed;
+      setFileInfo({
+        size: size ? formatSize(Number(size)) : "--",
+        type,
+        date: date ? new Date(date).toLocaleString() : "--"
       });
-    } catch (error) {
-      console.error("Error converting URL to Base64:", error);
-      throw error;
+      setUrl(url2);
+    } catch (e) {
+      console.error(e);
     }
   };
-  const extractBase64Data = (base64Url) => base64Url.includes("base64,") ? base64Url.split("base64,")[1] : base64Url;
-  const isBlobUrl = (url) => /^blob:/.test(url);
-  const checkIsImageLink = (url) => {
-    const imageExtensions = /\.(jpg|jpeg|png|gif|bmp|webp|svg|tiff|ico)$/i;
-    return imageExtensions.test(url) || (0, import_utils16.isBase64Image)(url) || isBlobUrl(url);
-  };
-  const getBase64WithMimeType = (base64) => {
-    if (typeof base64 !== "string" || base64.length < 10) return null;
-    if ((0, import_utils16.isBase64Image)(base64)) return base64;
-    let mimeType = null;
-    if (base64.startsWith("iVBORw0KGgo")) mimeType = "image/png";
-    else if (base64.startsWith("/9j/")) mimeType = "image/jpeg";
-    else if (base64.startsWith("R0lGOD")) mimeType = "image/gif";
-    else if (base64.startsWith("Qk")) mimeType = "image/bmp";
-    else if (base64.startsWith("UklGR")) mimeType = "image/webp";
-    return mimeType ? `data:${mimeType};base64,${base64}` : null;
-  };
-  const handleFileChange = async (e, onChange) => {
-    if (readonly) return;
-    const file = e?.target?.files?.[0];
-    if (!file) return;
-    if (!ALLOWED_TYPES.includes(file.type)) {
-      alert(`File type not allowed: ${file.type}`);
-      return;
-    }
-    if (file.size > MAX_FILE_SIZE) {
-      alert(`File exceeds 10MB limit.`);
-      return;
-    }
-    const fileUrl = URL.createObjectURL(file);
-    setSelectedFile(file);
-    setSelectedPreview(fileUrl);
-    const base64 = await convertUrlToBase64(fileUrl);
-    const base64Data = extractBase64Data(base64);
-    methods?.setValue(name, base64Data, { shouldDirty: true });
-    onChange(base64Data);
-    handleOnchange && handleOnchange(name ?? "", base64Data);
+  const onUploadFile = async (formData) => {
+    const res = await mutateAsync({
+      formData,
+      service,
+      xNode,
+      path
+    });
+    const url2 = res?.url;
+    methods?.setValue(name, url2, { shouldDirty: true });
+    handleOnchange && handleOnchange(name ?? "", url2);
     if (filename) {
       methods?.setValue(
         rootField ? `${rootField?.name}.${index}.${filename}` : filename,
-        file?.name,
+        url2?.split("/").pop(),
         { shouldDirty: true }
       );
       handleOnchange && handleOnchange(
         rootField ? `${rootField?.name}.${index}.${filename}` : filename,
-        file?.name
+        url2?.split("/").pop()
       );
     }
+    setUrl(url2);
+    fetchFileMeta(url2);
+    return url2;
   };
-  const handleRemoveFile = (onChange) => {
-    if (selectedPreview) URL.revokeObjectURL(selectedPreview);
-    setSelectedFile(null);
-    setSelectedPreview(null);
-    setInitialFile(null);
-    onChange(null);
+  const onDeleteFile = () => {
+    if (filename) {
+      methods?.setValue(
+        rootField ? `${rootField?.name}.${index}.${filename}` : filename,
+        null,
+        { shouldDirty: true }
+      );
+      handleOnchange && handleOnchange(
+        rootField ? `${rootField?.name}.${index}.${filename}` : filename,
+        null
+      );
+    }
+    setUrl(null);
+    setFileInfo(null);
+    onDeleteFile && onDeleteFile();
+    methods?.setValue(name, null, { shouldDirty: true });
     handleOnchange && handleOnchange(name ?? "", null);
   };
-  (0, import_react22.useEffect)(() => {
-    return () => {
-      if (selectedPreview) {
-        URL.revokeObjectURL(selectedPreview);
-      }
-    };
-  }, [selectedPreview]);
   return {
-    inputId,
-    selectedFile,
-    selectedPreview,
-    initialFile,
-    binaryRef,
-    handleFileChange,
-    handleRemoveFile,
-    checkIsImageLink,
-    getBase64WithMimeType,
-    setInitialFile
+    onUploadFile,
+    onDeleteFile,
+    fileInfo,
+    url
   };
 };
 
@@ -6399,7 +6397,7 @@ var tableHeadController = (props) => {
 
 // src/widget/advance/table/table-view/controller.ts
 var import_react24 = require("react");
-var import_utils18 = require("@fctc/interface-logic/utils");
+var import_utils17 = require("@fctc/interface-logic/utils");
 var tableController = ({ data }) => {
   const [rows, setRows] = (0, import_react24.useState)([]);
   const [columnVisibility, setColumnVisibility] = (0, import_react24.useState)({});
@@ -6442,10 +6440,10 @@ var tableController = ({ data }) => {
   const columns = (0, import_react24.useMemo)(() => {
     try {
       return mergeFields?.filter((item) => {
-        return item?.widget !== "details_Receive_money" && !(item?.column_invisible ? import_utils18.domainHelper.matchDomains(
+        return item?.widget !== "details_Receive_money" && !(item?.column_invisible ? import_utils17.domainHelper.matchDomains(
           data.context,
           item?.column_invisible
-        ) : item?.invisible ? import_utils18.domainHelper.matchDomains(data.context, item?.invisible) : false);
+        ) : item?.invisible ? import_utils17.domainHelper.matchDomains(data.context, item?.invisible) : false);
       })?.map((field) => {
         const overridden = columnVisibility[field?.name];
         return {

package/dist/index.mjs

@@ -4504,6 +4504,28 @@ function useStorageState(key) {
   );
   return [state, setValue];
 }
+var guessTypeFromUrl = (url) => {
+  const ext = url.split(".").pop()?.toLowerCase();
+  if (!ext) return null;
+  const map = {
+    jpg: "image/jpeg",
+    jpeg: "image/jpeg",
+    png: "image/png",
+    webp: "image/webp",
+    gif: "image/gif",
+    svg: "image/svg+xml",
+    bmp: "image/bmp",
+    tiff: "image/tiff",
+    pdf: "application/pdf",
+    zip: "application/zip",
+    rar: "application/x-rar-compressed",
+    xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    xls: "application/vnd.ms-excel",
+    mp4: "video/mp4",
+    mov: "video/quicktime"
+  };
+  return map[ext] || null;
+};
 
 // src/utils.ts
 __reExport(utils_exports, utils_star);
@@ -6302,132 +6324,108 @@ var colorFieldController = (props) => {
 };
 
 // src/widget/basic/binary-field/controller.ts
-import { useEffect as useEffect13, useId as useId2, useRef as useRef4, useState as useState12 } from "react";
-import { isBase64Image } from "@fctc/interface-logic/utils";
-var ALLOWED_TYPES = [
-  "image/jpeg",
-  "image/png",
-  "application/pdf",
-  "video/mp4",
-  "application/zip",
-  "application/x-zip-compressed",
-  "application/vnd.ms-excel",
-  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-  "application/json"
-];
-var MAX_FILE_SIZE = 10 * 1024 * 1024;
-var MAX_TOTAL_SIZE = 50 * 1024 * 1024;
+import { useEffect as useEffect13, useState as useState12 } from "react";
 var binaryFieldController = (props) => {
   const {
     name,
     methods,
     readonly = false,
-    value,
     filename,
+    onChange: handleOnchange,
+    service,
+    xNode,
+    path,
     rootField,
     index,
-    onChange: handleOnchange
+    value
   } = props;
-  const inputId = useId2();
-  const [selectedFile, setSelectedFile] = useState12(null);
-  const [selectedPreview, setSelectedPreview] = useState12(null);
-  const [initialFile, setInitialFile] = useState12(value || null);
-  const binaryRef = useRef4(null);
-  const convertUrlToBase64 = async (url) => {
+  const { useUploadFile: useUploadFile2 } = (0, provider_exports.useService)();
+  const { mutateAsync } = useUploadFile2();
+  const [url, setUrl] = useState12(value || null);
+  const [fileInfo, setFileInfo] = useState12(null);
+  useEffect13(() => {
+    if (!value) return;
+    fetchFileMeta(value);
+  }, [value]);
+  const formatSize = (bytes) => {
+    if (bytes < 1024) return bytes + " B";
+    let kb = bytes / 1024;
+    if (kb < 1024) return kb.toFixed(2) + " KB";
+    let mb = kb / 1024;
+    if (mb < 1024) return mb.toFixed(2) + " MB";
+    return (mb / 1024).toFixed(2) + " GB";
+  };
+  const fetchFileMeta = async (url2) => {
     try {
-      const response = await fetch(url);
-      const blob = await response.blob();
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onloadend = () => resolve(reader.result);
-        reader.onerror = reject;
-        reader.readAsDataURL(blob);
+      const res = await fetch(url2, { method: "HEAD" });
+      const size = res.headers.get("content-length") || "";
+      let type = res.headers.get("content-type") || "";
+      const date = res.headers.get("last-modified") || "";
+      const guessed = guessTypeFromUrl(url2);
+      if (guessed) type = guessed;
+      setFileInfo({
+        size: size ? formatSize(Number(size)) : "--",
+        type,
+        date: date ? new Date(date).toLocaleString() : "--"
       });
-    } catch (error) {
-      console.error("Error converting URL to Base64:", error);
-      throw error;
+      setUrl(url2);
+    } catch (e) {
+      console.error(e);
     }
   };
-  const extractBase64Data = (base64Url) => base64Url.includes("base64,") ? base64Url.split("base64,")[1] : base64Url;
-  const isBlobUrl = (url) => /^blob:/.test(url);
-  const checkIsImageLink = (url) => {
-    const imageExtensions = /\.(jpg|jpeg|png|gif|bmp|webp|svg|tiff|ico)$/i;
-    return imageExtensions.test(url) || isBase64Image(url) || isBlobUrl(url);
-  };
-  const getBase64WithMimeType = (base64) => {
-    if (typeof base64 !== "string" || base64.length < 10) return null;
-    if (isBase64Image(base64)) return base64;
-    let mimeType = null;
-    if (base64.startsWith("iVBORw0KGgo")) mimeType = "image/png";
-    else if (base64.startsWith("/9j/")) mimeType = "image/jpeg";
-    else if (base64.startsWith("R0lGOD")) mimeType = "image/gif";
-    else if (base64.startsWith("Qk")) mimeType = "image/bmp";
-    else if (base64.startsWith("UklGR")) mimeType = "image/webp";
-    return mimeType ? `data:${mimeType};base64,${base64}` : null;
-  };
-  const handleFileChange = async (e, onChange) => {
-    if (readonly) return;
-    const file = e?.target?.files?.[0];
-    if (!file) return;
-    if (!ALLOWED_TYPES.includes(file.type)) {
-      alert(`File type not allowed: ${file.type}`);
-      return;
-    }
-    if (file.size > MAX_FILE_SIZE) {
-      alert(`File exceeds 10MB limit.`);
-      return;
-    }
-    const fileUrl = URL.createObjectURL(file);
-    setSelectedFile(file);
-    setSelectedPreview(fileUrl);
-    const base64 = await convertUrlToBase64(fileUrl);
-    const base64Data = extractBase64Data(base64);
-    methods?.setValue(name, base64Data, { shouldDirty: true });
-    onChange(base64Data);
-    handleOnchange && handleOnchange(name ?? "", base64Data);
+  const onUploadFile = async (formData) => {
+    const res = await mutateAsync({
+      formData,
+      service,
+      xNode,
+      path
+    });
+    const url2 = res?.url;
+    methods?.setValue(name, url2, { shouldDirty: true });
+    handleOnchange && handleOnchange(name ?? "", url2);
     if (filename) {
       methods?.setValue(
         rootField ? `${rootField?.name}.${index}.${filename}` : filename,
-        file?.name,
+        url2?.split("/").pop(),
         { shouldDirty: true }
       );
       handleOnchange && handleOnchange(
         rootField ? `${rootField?.name}.${index}.${filename}` : filename,
-        file?.name
+        url2?.split("/").pop()
       );
     }
+    setUrl(url2);
+    fetchFileMeta(url2);
+    return url2;
   };
-  const handleRemoveFile = (onChange) => {
-    if (selectedPreview) URL.revokeObjectURL(selectedPreview);
-    setSelectedFile(null);
-    setSelectedPreview(null);
-    setInitialFile(null);
-    onChange(null);
+  const onDeleteFile = () => {
+    if (filename) {
+      methods?.setValue(
+        rootField ? `${rootField?.name}.${index}.${filename}` : filename,
+        null,
+        { shouldDirty: true }
+      );
+      handleOnchange && handleOnchange(
+        rootField ? `${rootField?.name}.${index}.${filename}` : filename,
+        null
+      );
+    }
+    setUrl(null);
+    setFileInfo(null);
+    onDeleteFile && onDeleteFile();
+    methods?.setValue(name, null, { shouldDirty: true });
     handleOnchange && handleOnchange(name ?? "", null);
   };
-  useEffect13(() => {
-    return () => {
-      if (selectedPreview) {
-        URL.revokeObjectURL(selectedPreview);
-      }
-    };
-  }, [selectedPreview]);
   return {
-    inputId,
-    selectedFile,
-    selectedPreview,
-    initialFile,
-    binaryRef,
-    handleFileChange,
-    handleRemoveFile,
-    checkIsImageLink,
-    getBase64WithMimeType,
-    setInitialFile
+    onUploadFile,
+    onDeleteFile,
+    fileInfo,
+    url
   };
 };
 
 // src/widget/advance/table/table-head/controller.ts
-import { useMemo as useMemo9, useRef as useRef5 } from "react";
+import { useMemo as useMemo9, useRef as useRef4 } from "react";
 var tableHeadController = (props) => {
   const {
     typeTable,
@@ -6438,7 +6436,7 @@ var tableHeadController = (props) => {
     setSelectedRowKeys
   } = props;
   const { rowIds: recordIds } = useGetRowIds(tableRef);
-  const selectedRowKeysRef = useRef5(recordIds);
+  const selectedRowKeysRef = useRef4(recordIds);
   const isGroupTable = typeTable === "group";
   const recordsCheckedGroup = useMemo9(() => {
     if (!rows || !groupByList) return 0;

package/dist/widget.d.mts

@@ -1,5 +1,4 @@
 import * as react from 'react';
-import { ChangeEvent } from 'react';
 import { IInputFieldProps } from './types.mjs';
 import moment from 'moment';
 import '@fctc/interface-logic/types';
@@ -213,20 +212,24 @@ declare const colorFieldController: (props: IColorFieldProps) => {
     savePickColor: (colorObject: any) => Promise<void>;
 };
 
-declare const binaryFieldController: (props: IInputFieldProps & {
+interface IBinaryFieldProps extends IInputFieldProps {
+    service?: string;
+    xNode?: string;
+    path?: string;
     rootField?: any;
     index?: number;
-}) => {
-    inputId: string;
-    selectedFile: File | null;
-    selectedPreview: string | null;
-    initialFile: any;
-    binaryRef: react.RefObject<HTMLDivElement>;
-    handleFileChange: (e: ChangeEvent<HTMLInputElement>, onChange: (value: string | null) => void) => Promise<void>;
-    handleRemoveFile: (onChange: (value: string | null) => void) => void;
-    checkIsImageLink: (url: string) => boolean;
-    getBase64WithMimeType: (base64: string) => string | null;
-    setInitialFile: react.Dispatch<any>;
+}
+
+type FileInfor = {
+    type?: string;
+    date?: string;
+    size?: string;
+};
+declare const binaryFieldController: (props: IBinaryFieldProps) => {
+    onUploadFile: (formData: FormData) => Promise<any>;
+    onDeleteFile: () => void;
+    fileInfo: FileInfor | null;
+    url: any;
 };
 
 declare const tableHeadController: (props: any) => {

package/dist/widget.d.ts

@@ -1,5 +1,4 @@
 import * as react from 'react';
-import { ChangeEvent } from 'react';
 import { IInputFieldProps } from './types.js';
 import moment from 'moment';
 import '@fctc/interface-logic/types';
@@ -213,20 +212,24 @@ declare const colorFieldController: (props: IColorFieldProps) => {
     savePickColor: (colorObject: any) => Promise<void>;
 };
 
-declare const binaryFieldController: (props: IInputFieldProps & {
+interface IBinaryFieldProps extends IInputFieldProps {
+    service?: string;
+    xNode?: string;
+    path?: string;
     rootField?: any;
     index?: number;
-}) => {
-    inputId: string;
-    selectedFile: File | null;
-    selectedPreview: string | null;
-    initialFile: any;
-    binaryRef: react.RefObject<HTMLDivElement>;
-    handleFileChange: (e: ChangeEvent<HTMLInputElement>, onChange: (value: string | null) => void) => Promise<void>;
-    handleRemoveFile: (onChange: (value: string | null) => void) => void;
-    checkIsImageLink: (url: string) => boolean;
-    getBase64WithMimeType: (base64: string) => string | null;
-    setInitialFile: react.Dispatch<any>;
+}
+
+type FileInfor = {
+    type?: string;
+    date?: string;
+    size?: string;
+};
+declare const binaryFieldController: (props: IBinaryFieldProps) => {
+    onUploadFile: (formData: FormData) => Promise<any>;
+    onDeleteFile: () => void;
+    fileInfo: FileInfor | null;
+    url: any;
 };
 
 declare const tableHeadController: (props: any) => {

package/dist/widget.js

@@ -4305,6 +4305,28 @@ function useStorageState(key) {
   );
   return [state, setValue];
 }
+var guessTypeFromUrl = (url) => {
+  const ext = url.split(".").pop()?.toLowerCase();
+  if (!ext) return null;
+  const map = {
+    jpg: "image/jpeg",
+    jpeg: "image/jpeg",
+    png: "image/png",
+    webp: "image/webp",
+    gif: "image/gif",
+    svg: "image/svg+xml",
+    bmp: "image/bmp",
+    tiff: "image/tiff",
+    pdf: "application/pdf",
+    zip: "application/zip",
+    rar: "application/x-rar-compressed",
+    xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    xls: "application/vnd.ms-excel",
+    mp4: "video/mp4",
+    mov: "video/quicktime"
+  };
+  return map[ext] || null;
+};
 
 // src/utils.ts
 __reExport(utils_exports, require("@fctc/interface-logic/utils"));
@@ -5448,126 +5470,102 @@ var colorFieldController = (props) => {
 
 // src/widget/basic/binary-field/controller.ts
 var import_react22 = require("react");
-var import_utils16 = require("@fctc/interface-logic/utils");
-var ALLOWED_TYPES = [
-  "image/jpeg",
-  "image/png",
-  "application/pdf",
-  "video/mp4",
-  "application/zip",
-  "application/x-zip-compressed",
-  "application/vnd.ms-excel",
-  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-  "application/json"
-];
-var MAX_FILE_SIZE = 10 * 1024 * 1024;
-var MAX_TOTAL_SIZE = 50 * 1024 * 1024;
 var binaryFieldController = (props) => {
   const {
     name,
     methods,
     readonly = false,
-    value,
     filename,
+    onChange: handleOnchange,
+    service,
+    xNode,
+    path,
     rootField,
     index,
-    onChange: handleOnchange
+    value
   } = props;
-  const inputId = (0, import_react22.useId)();
-  const [selectedFile, setSelectedFile] = (0, import_react22.useState)(null);
-  const [selectedPreview, setSelectedPreview] = (0, import_react22.useState)(null);
-  const [initialFile, setInitialFile] = (0, import_react22.useState)(value || null);
-  const binaryRef = (0, import_react22.useRef)(null);
-  const convertUrlToBase64 = async (url) => {
+  const { useUploadFile: useUploadFile2 } = (0, provider_exports.useService)();
+  const { mutateAsync } = useUploadFile2();
+  const [url, setUrl] = (0, import_react22.useState)(value || null);
+  const [fileInfo, setFileInfo] = (0, import_react22.useState)(null);
+  (0, import_react22.useEffect)(() => {
+    if (!value) return;
+    fetchFileMeta(value);
+  }, [value]);
+  const formatSize = (bytes) => {
+    if (bytes < 1024) return bytes + " B";
+    let kb = bytes / 1024;
+    if (kb < 1024) return kb.toFixed(2) + " KB";
+    let mb = kb / 1024;
+    if (mb < 1024) return mb.toFixed(2) + " MB";
+    return (mb / 1024).toFixed(2) + " GB";
+  };
+  const fetchFileMeta = async (url2) => {
     try {
-      const response = await fetch(url);
-      const blob = await response.blob();
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onloadend = () => resolve(reader.result);
-        reader.onerror = reject;
-        reader.readAsDataURL(blob);
+      const res = await fetch(url2, { method: "HEAD" });
+      const size = res.headers.get("content-length") || "";
+      let type = res.headers.get("content-type") || "";
+      const date = res.headers.get("last-modified") || "";
+      const guessed = guessTypeFromUrl(url2);
+      if (guessed) type = guessed;
+      setFileInfo({
+        size: size ? formatSize(Number(size)) : "--",
+        type,
+        date: date ? new Date(date).toLocaleString() : "--"
       });
-    } catch (error) {
-      console.error("Error converting URL to Base64:", error);
-      throw error;
+      setUrl(url2);
+    } catch (e) {
+      console.error(e);
     }
   };
-  const extractBase64Data = (base64Url) => base64Url.includes("base64,") ? base64Url.split("base64,")[1] : base64Url;
-  const isBlobUrl = (url) => /^blob:/.test(url);
-  const checkIsImageLink = (url) => {
-    const imageExtensions = /\.(jpg|jpeg|png|gif|bmp|webp|svg|tiff|ico)$/i;
-    return imageExtensions.test(url) || (0, import_utils16.isBase64Image)(url) || isBlobUrl(url);
-  };
-  const getBase64WithMimeType = (base64) => {
-    if (typeof base64 !== "string" || base64.length < 10) return null;
-    if ((0, import_utils16.isBase64Image)(base64)) return base64;
-    let mimeType = null;
-    if (base64.startsWith("iVBORw0KGgo")) mimeType = "image/png";
-    else if (base64.startsWith("/9j/")) mimeType = "image/jpeg";
-    else if (base64.startsWith("R0lGOD")) mimeType = "image/gif";
-    else if (base64.startsWith("Qk")) mimeType = "image/bmp";
-    else if (base64.startsWith("UklGR")) mimeType = "image/webp";
-    return mimeType ? `data:${mimeType};base64,${base64}` : null;
-  };
-  const handleFileChange = async (e, onChange) => {
-    if (readonly) return;
-    const file = e?.target?.files?.[0];
-    if (!file) return;
-    if (!ALLOWED_TYPES.includes(file.type)) {
-      alert(`File type not allowed: ${file.type}`);
-      return;
-    }
-    if (file.size > MAX_FILE_SIZE) {
-      alert(`File exceeds 10MB limit.`);
-      return;
-    }
-    const fileUrl = URL.createObjectURL(file);
-    setSelectedFile(file);
-    setSelectedPreview(fileUrl);
-    const base64 = await convertUrlToBase64(fileUrl);
-    const base64Data = extractBase64Data(base64);
-    methods?.setValue(name, base64Data, { shouldDirty: true });
-    onChange(base64Data);
-    handleOnchange && handleOnchange(name ?? "", base64Data);
+  const onUploadFile = async (formData) => {
+    const res = await mutateAsync({
+      formData,
+      service,
+      xNode,
+      path
+    });
+    const url2 = res?.url;
+    methods?.setValue(name, url2, { shouldDirty: true });
+    handleOnchange && handleOnchange(name ?? "", url2);
     if (filename) {
       methods?.setValue(
         rootField ? `${rootField?.name}.${index}.${filename}` : filename,
-        file?.name,
+        url2?.split("/").pop(),
         { shouldDirty: true }
       );
       handleOnchange && handleOnchange(
         rootField ? `${rootField?.name}.${index}.${filename}` : filename,
-        file?.name
+        url2?.split("/").pop()
       );
     }
+    setUrl(url2);
+    fetchFileMeta(url2);
+    return url2;
   };
-  const handleRemoveFile = (onChange) => {
-    if (selectedPreview) URL.revokeObjectURL(selectedPreview);
-    setSelectedFile(null);
-    setSelectedPreview(null);
-    setInitialFile(null);
-    onChange(null);
+  const onDeleteFile = () => {
+    if (filename) {
+      methods?.setValue(
+        rootField ? `${rootField?.name}.${index}.${filename}` : filename,
+        null,
+        { shouldDirty: true }
+      );
+      handleOnchange && handleOnchange(
+        rootField ? `${rootField?.name}.${index}.${filename}` : filename,
+        null
+      );
+    }
+    setUrl(null);
+    setFileInfo(null);
+    onDeleteFile && onDeleteFile();
+    methods?.setValue(name, null, { shouldDirty: true });
     handleOnchange && handleOnchange(name ?? "", null);
   };
-  (0, import_react22.useEffect)(() => {
-    return () => {
-      if (selectedPreview) {
-        URL.revokeObjectURL(selectedPreview);
-      }
-    };
-  }, [selectedPreview]);
   return {
-    inputId,
-    selectedFile,
-    selectedPreview,
-    initialFile,
-    binaryRef,
-    handleFileChange,
-    handleRemoveFile,
-    checkIsImageLink,
-    getBase64WithMimeType,
-    setInitialFile
+    onUploadFile,
+    onDeleteFile,
+    fileInfo,
+    url
   };
 };
 
@@ -5639,7 +5637,7 @@ var tableHeadController = (props) => {
 
 // src/widget/advance/table/table-view/controller.ts
 var import_react24 = require("react");
-var import_utils18 = require("@fctc/interface-logic/utils");
+var import_utils17 = require("@fctc/interface-logic/utils");
 var tableController = ({ data }) => {
   const [rows, setRows] = (0, import_react24.useState)([]);
   const [columnVisibility, setColumnVisibility] = (0, import_react24.useState)({});
@@ -5682,10 +5680,10 @@ var tableController = ({ data }) => {
   const columns = (0, import_react24.useMemo)(() => {
     try {
       return mergeFields?.filter((item) => {
-        return item?.widget !== "details_Receive_money" && !(item?.column_invisible ? import_utils18.domainHelper.matchDomains(
+        return item?.widget !== "details_Receive_money" && !(item?.column_invisible ? import_utils17.domainHelper.matchDomains(
           data.context,
           item?.column_invisible
-        ) : item?.invisible ? import_utils18.domainHelper.matchDomains(data.context, item?.invisible) : false);
+        ) : item?.invisible ? import_utils17.domainHelper.matchDomains(data.context, item?.invisible) : false);
       })?.map((field) => {
         const overridden = columnVisibility[field?.name];
         return {

package/dist/widget.mjs

@@ -4372,6 +4372,28 @@ function useStorageState(key) {
   );
   return [state, setValue];
 }
+var guessTypeFromUrl = (url) => {
+  const ext = url.split(".").pop()?.toLowerCase();
+  if (!ext) return null;
+  const map = {
+    jpg: "image/jpeg",
+    jpeg: "image/jpeg",
+    png: "image/png",
+    webp: "image/webp",
+    gif: "image/gif",
+    svg: "image/svg+xml",
+    bmp: "image/bmp",
+    tiff: "image/tiff",
+    pdf: "application/pdf",
+    zip: "application/zip",
+    rar: "application/x-rar-compressed",
+    xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    xls: "application/vnd.ms-excel",
+    mp4: "video/mp4",
+    mov: "video/quicktime"
+  };
+  return map[ext] || null;
+};
 
 // src/utils.ts
 __reExport(utils_exports, utils_star);
@@ -5519,132 +5541,108 @@ var colorFieldController = (props) => {
 };
 
 // src/widget/basic/binary-field/controller.ts
-import { useEffect as useEffect13, useId as useId2, useRef as useRef4, useState as useState12 } from "react";
-import { isBase64Image } from "@fctc/interface-logic/utils";
-var ALLOWED_TYPES = [
-  "image/jpeg",
-  "image/png",
-  "application/pdf",
-  "video/mp4",
-  "application/zip",
-  "application/x-zip-compressed",
-  "application/vnd.ms-excel",
-  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-  "application/json"
-];
-var MAX_FILE_SIZE = 10 * 1024 * 1024;
-var MAX_TOTAL_SIZE = 50 * 1024 * 1024;
+import { useEffect as useEffect13, useState as useState12 } from "react";
 var binaryFieldController = (props) => {
   const {
     name,
     methods,
     readonly = false,
-    value,
     filename,
+    onChange: handleOnchange,
+    service,
+    xNode,
+    path,
     rootField,
     index,
-    onChange: handleOnchange
+    value
   } = props;
-  const inputId = useId2();
-  const [selectedFile, setSelectedFile] = useState12(null);
-  const [selectedPreview, setSelectedPreview] = useState12(null);
-  const [initialFile, setInitialFile] = useState12(value || null);
-  const binaryRef = useRef4(null);
-  const convertUrlToBase64 = async (url) => {
+  const { useUploadFile: useUploadFile2 } = (0, provider_exports.useService)();
+  const { mutateAsync } = useUploadFile2();
+  const [url, setUrl] = useState12(value || null);
+  const [fileInfo, setFileInfo] = useState12(null);
+  useEffect13(() => {
+    if (!value) return;
+    fetchFileMeta(value);
+  }, [value]);
+  const formatSize = (bytes) => {
+    if (bytes < 1024) return bytes + " B";
+    let kb = bytes / 1024;
+    if (kb < 1024) return kb.toFixed(2) + " KB";
+    let mb = kb / 1024;
+    if (mb < 1024) return mb.toFixed(2) + " MB";
+    return (mb / 1024).toFixed(2) + " GB";
+  };
+  const fetchFileMeta = async (url2) => {
     try {
-      const response = await fetch(url);
-      const blob = await response.blob();
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onloadend = () => resolve(reader.result);
-        reader.onerror = reject;
-        reader.readAsDataURL(blob);
+      const res = await fetch(url2, { method: "HEAD" });
+      const size = res.headers.get("content-length") || "";
+      let type = res.headers.get("content-type") || "";
+      const date = res.headers.get("last-modified") || "";
+      const guessed = guessTypeFromUrl(url2);
+      if (guessed) type = guessed;
+      setFileInfo({
+        size: size ? formatSize(Number(size)) : "--",
+        type,
+        date: date ? new Date(date).toLocaleString() : "--"
       });
-    } catch (error) {
-      console.error("Error converting URL to Base64:", error);
-      throw error;
+      setUrl(url2);
+    } catch (e) {
+      console.error(e);
     }
   };
-  const extractBase64Data = (base64Url) => base64Url.includes("base64,") ? base64Url.split("base64,")[1] : base64Url;
-  const isBlobUrl = (url) => /^blob:/.test(url);
-  const checkIsImageLink = (url) => {
-    const imageExtensions = /\.(jpg|jpeg|png|gif|bmp|webp|svg|tiff|ico)$/i;
-    return imageExtensions.test(url) || isBase64Image(url) || isBlobUrl(url);
-  };
-  const getBase64WithMimeType = (base64) => {
-    if (typeof base64 !== "string" || base64.length < 10) return null;
-    if (isBase64Image(base64)) return base64;
-    let mimeType = null;
-    if (base64.startsWith("iVBORw0KGgo")) mimeType = "image/png";
-    else if (base64.startsWith("/9j/")) mimeType = "image/jpeg";
-    else if (base64.startsWith("R0lGOD")) mimeType = "image/gif";
-    else if (base64.startsWith("Qk")) mimeType = "image/bmp";
-    else if (base64.startsWith("UklGR")) mimeType = "image/webp";
-    return mimeType ? `data:${mimeType};base64,${base64}` : null;
-  };
-  const handleFileChange = async (e, onChange) => {
-    if (readonly) return;
-    const file = e?.target?.files?.[0];
-    if (!file) return;
-    if (!ALLOWED_TYPES.includes(file.type)) {
-      alert(`File type not allowed: ${file.type}`);
-      return;
-    }
-    if (file.size > MAX_FILE_SIZE) {
-      alert(`File exceeds 10MB limit.`);
-      return;
-    }
-    const fileUrl = URL.createObjectURL(file);
-    setSelectedFile(file);
-    setSelectedPreview(fileUrl);
-    const base64 = await convertUrlToBase64(fileUrl);
-    const base64Data = extractBase64Data(base64);
-    methods?.setValue(name, base64Data, { shouldDirty: true });
-    onChange(base64Data);
-    handleOnchange && handleOnchange(name ?? "", base64Data);
+  const onUploadFile = async (formData) => {
+    const res = await mutateAsync({
+      formData,
+      service,
+      xNode,
+      path
+    });
+    const url2 = res?.url;
+    methods?.setValue(name, url2, { shouldDirty: true });
+    handleOnchange && handleOnchange(name ?? "", url2);
     if (filename) {
       methods?.setValue(
         rootField ? `${rootField?.name}.${index}.${filename}` : filename,
-        file?.name,
+        url2?.split("/").pop(),
         { shouldDirty: true }
       );
       handleOnchange && handleOnchange(
         rootField ? `${rootField?.name}.${index}.${filename}` : filename,
-        file?.name
+        url2?.split("/").pop()
       );
     }
+    setUrl(url2);
+    fetchFileMeta(url2);
+    return url2;
   };
-  const handleRemoveFile = (onChange) => {
-    if (selectedPreview) URL.revokeObjectURL(selectedPreview);
-    setSelectedFile(null);
-    setSelectedPreview(null);
-    setInitialFile(null);
-    onChange(null);
+  const onDeleteFile = () => {
+    if (filename) {
+      methods?.setValue(
+        rootField ? `${rootField?.name}.${index}.${filename}` : filename,
+        null,
+        { shouldDirty: true }
+      );
+      handleOnchange && handleOnchange(
+        rootField ? `${rootField?.name}.${index}.${filename}` : filename,
+        null
+      );
+    }
+    setUrl(null);
+    setFileInfo(null);
+    onDeleteFile && onDeleteFile();
+    methods?.setValue(name, null, { shouldDirty: true });
     handleOnchange && handleOnchange(name ?? "", null);
   };
-  useEffect13(() => {
-    return () => {
-      if (selectedPreview) {
-        URL.revokeObjectURL(selectedPreview);
-      }
-    };
-  }, [selectedPreview]);
   return {
-    inputId,
-    selectedFile,
-    selectedPreview,
-    initialFile,
-    binaryRef,
-    handleFileChange,
-    handleRemoveFile,
-    checkIsImageLink,
-    getBase64WithMimeType,
-    setInitialFile
+    onUploadFile,
+    onDeleteFile,
+    fileInfo,
+    url
   };
 };
 
 // src/widget/advance/table/table-head/controller.ts
-import { useMemo as useMemo9, useRef as useRef5 } from "react";
+import { useMemo as useMemo9, useRef as useRef4 } from "react";
 var tableHeadController = (props) => {
   const {
     typeTable,
@@ -5655,7 +5653,7 @@ var tableHeadController = (props) => {
     setSelectedRowKeys
   } = props;
   const { rowIds: recordIds } = useGetRowIds(tableRef);
-  const selectedRowKeysRef = useRef5(recordIds);
+  const selectedRowKeysRef = useRef4(recordIds);
   const isGroupTable = typeTable === "group";
   const recordsCheckedGroup = useMemo9(() => {
     if (!rows || !groupByList) return 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fctc/widget-logic",
-  "version": "4.8.8",
+  "version": "4.9.0",
   "types": "dist/index.d.ts",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -74,7 +74,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@fctc/interface-logic": "^4.1.9",
+    "@fctc/interface-logic": "^4.2.1",
     "@headlessui/react": "^2.2.6",
     "@tanstack/react-query": "^5.84.0",
     "i18next": "^25.3.2",