@finema/core 3.22.0 → 3.24.0

package/dist/runtime/components/Form/fileState/useUploadImageState.js

@@ -1,306 +1,32 @@
-import { useDropZone, useFileDialog } from "@vueuse/core";
-import { useWatchTrue } from "#core/composables/useWatch";
-import PreviewModal from "./PreviewModal.vue";
-import { computed, ref, useOverlay, useAppConfig } from "#imports";
-import { useUploadLoader } from "#core/composables/useUpload";
-import { useFileAllocate, useFileProgress } from "#core/helpers/componentHelper";
-import { StringHelper } from "#core/utils/StringHelper";
-import { _get } from "#core/utils/lodash";
-export var UploadState = /* @__PURE__ */ ((UploadState2) => {
-  UploadState2["EMPTY"] = "empty";
-  UploadState2["UPLOADING"] = "uploading";
-  UploadState2["SUCCESS"] = "success";
-  UploadState2["ERROR"] = "error";
-  return UploadState2;
-})(UploadState || {});
-export const useUploadImageState = (props, emits, onChange, setErrors, value, acceptedFileTypes, wrapperProps, dropzoneRef) => {
-  const overlay = useOverlay();
-  const previewModal = overlay.create(PreviewModal);
-  const selectedFile = ref();
-  const fileAllocate = useFileAllocate(selectedFile, props);
-  const appConfig = useAppConfig();
-  const {
-    percent,
-    onDownloadProgress,
-    onUploadProgress
-  } = useFileProgress();
-  const request = {
-    requestOptions: {
-      ...props.requestOptions,
-      onDownloadProgress,
-      onUploadProgress
-    },
-    pathURL: props.uploadPathURL
-  };
-  const upload = useUploadLoader(request);
-  const validateImageDimensions = (file) => {
-    return new Promise((resolve) => {
-      if (!props.dimensions) {
-        resolve(true);
-        return;
-      }
-      const img = new Image();
-      const url = URL.createObjectURL(file);
-      img.onload = () => {
-        URL.revokeObjectURL(url);
-        const {
-          width,
-          height
-        } = img;
-        const dimensions = props.dimensions;
-        if (dimensions.width !== void 0 && width !== dimensions.width) {
-          if (appConfig.core?.locale === "th") {
-            setErrors(`\u0E04\u0E27\u0E32\u0E21\u0E01\u0E27\u0E49\u0E32\u0E07\u0E02\u0E2D\u0E07\u0E23\u0E39\u0E1B\u0E20\u0E32\u0E1E\u0E15\u0E49\u0E2D\u0E07\u0E40\u0E1B\u0E47\u0E19 ${dimensions.width}px (\u0E1B\u0E31\u0E08\u0E08\u0E38\u0E1A\u0E31\u0E19: ${width}px)`);
-          } else {
-            setErrors(`Image width must be ${dimensions.width}px (current: ${width}px)`);
-          }
-          resolve(false);
-          return;
-        }
-        if (dimensions.height !== void 0 && height !== dimensions.height) {
-          if (appConfig.core?.locale === "th") {
-            setErrors(`\u0E04\u0E27\u0E32\u0E21\u0E2A\u0E39\u0E07\u0E02\u0E2D\u0E07\u0E23\u0E39\u0E1B\u0E20\u0E32\u0E1E\u0E15\u0E49\u0E2D\u0E07\u0E40\u0E1B\u0E47\u0E19 ${dimensions.height}px (\u0E1B\u0E31\u0E08\u0E08\u0E38\u0E1A\u0E31\u0E19: ${height}px)`);
-          } else {
-            setErrors(`Image height must be ${dimensions.height}px (current: ${height}px)`);
-          }
-          resolve(false);
-          return;
-        }
-        if (dimensions.minWidth !== void 0 && width < dimensions.minWidth) {
-          if (appConfig.core?.locale === "th") {
-            setErrors(`\u0E04\u0E27\u0E32\u0E21\u0E01\u0E27\u0E49\u0E32\u0E07\u0E02\u0E2D\u0E07\u0E23\u0E39\u0E1B\u0E20\u0E32\u0E1E\u0E15\u0E49\u0E2D\u0E07\u0E44\u0E21\u0E48\u0E19\u0E49\u0E2D\u0E22\u0E01\u0E27\u0E48\u0E32 ${dimensions.minWidth}px (\u0E1B\u0E31\u0E08\u0E08\u0E38\u0E1A\u0E31\u0E19: ${width}px)`);
-          } else {
-            setErrors(`Image width must be at least ${dimensions.minWidth}px (current: ${width}px)`);
-          }
-          resolve(false);
-          return;
-        }
-        if (dimensions.minHeight !== void 0 && height < dimensions.minHeight) {
-          if (appConfig.core?.locale === "th") {
-            setErrors(`\u0E04\u0E27\u0E32\u0E21\u0E2A\u0E39\u0E07\u0E02\u0E2D\u0E07\u0E23\u0E39\u0E1B\u0E20\u0E32\u0E1E\u0E15\u0E49\u0E2D\u0E07\u0E44\u0E21\u0E48\u0E19\u0E49\u0E2D\u0E22\u0E01\u0E27\u0E48\u0E32 ${dimensions.minHeight}px (\u0E1B\u0E31\u0E08\u0E08\u0E38\u0E1A\u0E31\u0E19: ${height}px)`);
-          } else {
-            setErrors(`Image height must be at least ${dimensions.minHeight}px (current: ${height}px)`);
-          }
-          resolve(false);
-          return;
-        }
-        if (dimensions.maxWidth !== void 0 && width > dimensions.maxWidth) {
-          if (appConfig.core?.locale === "th") {
-            setErrors(`\u0E04\u0E27\u0E32\u0E21\u0E01\u0E27\u0E49\u0E32\u0E07\u0E02\u0E2D\u0E07\u0E23\u0E39\u0E1B\u0E20\u0E32\u0E1E\u0E15\u0E49\u0E2D\u0E07\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 ${dimensions.maxWidth}px (\u0E1B\u0E31\u0E08\u0E08\u0E38\u0E1A\u0E31\u0E19: ${width}px)`);
-          } else {
-            setErrors(`Image width must not exceed ${dimensions.maxWidth}px (current: ${width}px)`);
-          }
-          resolve(false);
-          return;
-        }
-        if (dimensions.maxHeight !== void 0 && height > dimensions.maxHeight) {
-          if (appConfig.core?.locale === "th") {
-            setErrors(`\u0E04\u0E27\u0E32\u0E21\u0E2A\u0E39\u0E07\u0E02\u0E2D\u0E07\u0E23\u0E39\u0E1B\u0E20\u0E32\u0E1E\u0E15\u0E49\u0E2D\u0E07\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 ${dimensions.maxHeight}px (\u0E1B\u0E31\u0E08\u0E08\u0E38\u0E1A\u0E31\u0E19: ${height}px)`);
-          } else {
-            setErrors(`Image height must not exceed ${dimensions.maxHeight}px (current: ${height}px)`);
-          }
-          resolve(false);
-          return;
-        }
-        if (dimensions.aspectRatio !== void 0) {
-          const actualRatio = width / height;
-          const tolerance = dimensions.aspectRatioTolerance ?? 0.01;
-          const expectedRatio = dimensions.aspectRatio;
-          if (Math.abs(actualRatio - expectedRatio) > tolerance) {
-            if (appConfig.core?.locale === "th") {
-              setErrors(`\u0E2D\u0E31\u0E15\u0E23\u0E32\u0E2A\u0E48\u0E27\u0E19\u0E02\u0E2D\u0E07\u0E23\u0E39\u0E1B\u0E20\u0E32\u0E1E\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07 (\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E32\u0E23: ${expectedRatio.toFixed(2)}, \u0E1B\u0E31\u0E08\u0E08\u0E38\u0E1A\u0E31\u0E19: ${actualRatio.toFixed(2)})`);
-            } else {
-              setErrors(`Image aspect ratio is incorrect (expected: ${expectedRatio.toFixed(2)}, current: ${actualRatio.toFixed(2)})`);
-            }
-            resolve(false);
-            return;
-          }
-        }
-        setErrors("");
-        resolve(true);
-      };
-      img.onerror = () => {
-        URL.revokeObjectURL(url);
-        if (appConfig.core?.locale === "th") {
-          setErrors("\u0E44\u0E21\u0E48\u0E2A\u0E32\u0E21\u0E32\u0E23\u0E16\u0E42\u0E2B\u0E25\u0E14\u0E23\u0E39\u0E1B\u0E20\u0E32\u0E1E\u0E44\u0E14\u0E49");
-        } else {
-          setErrors("Failed to load image");
-        }
-        resolve(false);
-      };
-      img.src = url;
-    });
-  };
-  const validateFile = async (file) => {
-    if (props.accept && fileAllocate.acceptFile.value) {
-      const acceptedTypes = fileAllocate.acceptFile.value;
-      const acceptedTypesList = acceptedTypes.split(",").map((type) => type.trim());
-      const fileExtension = file.name.toLowerCase().split(".").pop();
-      const isValidFileType = acceptedTypesList.some((acceptedType) => {
-        if (acceptedType.startsWith(".")) {
-          const extension = acceptedType.slice(1).toLowerCase();
-          return fileExtension === extension;
-        } else if (!acceptedType.includes("/") && !acceptedType.includes("*")) {
-          return fileExtension === acceptedType.toLowerCase();
-        }
-        if (acceptedType.endsWith("/*")) {
-          const baseType = acceptedType.slice(0, -2);
-          return file.type.startsWith(baseType + "/");
-        }
-        return file.type === acceptedType;
-      });
-      if (!isValidFileType) {
-        if (appConfig.core?.locale === "th") {
-          setErrors("\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17\u0E44\u0E1F\u0E25\u0E4C\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07 (\u0E23\u0E2D\u0E07\u0E23\u0E31\u0E1A\u0E40\u0E09\u0E1E\u0E32\u0E30 " + acceptedTypesList.join(", ") + ")");
-        } else {
-          setErrors("Invalid file type (only " + acceptedTypesList.join(", ") + " are allowed)");
-        }
-        return false;
-      }
-    }
-    if (props.maxSize) {
-      const maxSizeBytes = (fileAllocate.acceptFileSizeKb.value || 0) * 1024;
-      if (file.size > maxSizeBytes) {
-        if (fileAllocate.isAcceptFileUseMb.value) {
-          if (appConfig.core?.locale === "th") {
-            setErrors(`\u0E02\u0E19\u0E32\u0E14\u0E44\u0E1F\u0E25\u0E4C\u0E15\u0E49\u0E2D\u0E07\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 ${fileAllocate.acceptFileSizeMb.value} MB`);
-          } else {
-            setErrors(`File size must not exceed ${fileAllocate.acceptFileSizeMb.value} MB`);
-          }
-        } else {
-          if (appConfig.core?.locale === "th") {
-            setErrors(`\u0E02\u0E19\u0E32\u0E14\u0E44\u0E1F\u0E25\u0E4C\u0E15\u0E49\u0E2D\u0E07\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 ${fileAllocate.acceptFileSizeKb.value} KB`);
-          } else {
-            setErrors(`File size must not exceed ${fileAllocate.acceptFileSizeKb.value} KB`);
-          }
-        }
-        return false;
-      }
-    }
-    const isDimensionsValid = await validateImageDimensions(file);
-    if (!isDimensionsValid) {
-      return false;
-    }
-    setErrors("");
-    return true;
-  };
-  const processFile = async (file) => {
-    const isValid = await validateFile(file);
-    if (!isValid) return;
-    selectedFile.value = file;
-    emits("change", file);
-    const formData = new FormData();
-    formData.append(props.bodyKey, file);
-    upload.run({
-      data: formData
+import { UploadState, useUploadState } from "./useUploadState.js";
+import { validateDimensions } from "#core/helpers/uploadCore";
+import { useCoreMessages } from "#core/composables/useMessages";
+export { UploadState };
+const readImageSize = (file) => new Promise((resolve) => {
+  const image = new Image();
+  const url = URL.createObjectURL(file);
+  image.onload = () => {
+    URL.revokeObjectURL(url);
+    resolve({
+      width: image.width,
+      height: image.height
     });
   };
-  const handleFileDrop = (files) => {
-    if (wrapperProps.value.disabled || wrapperProps.value.readonly || !files?.length || !isEmpty.value) return;
-    const file = files[0];
-    if (file) {
-      processFile(file);
+  image.onerror = () => {
+    URL.revokeObjectURL(url);
+    resolve(void 0);
+  };
+  image.src = url;
+});
+export const useUploadImageState = (context) => {
+  const { messages } = useCoreMessages();
+  return useUploadState(context, {
+    defaultAccept: "image/*",
+    validateExtra: async (file) => {
+      if (!context.props.dimensions) return;
+      const size = await readImageSize(file);
+      if (!size) return messages.value.upload.imageLoadFailed;
+      return validateDimensions(size, context.props.dimensions, messages.value.upload);
     }
-  };
-  const fileDialog = useFileDialog({
-    accept: acceptedFileTypes.value || "image/*",
-    directory: false,
-    multiple: false
-  });
-  const dropzone = useDropZone(dropzoneRef, {
-    onDrop: handleFileDrop,
-    multiple: false,
-    preventDefaultForUnhandled: false
   });
-  const currentState = computed(() => {
-    if (value.value) return "success" /* SUCCESS */;
-    if (selectedFile.value && upload.status.value.isLoading) return "uploading" /* UPLOADING */;
-    if (selectedFile.value && upload.status.value.isError) return "error" /* ERROR */;
-    return "empty" /* EMPTY */;
-  });
-  const isEmpty = computed(() => currentState.value === "empty" /* EMPTY */);
-  const isUploading = computed(() => currentState.value === "uploading" /* UPLOADING */);
-  const isSuccess = computed(() => currentState.value === "success" /* SUCCESS */);
-  const isError = computed(() => currentState.value === "error" /* ERROR */);
-  const handleInputChange = (event) => {
-    if (wrapperProps.value.disabled || wrapperProps.value.readonly) return;
-    const file = event.target.files?.[0];
-    if (file) {
-      processFile(file);
-    }
-  };
-  fileDialog.onChange((files) => {
-    const file = files?.[0];
-    if (file) {
-      processFile(file);
-    }
-  });
-  const handleOpenFile = () => {
-    if (wrapperProps.value.disabled || wrapperProps.value.readonly) return;
-    fileDialog.open();
-  };
-  const handleDeleteFile = () => {
-    fileDialog.reset();
-    upload.clear();
-    selectedFile.value = void 0;
-    onChange(void 0);
-    emits("delete");
-  };
-  const handleRetryUpload = () => {
-    if (selectedFile.value) {
-      const formData = new FormData();
-      formData.append(props.bodyKey, selectedFile.value);
-      upload.run(formData);
-    }
-  };
-  const handlePreview = () => {
-    previewModal.open({
-      value: value.value
-    });
-  };
-  useWatchTrue(
-    () => upload.status.value.isSuccess,
-    () => {
-      if (upload.data.value) {
-        const fileValue = {
-          url: _get(upload.data.value, props.responseURL),
-          path: _get(upload.data.value, props.responsePath),
-          name: _get(upload.data.value, props.responseName) || selectedFile.value?.name,
-          size: Number(_get(upload.data.value, props.responseSize) || selectedFile.value?.size),
-          id: _get(upload.data.value, props.responseID)
-        };
-        value.value = fileValue;
-        emits("success", fileValue);
-      }
-    }
-  );
-  useWatchTrue(
-    () => upload.status.value.isError,
-    () => {
-      if (appConfig.core?.locale === "th") {
-        setErrors("\u0E1E\u0E1A\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14: " + StringHelper.getError(upload.status.value.errorData));
-      } else {
-        setErrors("An error occurred: " + StringHelper.getError(upload.status.value.errorData));
-      }
-    }
-  );
-  return {
-    // State
-    currentState,
-    isEmpty,
-    isUploading,
-    isSuccess,
-    isError,
-    selectedFile,
-    // Upload utilities
-    upload,
-    dropzone,
-    percent,
-    // Handlers
-    handleInputChange,
-    handleOpenFile,
-    handleDeleteFile,
-    handleRetryUpload,
-    handlePreview
-  };
 };

package/dist/runtime/components/Form/fileState/useUploadState.d.ts

@@ -1,13 +1,17 @@
-import type { TemplateRef } from 'vue';
 import type { IUploadDropzoneAutoProps } from '../InputUploadDropzoneAuto/types.js';
+import { type IUploadFieldContext } from './useFilePicker.js';
+import { UploadState } from '#core/helpers/uploadCore';
 import type { IFileValue } from '#core/components/Form/types';
-export declare enum UploadState {
-    EMPTY = "empty",
-    UPLOADING = "uploading",
-    SUCCESS = "success",
-    ERROR = "error"
+export { UploadState };
+interface IUploadStateOptions {
+    defaultAccept?: string;
+    /** Extra check after type and size pass; resolves to an error message, or undefined when the file is fine */
+    validateExtra?: (file: File) => Promise<string | undefined>;
 }
-export declare const useUploadState: (props: IUploadDropzoneAutoProps, emits: any, onChange: (value: IFileValue | undefined) => void, setErrors: (error: string) => void, value: any, acceptedFileTypes: any, wrapperProps: any, dropzoneRef: TemplateRef<HTMLDivElement | undefined>) => {
+/**
+ * Uploads the picked file right away and stores the file reference returned by the API as the field value
+ */
+export declare const useUploadState: (context: IUploadFieldContext<IUploadDropzoneAutoProps, IFileValue>, options?: IUploadStateOptions) => {
     currentState: import("vue").ComputedRef<UploadState>;
     isEmpty: import("vue").ComputedRef<boolean>;
     isUploading: import("vue").ComputedRef<boolean>;

package/dist/runtime/components/Form/fileState/useUploadState.js

@@ -1,167 +1,83 @@
-import { useDropZone, useFileDialog } from "@vueuse/core";
-import { useWatchTrue } from "./../../../../../dist/runtime/composables/useWatch";
-import PreviewModal from "./PreviewModal.vue";
-import { computed, ref, useOverlay } from "#imports";
+import { useFilePicker } from "./useFilePicker.js";
+import { toFileValue, toUploadFormData, UploadState, validateFile } from "#core/helpers/uploadCore";
+import { useWatchTrue } from "#core/composables/useWatch";
+import { useCoreMessages } from "#core/composables/useMessages";
 import { useUploadLoader } from "#core/composables/useUpload";
-import { useFileAllocate, useFileProgress } from "#core/helpers/componentHelper";
+import { useFileProgress } from "#core/helpers/componentHelper";
 import { StringHelper } from "#core/utils/StringHelper";
-import { _get } from "#core/utils/lodash";
-export var UploadState = /* @__PURE__ */ ((UploadState2) => {
-  UploadState2["EMPTY"] = "empty";
-  UploadState2["UPLOADING"] = "uploading";
-  UploadState2["SUCCESS"] = "success";
-  UploadState2["ERROR"] = "error";
-  return UploadState2;
-})(UploadState || {});
-export const useUploadState = (props, emits, onChange, setErrors, value, acceptedFileTypes, wrapperProps, dropzoneRef) => {
-  const overlay = useOverlay();
-  const previewModal = overlay.create(PreviewModal);
+import { computed, ref } from "#imports";
+export { UploadState };
+export const useUploadState = (context, options = {}) => {
+  const { props, emits, onChange, setErrors, value } = context;
+  const { messages, format } = useCoreMessages();
   const selectedFile = ref();
-  const fileAllocate = useFileAllocate(selectedFile, props);
-  const {
-    percent,
-    onDownloadProgress,
-    onUploadProgress
-  } = useFileProgress();
-  const request = {
+  const { percent, onDownloadProgress, onUploadProgress } = useFileProgress();
+  const upload = useUploadLoader({
     requestOptions: {
       ...props.requestOptions,
       onDownloadProgress,
       onUploadProgress
     },
     pathURL: props.uploadPathURL
-  };
-  const upload = useUploadLoader(request);
-  const validateFile = (file) => {
-    if (props.accept && fileAllocate.acceptFile.value) {
-      const acceptedTypes = fileAllocate.acceptFile.value;
-      const acceptedTypesList = acceptedTypes.split(",").map((type) => type.trim());
-      const fileExtension = file.name.toLowerCase().split(".").pop();
-      const isValidFileType = acceptedTypesList.some((acceptedType) => {
-        if (acceptedType.startsWith(".")) {
-          const extension = acceptedType.slice(1).toLowerCase();
-          return fileExtension === extension;
-        } else if (!acceptedType.includes("/") && !acceptedType.includes("*")) {
-          return fileExtension === acceptedType.toLowerCase();
-        }
-        if (acceptedType.endsWith("/*")) {
-          const baseType = acceptedType.slice(0, -2);
-          return file.type.startsWith(baseType + "/");
-        }
-        return file.type === acceptedType;
-      });
-      if (!isValidFileType) {
-        setErrors("\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17\u0E44\u0E1F\u0E25\u0E4C\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07 (\u0E23\u0E2D\u0E07\u0E23\u0E31\u0E1A\u0E40\u0E09\u0E1E\u0E32\u0E30 " + acceptedTypesList.join(", ") + ")");
-        return false;
-      }
-    }
-    if (props.maxSize) {
-      const maxSizeBytes = (fileAllocate.acceptFileSizeKb.value || 0) * 1024;
-      if (file.size > maxSizeBytes) {
-        if (fileAllocate.isAcceptFileUseMb.value) {
-          setErrors(`\u0E02\u0E19\u0E32\u0E14\u0E44\u0E1F\u0E25\u0E4C\u0E15\u0E49\u0E2D\u0E07\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 ${fileAllocate.acceptFileSizeMb.value} MB`);
-        } else {
-          setErrors(`\u0E02\u0E19\u0E32\u0E14\u0E44\u0E1F\u0E25\u0E4C\u0E15\u0E49\u0E2D\u0E07\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 ${fileAllocate.acceptFileSizeKb.value} KB`);
-        }
-        return false;
-      }
-    }
-    setErrors("");
-    return true;
-  };
-  const processFile = (file) => {
-    if (!validateFile(file)) return;
-    selectedFile.value = file;
-    emits("change", file);
-    const formData = new FormData();
-    formData.append(props.bodyKey, file);
+  });
+  const currentState = computed(() => {
+    if (value.value) return UploadState.SUCCESS;
+    if (selectedFile.value && upload.status.value.isLoading) return UploadState.UPLOADING;
+    if (selectedFile.value && upload.status.value.isError) return UploadState.ERROR;
+    return UploadState.EMPTY;
+  });
+  const isEmpty = computed(() => currentState.value === UploadState.EMPTY);
+  const isUploading = computed(() => currentState.value === UploadState.UPLOADING);
+  const isSuccess = computed(() => currentState.value === UploadState.SUCCESS);
+  const isError = computed(() => currentState.value === UploadState.ERROR);
+  const startUpload = (file) => {
     upload.run({
-      data: formData
+      data: toUploadFormData(props.bodyKey, file)
     });
   };
-  const handleFileDrop = (files) => {
-    if (wrapperProps.value.disabled || wrapperProps.value.readonly || !files?.length || !isEmpty.value) return;
-    const file = files[0];
-    if (file) {
-      processFile(file);
-    }
+  const processFile = async (file) => {
+    const error = validateFile(file, props, messages.value.upload) ?? await options.validateExtra?.(file);
+    setErrors(error ?? "");
+    if (error) return;
+    selectedFile.value = file;
+    emits("change", file);
+    startUpload(file);
   };
-  const fileDialog = useFileDialog({
-    accept: acceptedFileTypes.value || "",
-    directory: false,
-    multiple: false
-  });
-  const dropzone = useDropZone(dropzoneRef, {
-    onDrop: handleFileDrop,
-    // dataTypes: typeof props.accept === 'string' ? [props.accept] : props.accept,
+  const picker = useFilePicker(context, {
     multiple: false,
-    preventDefaultForUnhandled: false
-  });
-  const currentState = computed(() => {
-    if (value.value) return "success" /* SUCCESS */;
-    if (selectedFile.value && upload.status.value.isLoading) return "uploading" /* UPLOADING */;
-    if (selectedFile.value && upload.status.value.isError) return "error" /* ERROR */;
-    return "empty" /* EMPTY */;
-  });
-  const isEmpty = computed(() => currentState.value === "empty" /* EMPTY */);
-  const isUploading = computed(() => currentState.value === "uploading" /* UPLOADING */);
-  const isSuccess = computed(() => currentState.value === "success" /* SUCCESS */);
-  const isError = computed(() => currentState.value === "error" /* ERROR */);
-  const handleInputChange = (event) => {
-    if (wrapperProps.value.disabled || wrapperProps.value.readonly) return;
-    const file = event.target.files?.[0];
-    if (file) {
-      processFile(file);
-    }
-  };
-  fileDialog.onChange((files) => {
-    if (files?.length) {
-      processFile(files[0]);
+    defaultAccept: options.defaultAccept,
+    canDrop: () => isEmpty.value,
+    onFiles: async ([file]) => {
+      if (file) await processFile(file);
     }
   });
-  const handleOpenFile = () => {
-    if (wrapperProps.value.disabled || wrapperProps.value.readonly) return;
-    fileDialog.open();
-  };
   const handleDeleteFile = () => {
-    fileDialog.reset();
+    picker.fileDialog.reset();
     upload.clear();
     selectedFile.value = void 0;
     onChange(void 0);
     emits("delete");
   };
   const handleRetryUpload = () => {
-    if (selectedFile.value) {
-      const formData = new FormData();
-      formData.append(props.bodyKey, selectedFile.value);
-      upload.run(formData);
-    }
-  };
-  const handlePreview = () => {
-    previewModal.open({
-      value: value.value
-    });
+    if (selectedFile.value) startUpload(selectedFile.value);
   };
   useWatchTrue(
     () => upload.status.value.isSuccess,
     () => {
-      if (upload.data.value) {
-        const fileValue = {
-          url: _get(upload.data.value, props.responseURL),
-          path: _get(upload.data.value, props.responsePath),
-          name: _get(upload.data.value, props.responseName) || selectedFile.value?.name,
-          size: Number(_get(upload.data.value, props.responseSize) || selectedFile.value?.size),
-          id: _get(upload.data.value, props.responseID)
-        };
-        value.value = fileValue;
-        emits("success", fileValue);
-      }
+      if (!upload.data.value) return;
+      const fileValue = toFileValue(upload.data.value, props, selectedFile.value);
+      value.value = fileValue;
+      emits("success", fileValue);
     }
   );
   useWatchTrue(
     () => upload.status.value.isError,
     () => {
-      setErrors("\u0E1E\u0E1A\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14: " + StringHelper.getError(upload.status.value.errorData));
+      setErrors(
+        format(messages.value.upload.error, {
+          message: StringHelper.getError(upload.status.value.errorData, messages.value.common.somethingWentWrong)
+        })
+      );
     }
   );
   return {
@@ -174,13 +90,13 @@ export const useUploadState = (props, emits, onChange, setErrors, value, accepte
     selectedFile,
     // Upload utilities
     upload,
-    dropzone,
+    dropzone: picker.dropzone,
     percent,
     // Handlers
-    handleInputChange,
-    handleOpenFile,
+    handleInputChange: picker.handleInputChange,
+    handleOpenFile: picker.handleOpenFile,
     handleDeleteFile,
     handleRetryUpload,
-    handlePreview
+    handlePreview: () => picker.openPreview(value.value)
   };
 };

package/dist/runtime/components/Form/fileState/useUploadStateMultiple.d.ts

@@ -1,24 +1,23 @@
-import type { TemplateRef } from 'vue';
 import type { IUploadDropzoneAutoMultipleProps } from '../InputUploadDropzoneAutoMultiple/types.js';
+import { type IUploadFieldContext } from './useFilePicker.js';
+import { UploadState } from '#core/helpers/uploadCore';
 import type { IFileValue } from '#core/components/Form/types';
-export declare enum UploadState {
-    EMPTY = "empty",
-    UPLOADING = "uploading",
-    SUCCESS = "success",
-    ERROR = "error"
-}
+export { UploadState };
 export interface FileUploadItem {
+    id: number;
     file: File;
     state: UploadState;
     progress: number;
     value?: IFileValue;
     error?: string;
-    uploadLoader?: any;
-    percentRef?: any;
-    cleanupWatchers?: (() => void)[];
 }
-export declare const useUploadStateMultiple: (props: IUploadDropzoneAutoMultipleProps, emits: any, onChange: (value: IFileValue[] | undefined) => void, setErrors: (error: string) => void, value: any, acceptedFileTypes: any, wrapperProps: any, dropzoneRef: TemplateRef<HTMLDivElement | undefined>) => {
+/**
+ * Uploads every picked file right away. Finished files move into the field value (newest first);
+ * `fileItems` only holds the ones still uploading or failed.
+ */
+export declare const useUploadStateMultiple: (context: IUploadFieldContext<IUploadDropzoneAutoMultipleProps, IFileValue[]>) => {
     fileItems: import("vue").Ref<{
+        id: number;
         file: {
             readonly lastModified: number;
             readonly name: string;
@@ -56,10 +55,8 @@ export declare const useUploadStateMultiple: (props: IUploadDropzoneAutoMultiple
             id?: string | undefined;
         } | undefined;
         error?: string | undefined;
-        uploadLoader?: any;
-        percentRef?: any;
-        cleanupWatchers?: (() => void)[] | undefined;
     }[], FileUploadItem[] | {
+        id: number;
         file: {
             readonly lastModified: number;
             readonly name: string;
@@ -97,9 +94,6 @@ export declare const useUploadStateMultiple: (props: IUploadDropzoneAutoMultiple
             id?: string | undefined;
         } | undefined;
         error?: string | undefined;
-        uploadLoader?: any;
-        percentRef?: any;
-        cleanupWatchers?: (() => void)[] | undefined;
     }[]>;
     isEmpty: import("vue").ComputedRef<boolean>;
     hasUploading: import("vue").ComputedRef<boolean>;
@@ -108,5 +102,5 @@ export declare const useUploadStateMultiple: (props: IUploadDropzoneAutoMultiple
     handleOpenFile: () => void;
     handleDeleteFile: (index: number) => void;
     handleRetryUpload: (index: number) => Promise<void>;
-    handlePreview: (fileValue: IFileValue) => void;
+    handlePreview: (fileValue: IFileValue | File) => void;
 };