primevue
primevue copied to clipboard
FileUpload v4: PassThrough for button in basic mode differs from documentation
Describe the bug
It is not possible to set the class
attribute using passThrough
for a FileUpload
.
The class attribute is just not set when trying to set it via pt:choose-button:class="my-fancy-class"
.
EDIT:
Actually in the code I saw that - when using basic mode - the pt
is mapped to the property "pcButton" which translates to pt:button:class
.
So when using pt:button:class="my-fancy-class"
, it works as expected.
However, this is not described in the passThrough docs. As I am not sure whether this should be fixed in code or in the docs, I am leaving this issue open.
Reproducer
https://stackblitz.com/edit/primevue-create-vue-typescript-issue-template-udvmak?file=src%2FApp.vue
PrimeVue version
4.0.0-beta.2
Vue version
3.x
Language
TypeScript
Build / Runtime
Vite
Browser(s)
Chrome 124.0.6367.119, Edge 124.0.2478.80
Steps to reproduce the behavior
- Create a
FileUpload
with a passThrough to set the class for the ChooseButton
<script setup lang="ts"></script>
<template>
<FileUpload
mode="basic"
name="demo[]"
url="/api/upload"
accept="image/*"
:maxFileSize="1000000"
@upload="onUpload"
:auto="true"
chooseLabel="Browse"
pt:choose-button:class="my-fancy-class"
/>
</template>
<style>
.my-fancy-class {
background-color: red;
}
</style>
- Check that the class is applied and visible in the DOM
Expected behavior
The class my-fancy-class
is applied to the button element in the dom with the class p-fileupload-choose-button
.