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:

Hello @Paulo
I got issue while using file dropzone
When I add change event and trigger an file validation, there I can't get file name, it shows that the filedropzone value is empty.

Hi @Senior_Dev, welcome to the forum! :wave:
Do we have the File Dropzone set for single or multiple files?

I solved this issue by using the parse event, change event doesn't work well.

Thank you for sharing your workaround with us! We'll update you here when this issue is fixed.

Hi @Paulo,
I am also experiencing this issue when an event hander is called on change. The fileDropZone.value is not updated within a javascript query and uses the old value. Changing the handler to parse seams to be a workaround for some reason. I'm using single file.

Hi, @lpearl. I added your experience to the report. Thank you for your feedback!

1 Like