FileUpload: Per-file schema validation errors when multiple prop is true

[gitcarter]

Package

v4.x

Description

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 z.array().min(1) to 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 propagated to the UI when form validation is triggered.

I created a full example of this.

There should be default behavior to show per-file errors when there's a schema prop set and multiple is set to true.

Additional context

No response

[gitcarter]

I assume an over-simplified solution would be to replace the looping div with a FormField component in the files slot code which wraps the file slot. It could use the value of the name prop as the prefix to concatenate to. Something like:

<slot name="files" :files="modelValue">
  <UFormField v-for="(file, index) in Array.isArray(modelValue) ? modelValue : [modelValue]" :key="(file as File).name"  :name="`${name || (file as File).name}.{index}`" :class="ui.file({ class: props.ui?.file })">
      <slot name="file" :file="file" :index="index">
        // rest of code
      </slot>
  </UFormField>
</slot>

Including this would allow nested errors to properly bind to their respective FormField components on a per-file basis. I'm sure there's a better way to do this.

I've forked my original example to include a custom file template, assuming a list layout.