How to upload files with Vue and FilePond

The FilePond file upload library has been around for a year, let's explore how we can integrate it with Vue. In this article we'll set up a new Vue app and link up the app with the Vue FilePond adapter. When that's done we'll set up a connection to a backend that will receive our uploaded files.

We’ll use Vue CLI to quickly create our base Vue application. If you’re familiar with this process you can probably skip to the Integrating with FilePond section.

Creating a Vue app

Assuming you've already installed Node and Vue CLI (if you don't have them installed, this would be a good time), run the following command from your terminal. It will create a folder "my-app" which will contain our Vue app.

vue create my-app

We'll be presented with one or more questions, we'll go with the default choices.

When the installation has completed, navigate to the project with the following command.

cd my-app

Now start the development server with the following command.

npm run serve

We can now navigate to http://localhost:8080/ to view our Vue app.

You can stop the Vue app from the command line by pressing both the CTRL and C key at the same time.

Integrating with FilePond

With our Vue app ready we can now add the FilePond Vue adapter.

Let’s stop the app (press CTRL + C) and install the adapter.

npm install filepond vue-filepond --save

Now that the adapter files have installed, let’s fire up the app again so we can start making changes.

We’ll add the FilePond component to the app landing page, in reality you’ll probably move it somewhere else, but for the purpose of this article this will suffice.

We first need to import the FilePond component and its CSS file.

Open the "src/App.vue" file and add the following lines to the top of the <script> block.

import vueFilePond from 'vue-filepond';
import 'filepond/dist/filepond.min.css';

Now we need to register our FilePond component. We do this by adding it to the components list like shown below.

export default {
  name: 'app',
  components: {
    FilePond: vueFilePond()
  }
}

Next step is to add the component to the HTML. Let’s edit the HTML in the <template> tag and replace the contents of the <div> with the <FilePond/> tag.

<template>
  <div id="app">
    <FilePond/>
  </div>
</template>

The FilePond drag n' drop area should now render to the screen 🚀

Now we can start configuring FilePond to our wishes.

By default FilePond only accepts one file, this is because underwater it enhances the default file input element and copies its standard behaviour.

To enable multiple file mode lets add the allowMultiple attribute.

<FilePond allowMultiple="true"/>

Let's drop a folder or select multiple files to see it in action.

Just like the classic file input, files are loaded to FilePond but don’t do anything else, they just sit there. We most likely want to send them to our backend. We’ll do this by supplying FilePond with the server attribute.

If you’ve got a server ready, and it is set up to handle file objects you can probably use that, if not, we can set up the FilePond PHP Boilerplate (download the repository and run vagrant up).

<FilePond allowMultiple="true" server="http://192.168.33.10"/>

With the server location configured, FilePond will automatically POST dropped and selected files to the supplied URL.

The default FilePond server calls are described in the server configuration docs. The server attribute can be fine-tuned to a high degree, this allows FilePond to be integrate with basically any remote or local file storage solution.

Let's register the FilePond image preview plugin to make dropped images look a bit nicer.

npm install filepond-plugin-image-preview --save

Now we need to import and register the plugin with the FilePond core. We’ll have to alter the vueFilePond call to use the image preview plugin.

import vueFilePond from 'vue-filepond';
import 'filepond/dist/filepond.min.css';

import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';

export default {
  name: 'app',
  components: {
    FilePond: vueFilePond(FilePondPluginImagePreview)
  }
}

Done! Let’s restart the app and drop our first image.

And that’s it, the basics of file uploading with Vue and FilePond.

You can further enhance the component with features like automatic EXIF orientation correction, image cropping, resizing, client-side image transforms, image editing, and various other plugins.

There’s a whole list of properties and events you can configure to make FilePond fit your needs.

If you have any questions, find me on Twitter or drop a comment below.