File Upload Event Handlers

I am running into the same issue reported here: I'm not crazy, am I?

I am simply trying to display the name of the file I just uploaded via the file dropzone. I am using an event handler to change the value of a text component on the page. However, I'm getting a "type" error despite the fact that the tooltip identifies the field as a String and displays the correct value for the file I uploaded. When I run the application, the file uploads successfully but the event handler does not execute as desired, presumably because of this type validation error.

I tried to set up a simple test app mimicking the one Victoria created for that post and still encounter the error. Is there a bug? Am I doing something wrong? Any tips for debugging?

Thanks!

The linting error says your fileDropzone1.value[0].name is an array, which as you note, it is not. I just tried it on my end, and although the linter says there is an error, it still works. It was a little confusing because I was always showing the name of the first file in the upload component when adding additional files, but if I change it to show the last (or second or whatever) it works.

Does it not work for you ever at all, even if you fully clear the object and then start loading new files? Tagging @victoria who was on the last post you referenced as well in the event there was something to add from there, but I can't reproduce. Though also, why is the string being evaluated as an array by the linter?

Thanks for the quick reply @jg80. For me it never works. I know the event handler is firing because the value in the text component is cleared out when the upload completes.

Hi @kc41, welcome to the forum! :wave:

This is odd, could you share a screenshot of the State tab with the value property of this component open?

Hi Paulo -

Here's the value property for that component:

Actually Im getting the same

The value has to be of type 'boolean | string | number | void', you provided an array

Thank you! I was able to reproduce this issue. As @jg80 pointed out, once there are 2 or more files, it works:

But if we are only going to use the first file name (fileDropzone1.value[0].name ) we could do this without the event handler. Just set the value of the text directly:

You can also do this conditionally. No file:

With file:

1 Like

We created a bug report for this issue. We should be able to reference the name of the first file regardless of how many files are added to the Dropzone. We'll update you here when is fixed.

1 Like

Thanks for chasing this down Paulo. Also, thanks for the clever workaround!

you are welcome! :slightly_smiling_face: