vue-filepond

library7.0.4jsnpmunverified

Vue FilePond is an official adapter component designed to integrate the powerful FilePond file upload library with Vue.js applications. Currently stable at version 7.0.4, this package provides a `FilePond` Vue component that wraps the underlying JavaScript library, enabling seamless file uploading experiences. While there isn't a strict release cadence, minor updates and bug fixes are released as needed. Its key differentiators include leveraging FilePond's robust feature set, such as drag-and-drop functionality, image optimization, accessibility features (keyboard navigation, AT software compatibility), responsive design, and support for various file types and upload methods (AJAX, base64, remote URLs). It's primarily designed for Vue 3, with a separate major version (v6) dedicated to Vue 2 support, ensuring broad compatibility while maintaining a modern API for newer Vue applications.

web-framework http-networking

npm install vue-filepond

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-FILEPOND

vue-filepond

web-frameworkjavascriptv7.0.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

vueFilePond

✓ import vueFilePond from "vue-filepond";

✗ const vueFilePond = require("vue-filepond");

This is the factory function used to create the FilePond Vue component. It should be imported for ESM.

FilePondPluginFileValidateType

✓ import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";

✗ const FilePondPluginFileValidateType = require("filepond-plugin-file-validate-type");

FilePond plugins must be imported separately and then passed to the `vueFilePond` factory function.

FilePond base styles

✓ import "filepond/dist/filepond.min.css";

✗ require("filepond/dist/filepond.min.css");

The core FilePond CSS styles are essential for the component's appearance and must be imported.

FilePond component

✓ const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview);

The actual Vue component named 'FilePond' is created by calling the `vueFilePond` factory function, optionally with any desired FilePond plugins as arguments.

This example demonstrates how to set up the FilePond component, register plugins, handle initial files, and listen to events in a Vue 3 application.

<template> <div id="app"> <file-pond name="test" ref="pond" label-idle="Drop files here..." v-bind:allow-multiple="true" accepted-file-types="image/jpeg, image/png" server="/api" v-bind:files="myFiles" v-on:init="handleFilePondInit" /> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import vueFilePond from "vue-filepond"; import "filepond/dist/filepond.min.css"; import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css"; import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type"; import FilePondPluginImagePreview from "filepond-plugin-image-preview"; const FilePond = vueFilePond( FilePondPluginFileValidateType, FilePondPluginImagePreview ); export default defineComponent({ name: "app", components: { FilePond, }, data() { return { myFiles: ["cat.jpeg"] }; }, methods: { handleFilePondInit() { console.log("FilePond has initialized"); // FilePond instance methods are available on `this.$refs.pond` }, }, }); </script>

Debug

Known issues

breakingVersion 7.x+ of `vue-filepond` is exclusively compatible with Vue 3. Applications using Vue 2 must install `vue-filepond@^6.0.0`.

fix

For Vue 2 projects, run `npm install vue-filepond@^6.0.0`. For Vue 3 projects, ensure you are on `vue-filepond@^7.0.0` or higher.

affects: >=7.0.0

gotchaFilePond plugins (e.g., image preview, file type validation) are not bundled with `vue-filepond` and must be installed, imported, and registered separately when creating the FilePond component.

fix

Install required plugins via npm (e.g., `npm install filepond-plugin-image-preview`), then import and pass them as arguments to the `vueFilePond` factory function: `const FilePond = vueFilePond(Plugin1, Plugin2);`.

affects: >=5.0.0

gotchaCore FilePond styles (`filepond.min.css`) and any plugin-specific styles must be explicitly imported into your project to ensure correct rendering.

fix

Add `import "filepond/dist/filepond.min.css";` and any plugin styles (e.g., `import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css";`) to your main entry file or component's style block.

affects: >=5.0.0

gotchaWhen using Server-Side Rendering (SSR) frameworks like Nuxt.js, the FilePond component should be wrapped in `<no-ssr>` tags or similar client-only hydration logic to prevent build issues or hydration mismatches.

fix

Wrap the `<FilePond />` component in a `<no-ssr>` component or use dynamic imports with `ssr: false` in your Nuxt.js configuration to ensure client-side rendering.

affects: >=5.0.0

gotchaIn older versions (`<=5.1.2`), there was a known issue where FilePond's detach mechanism would not run correctly, potentially leading to memory leaks. This was fixed in v5.1.3 and subsequent versions.

fix

Upgrade to `vue-filepond` version 5.1.3 or higher to benefit from the memory leak fix and improve application stability.

affects: <5.1.3

Errors

Common errors & fixes

Failed to resolve component: file-pond or [Vue warn]: Unknown custom element: <FilePond>

The FilePond component was not correctly registered with Vue, or the `vueFilePond` factory was not called to create the component.

fix

Ensure you import `vueFilePond`, call it with necessary plugins (e.g., `const FilePond = vueFilePond();`), and then register this `FilePond` constant in your component's `components` option.

Cannot read properties of undefined (reading 'registerPlugin') or FilePond is not a constructor

FilePond plugins were passed directly as props to the `<FilePond>` component instead of being passed as arguments to the `vueFilePond` factory function, or the factory function itself wasn't called.

fix

Plugins should be passed as arguments to the `vueFilePond` function when creating the component: `const FilePond = vueFilePond(Plugin1, Plugin2);`.

Module not found: Error: Can't resolve 'filepond/dist/filepond.min.css'

The `filepond` package or its styles are not installed or correctly resolved by your bundler.

fix

Run `npm install filepond` and ensure the import path `import "filepond/dist/filepond.min.css";` is correct and accessible within your project's module resolution configuration.

[Vue warn]: Hydration completed but contains mismatches. (in SSR environments like Nuxt.js)

FilePond's client-side rendering conflicts with the server-side rendered HTML, leading to hydration errors.

fix

Wrap the `<file-pond>` component in a `<no-ssr>` tag or use client-only rendering strategies specific to your SSR framework to ensure it's rendered only on the client side.

Upgrade

Version history

7.0.4latest on npm

Audit

Dependencies

filepondrequiredCore FilePond library is required for all functionality.

vuerequiredVue.js runtime is required, specifically Vue 3 for v7+.

Agent activity

17 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/pqina/vue-filepond ↗

packagehttps://www.npmjs.com/package/vue-filepond ↗

homepagehttps://pqina.nl/filepond ↗