@herca/rn-kit 0.1.100 → 0.1.102

package/src/Icon/icons/Global.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const GlobalIcon: React.FC<Props> = ({
+  size = 24,
+  color = 'currentColor',
+  style,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 20 20" fill="none" style={style}>
+    <Path
+      d="M6.37496 17.4243C6.34996 17.4243 6.31663 17.441 6.29163 17.441C4.67496 16.641 3.35829 15.316 2.54996 13.6993C2.54996 13.6743 2.56663 13.641 2.56663 13.616C3.58329 13.916 4.63329 14.141 5.67496 14.316C5.85829 15.366 6.07496 16.4077 6.37496 17.4243Z"
+      fill={color}
+    />
+    <Path
+      d="M17.45 13.7077C16.625 15.366 15.25 16.7077 13.575 17.516C13.8916 16.4577 14.1583 15.391 14.3333 14.316C15.3833 14.141 16.4166 13.916 17.4333 13.616C17.425 13.6493 17.45 13.6827 17.45 13.7077Z"
+      fill={color}
+    />
+    <Path
+      d="M17.5166 6.42435C16.4666 6.10768 15.4083 5.84935 14.3333 5.66602C14.1583 4.59102 13.9 3.52435 13.575 2.48268C15.3 3.30768 16.6916 4.69935 17.5166 6.42435Z"
+      fill={color}
+    />
+    <Path
+      d="M6.37496 2.57435C6.07496 3.59102 5.85829 4.62435 5.68329 5.67435C4.60829 5.84102 3.54163 6.10768 2.48329 6.42435C3.29163 4.74935 4.63329 3.37435 6.29163 2.54935C6.31663 2.54935 6.34996 2.57435 6.37496 2.57435Z"
+      fill={color}
+    />
+    <Path
+      d="M12.9083 5.49102C10.975 5.27435 9.02496 5.27435 7.09163 5.49102C7.29996 4.34935 7.56663 3.20768 7.94163 2.10768C7.95829 2.04102 7.94996 1.99102 7.95829 1.92435C8.61663 1.76602 9.29163 1.66602 9.99996 1.66602C10.7 1.66602 11.3833 1.76602 12.0333 1.92435C12.0416 1.99102 12.0416 2.04102 12.0583 2.10768C12.4333 3.21602 12.7 4.34935 12.9083 5.49102Z"
+      fill={color}
+    />
+    <Path
+      d="M5.49163 12.9077C4.34163 12.6993 3.20829 12.4327 2.10829 12.0577C2.04163 12.041 1.99163 12.0493 1.92496 12.041C1.76663 11.3827 1.66663 10.7077 1.66663 9.99935C1.66663 9.29935 1.76663 8.61602 1.92496 7.96602C1.99163 7.95768 2.04163 7.95768 2.10829 7.94102C3.21663 7.57435 4.34163 7.29935 5.49163 7.09102C5.28329 9.02435 5.28329 10.9743 5.49163 12.9077Z"
+      fill={color}
+    />
+    <Path
+      d="M18.3333 9.99935C18.3333 10.7077 18.2333 11.3827 18.075 12.041C18.0083 12.0493 17.9583 12.041 17.8916 12.0577C16.7833 12.4243 15.65 12.6993 14.5083 12.9077C14.725 10.9743 14.725 9.02435 14.5083 7.09102C15.65 7.29935 16.7916 7.56602 17.8916 7.94102C17.9583 7.95768 18.0083 7.96602 18.075 7.96602C18.2333 8.62435 18.3333 9.29935 18.3333 9.99935Z"
+      fill={color}
+    />
+    <Path
+      d="M12.9083 14.5077C12.7 15.6577 12.4333 16.791 12.0583 17.891C12.0416 17.9577 12.0416 18.0077 12.0333 18.0743C11.3833 18.2327 10.7 18.3327 9.99996 18.3327C9.29163 18.3327 8.61663 18.2327 7.95829 18.0743C7.94996 18.0077 7.95829 17.9577 7.94163 17.891C7.57496 16.7827 7.29996 15.6577 7.09163 14.5077C8.05829 14.616 9.02496 14.691 9.99996 14.691C10.975 14.691 11.95 14.616 12.9083 14.5077Z"
+      fill={color}
+    />
+    <Path
+      d="M13.1361 13.1355C11.0518 13.3984 8.9481 13.3984 6.86385 13.1355C6.60088 11.0512 6.60088 8.94749 6.86385 6.86324C8.9481 6.60027 11.0518 6.60027 13.1361 6.86324C13.399 8.94749 13.399 11.0512 13.1361 13.1355Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default GlobalIcon;

package/src/Icon/icons/Hierarchy3.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  style?: object;
+  color?: string;
+}
+
+const Hierarchy3: React.FC<Props> = ({ size = 24, style, color = '#000' }) => (
+  <Svg width={size} height={size} viewBox="0 0 20 20" fill="none" style={style}>
+    <Path
+      d="M4.1665 6.66699C5.54722 6.66699 6.6665 5.5477 6.6665 4.16699C6.6665 2.78628 5.54722 1.66699 4.1665 1.66699C2.78579 1.66699 1.6665 2.78628 1.6665 4.16699C1.6665 5.5477 2.78579 6.66699 4.1665 6.66699Z"
+      fill={color}
+    />
+    <Path
+      d="M15.8332 12.5003C17.2139 12.5003 18.3332 11.381 18.3332 10.0003C18.3332 8.61961 17.2139 7.50033 15.8332 7.50033C14.4525 7.50033 13.3332 8.61961 13.3332 10.0003C13.3332 11.381 14.4525 12.5003 15.8332 12.5003Z"
+      fill={color}
+    />
+    <Path
+      d="M4.1665 18.3337C5.54722 18.3337 6.6665 17.2144 6.6665 15.8337C6.6665 14.4529 5.54722 13.3337 4.1665 13.3337C2.78579 13.3337 1.6665 14.4529 1.6665 15.8337C1.6665 17.2144 2.78579 18.3337 4.1665 18.3337Z"
+      fill={color}
+    />
+    <Path
+      d="M4.1665 13.9587C3.82484 13.9587 3.5415 13.6753 3.5415 13.3337V6.66699C3.5415 6.32533 3.82484 6.04199 4.1665 6.04199C4.50817 6.04199 4.7915 6.32533 4.7915 6.66699C4.7915 8.49199 5.67484 9.37533 7.49984 9.37533H13.3332C13.6748 9.37533 13.9582 9.65866 13.9582 10.0003C13.9582 10.342 13.6748 10.6253 13.3332 10.6253H7.49984C6.3665 10.6253 5.45817 10.3337 4.7915 9.78366V13.3337C4.7915 13.6753 4.50817 13.9587 4.1665 13.9587Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default Hierarchy3;

package/src/Icon/icons/ScanQr.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const ScanQr: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 32 32" fill="none" style={style}>
+    <Path
+      d="M11.6667 28C11.6667 28.552 11.2187 29 10.6667 29H6C4.12133 29 3 27.8787 3 26V21.3333C3 20.7813 3.448 20.3333 4 20.3333C4.552 20.3333 5 20.7813 5 21.3333V26C5 26.7853 5.21467 27 6 27H10.6667C11.2187 27 11.6667 27.448 11.6667 28ZM4 11.6667C4.552 11.6667 5 11.2187 5 10.6667V6C5 5.21467 5.21467 5 6 5H10.6667C11.2187 5 11.6667 4.552 11.6667 4C11.6667 3.448 11.2187 3 10.6667 3H6C4.12133 3 3 4.12133 3 6V10.6667C3 11.2187 3.448 11.6667 4 11.6667ZM26 3H21.3333C20.7813 3 20.3333 3.448 20.3333 4C20.3333 4.552 20.7813 5 21.3333 5H26C26.7853 5 27 5.21467 27 6V10.6667C27 11.2187 27.448 11.6667 28 11.6667C28.552 11.6667 29 11.2187 29 10.6667V6C29 4.12133 27.8787 3 26 3ZM28 20.3333C27.448 20.3333 27 20.7813 27 21.3333V26C27 26.7853 26.7853 27 26 27H21.3333C20.7813 27 20.3333 27.448 20.3333 28C20.3333 28.552 20.7813 29 21.3333 29H26C27.8787 29 29 27.8787 29 26V21.3333C29 20.7813 28.552 20.3333 28 20.3333ZM18.3333 14.6667H21.6667C22.3333 14.6667 22.6667 14.3333 22.6667 13.6667V10.3333C22.6667 9.66667 22.3333 9.33333 21.6667 9.33333H18.3333C17.6667 9.33333 17.3333 9.66667 17.3333 10.3333V13.6667C17.3333 14.3333 17.6667 14.6667 18.3333 14.6667ZM13.6667 17.3333H10.3333C9.66667 17.3333 9.33333 17.6667 9.33333 18.3333V21.6667C9.33333 22.3333 9.66667 22.6667 10.3333 22.6667H13.6667C14.3333 22.6667 14.6667 22.3333 14.6667 21.6667V18.3333C14.6667 17.6667 14.3333 17.3333 13.6667 17.3333ZM22.6667 21.6667V18.3333C22.6667 17.6667 22.3333 17.3333 21.6667 17.3333H18.3333C17.6667 17.3333 17.3333 17.6667 17.3333 18.3333V21.6667C17.3333 22.3333 17.6667 22.6667 18.3333 22.6667H21.6667C22.3333 22.6667 22.6667 22.3333 22.6667 21.6667ZM13.6667 9.33333H10.3333C9.66667 9.33333 9.33333 9.66667 9.33333 10.3333V13.6667C9.33333 14.3333 9.66667 14.6667 10.3333 14.6667H13.6667C14.3333 14.6667 14.6667 14.3333 14.6667 13.6667V10.3333C14.6667 9.66667 14.3333 9.33333 13.6667 9.33333Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default ScanQr;

package/src/Icon/icons/UserSquareOutline.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const UserSquareOutline: React.FC<Props> = ({
+  size = 24,
+  color = '#909090',
+  style,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 20 20" fill="none" style={style}>
+    <Path
+      d="M13.4915 1.66699H6.50817C3.47484 1.66699 1.6665 3.47533 1.6665 6.50866V13.492C1.6665 15.8337 2.7415 17.442 4.63317 18.0503C5.18317 18.242 5.8165 18.3337 6.50817 18.3337H13.4915C14.1832 18.3337 14.8165 18.242 15.3665 18.0503C17.2582 17.442 18.3332 15.8337 18.3332 13.492V6.50866C18.3332 3.47533 16.5248 1.66699 13.4915 1.66699ZM17.0832 13.492C17.0832 15.2753 16.3832 16.4003 14.9748 16.867C14.1665 15.2753 12.2498 14.142 9.99984 14.142C7.74984 14.142 5.8415 15.267 5.02484 16.867H5.0165C3.62484 16.417 2.9165 15.2837 2.9165 13.5003V6.50866C2.9165 4.15866 4.15817 2.91699 6.50817 2.91699H13.4915C15.8415 2.91699 17.0832 4.15866 17.0832 6.50866V13.492Z"
+      fill={color}
+    />
+    <Path
+      d="M9.99984 6.66699C8.34984 6.66699 7.0165 8.00033 7.0165 9.65033C7.0165 11.3003 8.34984 12.642 9.99984 12.642C11.6498 12.642 12.9832 11.3003 12.9832 9.65033C12.9832 8.00033 11.6498 6.66699 9.99984 6.66699Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default UserSquareOutline;

package/src/Icon/type.tsx

@@ -145,7 +145,15 @@ export type IconNameProps =
   | 'calendar-plus'
   | 'calendar-clock'
   | 'sort-vertical'
-  | 'warning-letter';
+  | 'warning-letter'
+  | 'bar-code'
+  | 'devices'
+  | 'user-square-outline'
+  | 'box-search-outline'
+  | 'hierarchy-3'
+  | 'global'
+  | 'scan-qr'
+  | 'cube-scan';
 export interface IconProps {
   name: IconNameProps;
   size?: number;

package/src/Input/InputFile.tsx

@@ -1,9 +1,9 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { View } from 'react-native';
 import Color from '../Color/Color';
 import Typography from '../Typography/Typography';
 
-import { pick } from '@react-native-documents/picker';
+import { pick, types } from '@react-native-documents/picker';
 import { viewDocument } from '@react-native-documents/viewer';
 import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
 import { spacing } from '../styles/spacing';
@@ -14,64 +14,24 @@ import ModalDelete from './partials/InputFile/ModalDelete';
 import ModalPicker from './partials/InputFile/ModalPicker';
 import CardTriggerSmall from './partials/InputFile/CardTriggerSmall';
 import ReactNativeBlobUtil from 'react-native-blob-util';
-
-export interface ModalOption {
-  title?: string;
-  description?: string;
-}
-export interface ModalPickFileText {
-  title?: string;
-  description?: string;
-  camera?: ModalOption;
-  gallery?: ModalOption;
-  document?: ModalOption;
-}
-
-export interface ChangeLabelProps {
-  label?: string;
-  placeholder?: string;
-}
-
-type BaseInputFileProps = {
-  title?: string;
-  accept?: string[];
-  multiple?: boolean;
-  onChange?: (files: any) => void;
-  value?: any[];
-  modalPickFileText?: ModalPickFileText;
-  btnChooseFileText?: string;
-  modalDeleteText?: ModalOption & {
-    confirmBtn?: {
-      confirm?: string;
-      cancel?: string;
-    };
-  };
-  hasError?: boolean;
-};
-
-type DefaultVariantProps = BaseInputFileProps & {
-  variant?: 'default';
-  description?: string;
-  useChangeLabel?: boolean;
-  changeLableProps?: ChangeLabelProps;
-  hint?: string;
-};
-
-type SmallVariantProps = BaseInputFileProps & {
-  variant: 'small';
-  description?: never;
-  useChangeLabel?: never;
-  changeLableProps?: never;
-  hint?: never;
-};
-
-// Union type
-type InputFileProps = DefaultVariantProps | SmallVariantProps;
+import type {
+  FileItem,
+  InputFileProps,
+  UploadConfig,
+  UploadedFile,
+} from './type';
+import { uploadFile } from './helpers/uploadFile';
 
 export default function InputFile({
   title = 'Upload File',
   description = 'File harus berformat JPG, PNG dan PDF',
-  accept = ['application/pdf', 'image/jpeg', 'image/png'],
+  accept = [
+    'application/pdf',
+    'image/jpeg',
+    'image/png',
+    types.pdf,
+    types.images,
+  ],
   btnChooseFileText = 'Choose File',
   multiple = false,
   value,
@@ -83,39 +43,81 @@ export default function InputFile({
   hint,
   hasError,
   onChange,
+  uploadConfig,
+  maxSize = 5, //5MB
+  maxSizeErrorMessage,
 }: InputFileProps) {
-  const [isOpenBottomSheetTypeFile, setIsOpenBottomSheetTypeFile] =
-    useState(false);
-  const [isOpenBottomSheetDeleteFile, setIsOpenBottomSheetDeleteFile] =
-    useState(false);
-  const [files, setFiles] = useState<any[]>(value || []);
-  const [selectedFileIndex, setSelectedFileIndex] = useState<number | null>(
-    null
-  );
+  const [isOpenBottomSheetTypeFile, setIsOpenBottomSheetTypeFile] = useState(false); //prettier-ignore
+  const [isOpenBottomSheetDeleteFile, setIsOpenBottomSheetDeleteFile] = useState(false); //prettier-ignore
+  const [selectedFileIndex, setSelectedFileIndex] = useState<number | null>(null); //prettier-ignore
+  const [uploadedFiles, setUploadedFiles] = useState<UploadedFile<unknown>[]>([]); //prettier-ignore
+  const [internalErrorMessage, setInternalErrorMessage] = useState<string | null>(null); //prettier-ignore
+  const [files, setFiles] = useState<FileItem[]>(value || []);
+  const filesRef = useRef<FileItem[]>(files);
 
-  const handleOnPresChoseFile = () => {
-    setIsOpenBottomSheetTypeFile(true);
-  };
+  const calculatedMaxSize = maxSize * 1024 * 1024;
 
-  const handlePickFile = async () => {
-    try {
-      if (selectedFileIndex !== null) {
-        confirmReplaceFile(selectedFileIndex);
-        return;
-      }
+  const uploadAndTrack = async (newFiles: FileItem[], config: UploadConfig) => {
+    setIsOpenBottomSheetTypeFile(false);
 
-      const result = await pick({ type: accept, multiple });
-      const pickedFiles = multiple ? result : [result[0]];
-      const newFiles = [...files, ...pickedFiles];
-      setFiles(newFiles);
-      onChange?.(newFiles);
+    const withLoading = newFiles.map((f) => ({ ...f, uploading: true }));
+    setFiles((prev) => [...prev, ...withLoading]);
+
+    const results = await Promise.all(
+      newFiles.map((f) => uploadFile(f, config))
+    );
+
+    const currentFiles = filesRef.current;
+    const updatedFiles = currentFiles.map((f) => {
+      const match = results.find(
+        (r) => r.originalName === ('name' in f ? f.name : f.fileName)
+      );
+
+      if (!match) return f;
+
+      return {
+        ...f,
+        uploading: false,
+        error: match.uploadedData === null,
+        uploadedData: match.uploadedData,
+        hint:
+          match.uploadedData === null
+            ? (config.errorMessage ?? 'Upload gagal')
+            : f.hint,
+      };
+    });
+
+    setFiles(updatedFiles);
+
+    const newUploaded = [...uploadedFiles, ...results];
+    setUploadedFiles(newUploaded);
+    uploadConfig?.onUploadSuccess?.(newUploaded);
+    onChange?.(updatedFiles);
+  };
+
+  // validate max size
+  const validateMaxSize = (
+    assets: { size?: number | null; fileSize?: number | null }[]
+  ): boolean => {
+    if (!maxSize) return true;
+
+    const oversized = assets.filter((f) => {
+      const size = f.size ?? f.fileSize ?? 0;
+      return size > (calculatedMaxSize ?? Infinity);
+    });
+
+    if (oversized.length > 0) {
+      setInternalErrorMessage(
+        maxSizeErrorMessage ?? 'Ukuran file melebihi batas maksimal'
+      );
       setIsOpenBottomSheetTypeFile(false);
-    } catch (error: any) {
-      if (error?.message?.toLowerCase().includes('user canceled')) return;
-      console.error('Failed to pick document:', error);
+      return false;
     }
+
+    return true;
   };
 
+  // preview file
   const handlePreviewFile = async (file: any) => {
     try {
       let fileUri = file.uri;
@@ -145,18 +147,63 @@ export default function InputFile({
     }
   };
 
+  // pick file
+  const handlePickFile = async () => {
+    try {
+      if (selectedFileIndex !== null) {
+        confirmReplaceFile(selectedFileIndex);
+        return;
+      }
+
+      const result = await pick({
+        type: accept,
+        allowMultiSelection: multiple,
+      });
+
+      const pickedFiles = multiple ? result : [result[0]];
+
+      if (!validateMaxSize(pickedFiles)) return;
+      setInternalErrorMessage(null);
+
+      if (uploadConfig) {
+        await uploadAndTrack(
+          pickedFiles as unknown as FileItem[],
+          uploadConfig
+        );
+      } else {
+        const newFiles = [...files, ...(pickedFiles as unknown as FileItem[])];
+        setFiles(newFiles);
+        onChange?.(newFiles);
+      }
+
+      setIsOpenBottomSheetTypeFile(false);
+    } catch (error: any) {
+      if (error?.message?.toLowerCase().includes('user canceled')) return;
+      console.error('Failed to pick document:', error);
+    }
+  };
+
   const handleOnPressButtonCamera = async () => {
     try {
       if (selectedFileIndex !== null) {
-        confirmReplaceFile(selectedFileIndex, 'camera');
+        await confirmReplaceFile(selectedFileIndex, 'camera');
         return;
       }
 
       const result = await launchCamera({ mediaType: 'photo' });
       if (result.didCancel || !result.assets) return;
-      const newFiles = [...files, result.assets[0]];
-      setFiles(newFiles);
-      onChange?.(newFiles);
+
+      if (!validateMaxSize(result.assets)) return;
+      setInternalErrorMessage(null);
+
+      if (uploadConfig) {
+        await uploadAndTrack(result.assets as FileItem[], uploadConfig);
+      } else {
+        const newFiles = [...files, result.assets[0] as FileItem];
+        setFiles(newFiles);
+        onChange?.(newFiles);
+      }
+
       setIsOpenBottomSheetTypeFile(false);
     } catch (error: any) {
       console.error('Failed to open camera:', error);
@@ -166,7 +213,7 @@ export default function InputFile({
   const handleOnPressButtonGallery = async () => {
     try {
       if (selectedFileIndex !== null) {
-        confirmReplaceFile(selectedFileIndex, 'gallery');
+        await confirmReplaceFile(selectedFileIndex, 'gallery');
         return;
       }
 
@@ -175,9 +222,18 @@ export default function InputFile({
         selectionLimit: multiple ? 0 : 1,
       });
       if (result.didCancel || !result.assets) return;
-      const newFiles = [...files, ...result.assets];
-      setFiles(newFiles);
-      onChange?.(newFiles);
+
+      if (!validateMaxSize(result.assets)) return;
+      setInternalErrorMessage(null);
+
+      if (uploadConfig) {
+        await uploadAndTrack(result.assets as FileItem[], uploadConfig);
+      } else {
+        const newFiles = [...files, ...(result.assets as FileItem[])];
+        setFiles(newFiles);
+        onChange?.(newFiles);
+      }
+
       setIsOpenBottomSheetTypeFile(false);
     } catch (error: any) {
       console.error('Failed to open gallery:', error);
@@ -192,13 +248,16 @@ export default function InputFile({
   const deleteFile = () => {
     if (selectedFileIndex !== null) {
       const newFiles = files.filter((_, i) => i !== selectedFileIndex);
+
       setFiles(newFiles);
+      setUploadedFiles(newFiles as unknown as UploadedFile<unknown>[]);
       onChange?.(newFiles);
       setSelectedFileIndex(null);
     }
     setIsOpenBottomSheetDeleteFile(false);
   };
 
+  // replace attachment
   const handleReplaceFile = (index: number) => {
     setIsOpenBottomSheetTypeFile(true);
     setSelectedFileIndex(index);
@@ -208,33 +267,91 @@ export default function InputFile({
     index: number,
     type?: 'gallery' | 'camera'
   ) => {
-    let replacedFile: any | null = null;
+    const labelFile = files?.[index]?.labelFile;
+
+    // handler untuk pick
+    const pickFile = async (): Promise<FileItem | null> => {
+      if (type === 'gallery') {
+        const result = await launchImageLibrary({
+          mediaType: 'photo',
+          selectionLimit: multiple ? 0 : 1,
+        });
+
+        if (!result.assets?.length) return null;
+        return { ...result.assets[0], labelFile };
+      }
 
-    if (type === 'gallery') {
-      const result = await launchImageLibrary({
-        mediaType: 'photo',
-        selectionLimit: multiple ? 0 : 1,
+      if (type === 'camera') {
+        const result = await launchCamera({ mediaType: 'photo' });
+
+        if (!result.assets?.length) return null;
+        return { ...result.assets[0], labelFile: files?.[index]?.labelFile };
+      }
+
+      const result = await pick({
+        type: accept,
+        allowMultiSelection: multiple,
       });
-      if (!result.assets || result.assets.length === 0) return;
-      replacedFile = { ...result.assets[0], labelFile: files[index].labelFile };
-    } else if (type === 'camera') {
-      const result = await launchCamera({ mediaType: 'photo' });
-      if (!result.assets || result.assets.length === 0) return;
-      replacedFile = { ...result.assets[0], labelFile: files[index].labelFile };
+
+      if (!result?.length) return null;
+      return { ...result[0], labelFile } as unknown as FileItem;
+    };
+
+    const replacedFile = await pickFile();
+    if (!replacedFile) return;
+
+    // handle validasi max size
+    if (!validateMaxSize([replacedFile])) return;
+    setInternalErrorMessage(null);
+
+    // handle upload
+    if (uploadConfig) {
+      setIsOpenBottomSheetTypeFile(false);
+
+      const withLoading = files.map((f, i) =>
+        i === index ? { ...replacedFile, uploading: true } : f
+      );
+
+      setFiles(withLoading);
+
+      const results = await Promise.all([
+        uploadFile(replacedFile, uploadConfig),
+      ]);
+
+      const uploadResult = results[0];
+      const updatedFiles = filesRef.current.map((f, i) =>
+        i === index
+          ? {
+              ...replacedFile,
+              uploading: false,
+              uploadedData: uploadResult.uploadedData,
+              error: uploadResult.uploadedData === null,
+              hint:
+                uploadResult.uploadedData === null
+                  ? (uploadConfig.errorMessage ?? 'Upload gagal')
+                  : replacedFile.hint,
+            }
+          : f
+      );
+
+      setFiles(updatedFiles);
+      onChange?.(updatedFiles);
     } else {
-      const result = await pick({ type: accept, multiple });
-      if (!result || result.length === 0) return;
-      replacedFile = { ...result[0], labelFile: files[index].labelFile };
+      const updatedFiles = files.map((f, i) =>
+        i === index ? replacedFile : f
+      );
+      setFiles(updatedFiles);
+      onChange?.(updatedFiles);
     }
 
-    const updatedFiles = files.map((f, i) => (i === index ? replacedFile : f));
-
-    setFiles(updatedFiles);
-    onChange?.(updatedFiles);
     setSelectedFileIndex(null);
     setIsOpenBottomSheetTypeFile(false);
   };
 
+  useEffect(() => {
+    filesRef.current = files;
+  }, [files]);
+
   useEffect(() => {
     setFiles(value ?? []);
   }, [value]);
@@ -244,11 +361,11 @@ export default function InputFile({
       {variant === 'default' && (
         <CardTrigger
           title={title}
-          hint={hint}
-          hasError={hasError}
+          hint={hint || (internalErrorMessage as string)}
+          hasError={hasError || !!internalErrorMessage}
           description={description}
           btnSelect={btnChooseFileText}
-          onPress={handleOnPresChoseFile}
+          onPress={() => setIsOpenBottomSheetTypeFile(true)}
         />
       )}
 
@@ -259,11 +376,17 @@ export default function InputFile({
             title={title}
             hasError={hasError}
             textButton={btnChooseFileText}
-            onChooseFile={handleOnPresChoseFile}
+            onChooseFile={() => setIsOpenBottomSheetTypeFile(true)}
             onPreview={handlePreviewFile}
             onReplace={handleReplaceFile}
             onDelete={confirmDeleteFile}
           />
+          {internalErrorMessage && (
+            <Typography variant="t3" color={Color.danger[500]}>
+              {internalErrorMessage}
+            </Typography>
+          )}
+
           {files.length > 0 && (
             <>
               {files
@@ -306,6 +429,7 @@ export default function InputFile({
               <ItemPreview
                 index={index}
                 file={file}
+                loading={file.uploading}
                 onPress={() => handlePreviewFile(file)}
                 onReplace={() => handleReplaceFile(index)}
                 onDelete={() => confirmDeleteFile(index)}