Problem to solve
I pretty much love VFileUpload (introduced 3.7.6) and feel honored to suggest a couple of essential tweaks it so it can fit our requirements.
- We want to hide the divider and icon.
- We need clear distinction
VFileUpload's slots and VFileUploadItem's slots.
- We want all VField slots, such as
#prepend, #append, #append-inner, etc.
- Expose the browse method to be callable from outside the component's template scope.
- Keep previously selected files when clicking browse
Proposed solution
- Hide the default divider and icon using hide-divider and hide-icon
Example:
<VFileUpload hide-divider hide-icon />
- Clear distinction between VFileUpload slots and VFileUploadItem slots
Example:
<v-file-upload>
<template #prepend></template>
<!-- This is confusion, it's actually prepending to item -->
<template #append-inner-item></template>
<!-- Looks more clear ^_^ -->
</v-file-upload>
- All default slots that comes with VField
Example:
<v-file-upload>
<template #prepend-inner></template>
<template #append-inner></template>
<template #clear></template>
<template #default></template>
<template #label></template>
<template #lodaer></template>
</v-file-upload>
- Expose the browse mechanism using a callback
Example:
<script setup>
const fileUploadComponent = ref<InstanceType<typeof VFileUpload>>(null);
</script>
<template>
<v-btn @click="fileUploadComponent?.browse()" />
<v-file-upload ref="fileUploadComponent" />
</template>
Instead of doing it like this:
<v-btn
@click="fileUploadComponent?.$parent?.$el.querySelector?.('.v-file-upload').click()"
- I suggest keeping previously selected files when clicking browse the default behavior that could be disabled by a
clear-on-browse prop
Current behavior is clearing previously selected files when browse is clicked
Example
<script setup>
const files = ref([])
</script>
<template>
<v-file-upload
clear-on-browse
/>
</template>
Problem to solve
I pretty much love
VFileUpload(introduced 3.7.6) and feel honored to suggest a couple of essential tweaks it so it can fit our requirements.VFileUpload's slots andVFileUploadItem's slots.#prepend,#append,#append-inner, etc.Proposed solution
Example:
<VFileUpload hide-divider hide-icon />Example:
Example:
Example:
Instead of doing it like this:
clear-on-browsepropCurrent behavior is clearing previously selected files when browse is clicked
Example