chore: expose details to validate method

chakra-ui · Nov 21, 2024 · a55b68e · a55b68e
1 parent fb6fa8d
commit a55b68e
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 5 deletions.
diff --git a/.changeset/few-spiders-study.md b/.changeset/few-spiders-study.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/file-upload": patch
+---
+
+Expose `details` to `validate` method
diff --git a/examples/next-ts/pages/file-upload.tsx b/examples/next-ts/pages/file-upload.tsx
@@ -9,9 +9,22 @@ import { useControls } from "../hooks/use-controls"
 export default function Page() {
   const controls = useControls(fileUploadControls)
 
-  const [state, send] = useMachine(fileUpload.machine({ id: useId() }), {
-    context: controls.context,
-  })
+  const [state, send] = useMachine(
+    fileUpload.machine({
+      id: useId(),
+      validate(file, { acceptedFiles, rejectedFiles }) {
+        // Check for duplicate files by comparing names in acceptedFiles
+        const duplicate = [...acceptedFiles, ...rejectedFiles].some((uploadedFile) => uploadedFile.name === file.name)
+        if (duplicate) {
+          return [`The file "${file.name}" has already been uploaded.`]
+        }
+        return null // No errors
+      },
+    }),
+    {
+      context: controls.context,
+    },
+  )
 
   const api = fileUpload.connect(state, send, normalizeProps)
 

diff --git a/packages/machines/file-upload/src/file-upload.types.ts b/packages/machines/file-upload/src/file-upload.types.ts
@@ -98,7 +98,7 @@ interface PublicContext extends LocaleProperties, CommonProperties {
   /**
    * Function to validate a file
    */
-  validate?: ((file: File) => FileError[] | null) | undefined
+  validate?: ((file: File, details: FileChangeDetails) => FileError[] | null) | undefined
   /**
    * Function called when the value changes, whether accepted or rejected
    */

diff --git a/packages/machines/file-upload/src/file-upload.utils.ts b/packages/machines/file-upload/src/file-upload.utils.ts
@@ -25,7 +25,7 @@ export function getFilesFromEvent(ctx: MachineContext, files: File[]) {
     const [accepted, acceptError] = isValidFileType(file, ctx.acceptAttr)
     const [sizeMatch, sizeError] = isValidFileSize(file, ctx.minFileSize, ctx.maxFileSize)
 
-    const validateErrors = ctx.validate?.(file)
+    const validateErrors = ctx.validate?.(file, { acceptedFiles: ctx.acceptedFiles, rejectedFiles: ctx.rejectedFiles })
     const valid = validateErrors ? validateErrors.length === 0 : true
 
     if (accepted && sizeMatch && valid) {