primevue icon indicating copy to clipboard operation
primevue copied to clipboard

FileUpload v4: PassThrough for button in basic mode differs from documentation

Open sceee opened this issue 9 months ago • 0 comments

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

  1. 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>

  1. 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.

sceee avatar May 08 '24 17:05 sceee