[Bug] Property "acceptedFileTypes" was accessed during render but is not defined on instance.

[flexchar]

Is there an existing issue for this?

• [X] I have searched the existing issues

Have you updated Vue FilePond, FilePond, and all plugins?

• [X] I have updated FilePond and its plugins

Describe the bug

Upon loading a component a console warning [Vue warn]: Property "acceptedFileTypes" was accessed during render but is not defined on instance. will be produced. I've attempted to provide the file formats in many ways but nothing seems to work.

My component:

<FilePond
    name="pics"
    ref="pond"
    allow-multiple="true"
    v-bind:server="serverConfig"
    v-bind:files="photos"
    v-on:init="handleFilePondInit"
    accepted-file-types="image/*"
    acceptedFileTypes="image/*"
    :acceptedFileTypes="['image/*']"
    :accept="['image/*']"
/>

Reproduction

It's weak to say - but it happens with the most basic setup using readme example. The project seems to be abandoned lately so I'm feeling lazy to add the example. But if someone pings me - I'll do that!

Environment

- Device: Laptop
- OS: Windows 11
- Browser: Firefox 107 / MS Edge / Chrome (running latest as of the day posted)
- Vue version: 3.2.45

[MadMikeyB]

This is how I use it, and it works:

accepted-file-types="image/jpeg, image/png"

My full template:

<template>
    <client-only>
        <file-pond
            name="file"
            ref="pond"
            label-idle="Drop screenshots here..."
            :allow-multiple="true"
            :chunk-uploads="true"
            accepted-file-types="image/jpeg, image/png"
            :allow-browse="true"
            :allow-remove="false"
            @init="handleFilePondInit"
            credits="false"
            @addfile="handleProcessFileStart"
            @processfilestart="handleProcessFileStart"
            @processfiles="handleFilesProcess"
            :server="{  process, revert, restore, load, fetch }"
        />
    </client-only>
</template>

[flexchar]

Thanks for sharing @MadMikeyB. Unfortunately I still get the same warning. Perhaps you could share entire component file from imports to usage?

[flexchar]

Turns out installing and registering this plugin the problem went away https://pqina.nl/filepond/docs/api/plugins/file-validate-type/

[benleivian]

Turns out installing and registering this plugin the problem went away https://pqina.nl/filepond/docs/api/plugins/file-validate-type/

Thank you! That worked for me as well.