Code
<template>
<w-stack direction="column" gap="medium">
<w-file-upload
id="file-upload-default"
accept="image/png, image/jpeg"
label="Upload your files"
hint="Only .png and .jpeg"
></w-file-upload>
<w-file-upload
id="file-upload-default"
accept="image/png, image/jpeg"
label="Upload your files"
hint="Only .png and .jpeg"
>
<div slot-hint>
Hint from slot with
<w-link href="https://watson.docplanner.design/" target="_blank">
rich content
</w-link>
in it.
</div>
</w-file-upload>
</w-stack>
</template>
<script type="module">
const triggerProps = {
label: 'Add files',
leadingIcon: 'clip',
variant: 'primary'
};
function handleFiles({ detail: file }) {
console.log(file[0]);
}
const fileUploadDefault = document.querySelector('#file-upload-default');
fileUploadDefault.triggerProps = triggerProps;
fileUploadDefault.addEventListener('update:modelValue', e => {
handleFiles(e);
});
</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. |