FileUpload w/ multiple + Zod Validation
I'm having trouble showing per-file validation errors when a FileUpoad component has its
multiple prop set to true. Based on the With Form validation example in the docs, I've wrapped the image schema with a z.array().min(1) so support multi-file uploads. I would expect each file in the files slot to show the corresponding error from the validation; however, the errors aren't rendered anywhere when the form submit is triggered. I created a full example of this. Would love to understand if I'm missing something and/or if the Nuxt team could include an example of this in the docs?3 Replies
Hi @amanhasaname. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I'm sorry, but the knowledge sources do not provide an example or explicit guidance for displaying per-file validation errors when using the Nuxt UI FileUpload component with the multiple prop and Zod array validation. The documentation shows how to validate a single file using Zod and display errors via UFormField, but it does not cover the case where you have an array of files and want to show individual errors for each file in the UI.
The current examples in the docs only demonstrate single-file validation, and while they mention using Zod for schema validation, they do not address mapping errors to individual files in a multi-file upload scenario or how to surface those errors in the files slot or elsewhere in the UI. There is also no mention of a built-in mechanism in UFileUpload or UFormField for associating errors with specific files when multiple files are uploaded and validated as an arrayWith Form validation.
If you need this functionality, you may need to implement custom logic to map validation errors to each file and display them manually in the files slot, but the official documentation does not provide an example or recommended approach for this at this time.
If you would like to see this feature or an example added to the documentation, it would be best to open a feature request or discussion on the Nuxt UI GitHub repository as suggested in the docs.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@746207305841901580> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
I've gone ahead and created a feature request for this. In the meantime, does anyone have an example of how to accomplish this? Perhaps there's a way to access the
error.issues array within the files slot or something similar?