Skip to content

add ability to override default dropzone placeholder #395

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+26 −2
Open

add ability to override default dropzone placeholder #395

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6ba1280
add ability to override default dropzone placeholder
sirius-den Jun 4, 2025
6574a38
add doc example
sirius-den Jun 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions docs/components/fileInput.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,3 +105,25 @@ import { FwbFileInput } from 'flowbite-vue'
const file = ref(null)
</script>
```

## Dropzone with custom placeholder

You can customize the dropzone placeholder text using the `dropzonePlaceholder` slot:

```vue
<template>
<fwb-file-input v-model="file" dropzone>
<template #dropzonePlaceholder>
<span class="font-semibold">Choose your file</span>
or drop it here
</template>
</fwb-file-input>
</template>

<script setup>
import { ref } from 'vue'
import { FwbFileInput } from 'flowbite-vue'

const file = ref(null)
</script>
```
6 changes: 4 additions & 2 deletions src/components/FwbFileInput/FwbFileInput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,10 @@
</svg>
<div v-if="!model">
<p :class="dropzoneTextClasses">
<span class="font-semibold">Click to upload</span>
or drag and drop
<slot name="dropzonePlaceholder">
<span class="font-semibold">Click to upload</span>
or drag and drop
</slot>
Comment on lines +46 to +49
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Well-implemented slot customization with minor naming discrepancy.

The named slot implementation is technically sound and successfully enables dropzone placeholder customization while maintaining backward compatibility. The default content preserves the original functionality.

However, there's a naming inconsistency: the PR objectives mention a slot named "placeholder," but the implementation uses "dropzonePlaceholder." Consider verifying this naming choice aligns with the intended API design.

🏁 Script executed:

#!/bin/bash
# Verify if there are any references to the slot name in documentation or tests
rg -i "dropzonePlaceholder|placeholder.*slot" --type md --type vue --type ts --type js

Length of output: 116

Let’s re-run the search using file globs so .vue files are included:

🏁 Script executed:

#!/bin/bash
# Search for slot references in docs, code, and tests
rg -i "dropzonePlaceholder|placeholder.*slot" --glob "*.vue" --glob "*.md" --glob "*.ts" --glob "*.js"

Length of output: 510

Align slot naming and update documentation

There’s an inconsistency between FwbAvatar (uses a placeholder slot) and FwbFileInput (introduces dropzonePlaceholder), and no docs reference the new slot. Please:

• Decide on a consistent API—either rename the slot in FwbFileInput to placeholder
• or update any related docs/tests to mention dropzonePlaceholder
• Ensure all Markdown docs (e.g. under docs/components/) and example usages are updated to reflect the chosen slot name

🤖 Prompt for AI Agents 
In src/components/FwbFileInput/FwbFileInput.vue around lines 46 to 49, there is
a slot named "dropzonePlaceholder" which is inconsistent with the "placeholder"
slot used in FwbAvatar and documentation. To fix this, rename the slot from
"dropzonePlaceholder" to "placeholder" in the component code, and update all
related Markdown documentation and example usages under docs/components/ and any
tests to reflect this consistent slot name.

</p>
<slot />
</div>
Expand Down