FileUpload: maxFileSize error is not shown in template

[dinacuatro]

I am using template (https://primevue.org/fileupload/#template), and would like to access maxFileSize error from a method in order to show it in a toast component. Is it possible?

[dcb99]

I am using template (https://primevue.org/fileupload/#template), and would like to access maxFileSize error from a method in order to show it in a toast component. Is it possible?

It would be helpful if you provided a StackBlitz or at a minimum, some code here demonstrating what you're trying to do.

[dinacuatro]

It would be helpful if you provided a StackBlitz or at a minimum, some code here demonstrating what you're trying to do.

It is very simple - just open the stackblitz link of section Uploader UI can be customized with templating, try to upload a normal image, then modify the :maxFileSize value to 10 for example and try to upload it. You will see that no error is shown.

On the other side, if you do the same in the Advanced section, you will see an error:

For this reason (and also due to design) I wanted to use some callback in order to show errors:

    const errMsg = ...... ??
    toast.add({ severity: "danger", summary: "Error", detail: errMsg, life: 3000 });

[WatCodeDatCode]

The error does not show up because the custom content template does not pass and use the messages prop.

I have created a PR that the team can decide if the example should be extended, but in the mean time take a look to see how you can implement it on your end.

[dinacuatro]

The error does not show up because the custom content template does not pass and use the messages prop.

I have created a PR that the team can decide if the example should be extended, but in the mean time take a look to see how you can implement it on your end.

Thanks, I managed to show it inside content by doing this:

<template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback, progress, messages }">
    <template v-for="message in messages">
        <Message severity="error">{{ message }}</Message>
    </template>

However, what I need is a hook to be able to show the message inside a Toast component, and this is something I cannot find in documentation. Is it possible?

[WatCodeDatCode]

It seems the only area that the info regarding these custom validations appear is within this messages slotProps. Since this is not an emitted function, the only way I could think at the moment to get it to work would be passing the messages to a function that sets a watched ref that then can loop through the messages and set the toast values.

Here is a little proof of concept.

There is likely an even better way to do it natively, otherwise an expansion of functionality would require opening an enhancement request in PrimeVue discussions.

[tugcekucukoglu]

It is not a core issue and you can always improve the live example yourself.