Open
Description
Is there an existing issue for this?
- I have searched the existing issues
Have you updated Vue FilePond, FilePond, and all plugins?
- I have updated FilePond and its plugins
Describe the bug
I am coming from using the react-filepond version of this to a new project that is forcing me to use vue.
I am having trouble with getting prop
intellisense to show the available props on the FilePond
component.
Is this expected or am I doing something wrong?
I dont get any red lines on the props. But I also can pass props which I know for sure do not exist and there is still no red warning.
Is this a bug / something with the vue-filepond package that is expected. Or am I the dummy who does not know how to get vue intellisense working? I do have volar vs code extension installed and for locally authored SFCs I have intellisense.
Thanks you for the help. Have a great day!
Reproduction
<script setup lang="ts">
import FilePondPluginFileEncode from 'filepond-plugin-file-encode';
import FilePondPluginMaxFileSize from 'filepond-plugin-file-validate-size';
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
import FilePondPluginImageEdit from 'filepond-plugin-image-edit';
import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginImageResize from 'filepond-plugin-image-resize';
import FilePondPluginImageTransform from 'filepond-plugin-image-transform';
import createFilePond from 'vue-filepond';
import 'filepond-plugin-image-edit/dist/filepond-plugin-image-edit.css';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
import 'filepond/dist/filepond.min.css';
import { ref } from 'vue';
const FilePond = createFilePond(
FilePondPluginFileEncode,
FilePondPluginMaxFileSize,
FilePondPluginFileValidateType,
FilePondPluginImageEdit,
FilePondPluginImageExifOrientation,
FilePondPluginImagePreview,
FilePondPluginImageResize,
FilePondPluginImageTransform,
);
const props = withDefaults(
defineProps<{
id: string;
label: string;
name: string;
required?: boolean;
maxFileSize?: number;
maxFiles?: number;
disabled?: boolean;
allowMultiple?: boolean;
error?: string;
description?: string;
}>(),
{
required: false,
maxFileSize: 5,
maxFiles: 1,
disabled: false,
allowMultiple: false,
},
);
const pondRef = ref<typeof FilePond>();
const error = ref<string | undefined>(props.error);
const files = ref<File[]>([]);
const onUpdateFiles = (fileItems: File[]) => {
console.log('onUpdate');
console.log(fileItems);
files.value = fileItems.map((fileItem) => fileItem);
};
</script>
<template>
<div>
<label :for="props.id">{{ props.label }}</label>
<file-pond
ref="pondRef"
:id="props.id"
:name="props.name"
:allowMultiple="props.allowMultiple"
:disabled="props.disabled"
:required="props.required"
:instantUpload="false"
:files="files"
@updatefiles="onUpdateFiles"
/>
<div
v-if="props.description && !error"
class="mt-2"
>
{{ props.description }}
</div>
<div
v-if="error"
class="mt-2 text-danger"
>
{{ error }}
</div>
</div>
</template>
Environment
- Device: Mac
- OS: Sonoma 14.0
- Broser: Chrome
- Vue version: 3.x.x