Code
<template>
<w-stack direction="column" gap="medium">
<w-stack gap="large">
<w-file-upload
:accept="accept"
:multiple="multiple"
:label="label"
:hint="hint"
:trigger-props="triggerProps"
@update:model-value="handleFiles"
/>
<w-file-upload
:accept="accept"
:multiple="multiple"
:label="label"
:hint="hint"
:trigger-props="triggerProps"
@update:model-value="handleFiles"
>
<template #hint>
Hint from slot with
<w-link href="https://watson.docplanner.design/" target="_blank">
rich content
</w-link>
in it.
</template>
</w-file-upload>
</w-stack>
<div v-if="items.length">
<p>Picture list:</p>
<ul>
<li v-for="item in items" :key="item.size">
{{ item.name }} - {{ item.size }} - {{ item.type }}
</li>
</ul>
</div>
</w-stack>
</template>
<script>
export default {
data() {
return {
label: 'Upload your files',
hint: 'Only .png and .jpeg',
accept: 'image/png, image/jpeg',
multiple: false,
triggerProps: {
label: 'Add files',
leadingIcon: 'clip',
variant: 'primary'
},
items: []
};
},
methods: {
handleFiles(files) {
this.items.push(...files);
}
}
};
</script>
Props
|
Name |
Description |
Type |
Default |
Values |
|---|---|---|---|---|
|
v-model model-value v2, wc value v1 |
The value of the input. |
array |
null |
|
|
variant |
Defines the variant of the image uploader. |
string |
default |
default | dropzone |
|
image-src |
Provides a link to the image. |
string |
|
|
|
label |
The label for the image uploader. |
string |
null |
|
|
trigger |
The component that will trigger the file browser. |
string |
WButton |
WButton | WIconButton |
|
trigger-props |
Allows set props for WButton or WIconButton component. |
object |
|
|
|
hint |
Optional text about the expected input. |
string |
null |
|
|
error |
Optional text to be shown under the trigger. |
string |
null |
|
|
accept |
Sets accepted file types. |
string |
|
|
|
max-size |
Sets the maximum file size. Add value in MB. |
number |
1 |
|
|
multiple |
Allows multiple file selection. |
boolean |
false |
true | false |
|
translations |
Object with all necessary translations. You can find a list of required translations in config.js |
object |
|
{ fileType, fileSize } |
Events
|
Name |
Description |
Type |
|---|---|---|
|
v-model update:modelValue v2, wc input v1 |
Emits the event after the picked files. |
{ "names": [ "Array" ] } |
Slots
|
Name |
Description |
|---|---|
|
hint |
Use it to provide rich content for input hint. Takes precedence over hint property. |