Skip to content
Go to file


Failed to load latest commit information.
Latest commit message
Commit time

Vue FilePond

Vue FilePond is a handy adapter component for FilePond, a JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.

License: MIT npm version

Core Features

  • Accepts directories, files, blobs, local URLs, remote URLs and Data URIs.
  • Drop files, select on filesystem, copy and paste files, or add files using the API.
  • Async uploading with AJAX, or encode files as base64 data and send along form post.
  • Accessible, tested with AT software like VoiceOver and JAWS, navigable by Keyboard.
  • Image optimization, automatic image resizing, cropping, and fixes EXIF orientation.
  • Responsive, automatically scales to available space, is functional on both mobile and desktop devices.

Learn more about FilePond

Also need Image Editing?

Doka.js might be just what you're looking for. It's a Modern JavaScript Image Editor, Doka supports setting crop aspect ratios, resizing, rotating, cropping, and flipping images. Above all, it integrates beautifully with FilePond.

Learn more about Doka


npm install vue-filepond filepond


  <div id="app">

        label-idle="Drop files here..."
        accepted-file-types="image/jpeg, image/png"


// Import Vue FilePond
import vueFilePond from 'vue-filepond';

// Import FilePond styles
import 'filepond/dist/filepond.min.css';

// Import FilePond plugins
// Please note that you need to install these plugins separately

// Import image preview plugin styles
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';

// Import image preview and file type validation plugins
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';

// Create component
const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview);

export default {
    name: 'app',
    data: function() {
        return { myFiles: ['cat.jpeg'] };
    methods: {
        handleFilePondInit: function() {
            console.log('FilePond has initialized');

            // FilePond instance methods are available on `this.$refs.pond`
    components: {

When using FilePond with an SSR configuration like Nuxt.js it's best to wrap it in <no-ssr> tags.


Usage in the browser:

<!doctype html>
    <title>Vue in Browser</title>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="">

    <div id="app">
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    new Vue({
        el: '#app',
        components: {
            FilePond: vueFilePond.default(FilePondPluginImagePreview)

Read the docs for more information

Live Demo with Code Sandbox

You can’t perform that action at this time.