UInput Component Fails to Handle File Input Correctly

[foxroy]

Environment

Operating System: Windows 11
Node Version: v20.9.0
Nuxt Version: 3.12.1
CLI Version: 3.12.0
Nitro Version: 2.9.6
Package Manager: pnpm@9.1.0
Builder: -
User Config: devtools, css
Runtime Modules: @nuxt/ui@2.17.0

Version

v2.17.0

Reproduction

https://stackblitz.com/edit/nuxt-starter-1v9bed

Description

When using the UInput component with type="file", the component fails to handle the file input change event correctly. Specifically, the change event does not properly propagate, resulting in an error: "File input not found or no file selected." This issue does not occur when using a native element.

Additional context

I have a form that accepts a file for a resume. I'm sending an email with the form data and the resume attached using the 'nuxt-mail' Module and sending the email via Postmark.

Postmark requires attachments to be base64. I've implemented a handleFileChange function to deal with this.

When using UInput type=file, the file does not attach to the process converting to base64. However, when I use a native input it works as expected.

The reproduction is bare-bones, simply displaying two inputs. (1) UInput and (2) Native Input. 'nuxt-mail' and no email sending are in the reproduction. The inputs are in /pages/index.vue.

When viewing the console in the reproduction:

• using UInput, after the file is selected, the error is thrown, as no file is found.
• using native input, after the file is selected, the file appears in the console.

I've confirmed this in my application. UInput doesn't attach the file and no attachment is sent. The Native Input however, attaches the file and it is received in the email from Postmark.

I'm not sure if I've missed something here but I can't seem to get it to work as I would expect.

Logs

No response

[noook]

Nuxt UI's inputs emit directly the value instead of the native event, that means that change event you are listening to is not the native event, and the event parameter on the handleFileChange function is not an Event but a FileList. It's an iterable that contains Files, so you you should rename your param (event) to (files: FileList).

You should check with a console.log what's inside your parameters 😉

[foxroy]

Thank you! Problem solved. Cheers!