How to upload files with Vue and FilePond
Tags: javascript, vue, webdev, filepond
Published: 2019-04-12 14:02:39

---
title: How to upload files with Vue and FilePond
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/xe0yemi8onrsal0qvmod.jpg
description: A quick step by step on how to set up the FilePond Vue adapter
tags: javascript, vue, webdev, filepond
---

The [FilePond](https://pqina.nl/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](https://cli.vuejs.org/) 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.

```bash
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.

```bash
cd my-app
```

Now start the development server with the following command.

```bash
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.


```bash
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.

```js
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.

```js
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.

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

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

![](https://thepracticaldev.s3.amazonaws.com/i/uaffpd6b6fjm70zt0px0.png)

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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file) and copies its standard behaviour.

![](https://thepracticaldev.s3.amazonaws.com/i/ogfdpkalgvyvfgh7e407.gif)

To enable multiple file mode lets add the `allowMultiple` attribute.

```vue
<FilePond allowMultiple="true"/>
```

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

![](https://thepracticaldev.s3.amazonaws.com/i/3d8bvisu48jwn5jqx5ft.gif)

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](https://github.com/pqina/filepond-boilerplate-php) (download the repository and run `vagrant up`).

```vue
<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.

![](https://thepracticaldev.s3.amazonaws.com/i/jgnww7jtt5uhx67wfbeo.gif)

The default FilePond server calls are described in the [server configuration docs](https://pqina.nl/filepond/docs/patterns/api/server/). 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](https://github.com/pqina/filepond-plugin-image-preview) to make dropped images look a bit nicer.

```bash
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.

```js
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.

![](https://thepracticaldev.s3.amazonaws.com/i/sug3f1yeer5rvyl8k7dt.gif)

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](https://github.com/pqina/filepond-plugin-image-exif-orientation), [image cropping](https://github.com/pqina/filepond-plugin-image-crop), [resizing](https://github.com/pqina/filepond-plugin-image-resize), [client-side image transforms](https://github.com/pqina/filepond-plugin-image-transform), [image editing](https://pqina.nl/doka/), and [various other plugins](https://pqina.nl/filepond/plugins.html).

There’s a whole list of [properties](https://pqina.nl/filepond/docs/patterns/api/filepond-instance/#properties) and [events](https://pqina.nl/filepond/docs/patterns/api/filepond-instance/#callbacks) you can configure to make FilePond fit your needs.

If you have any questions, find me on [Twitter](https://twitter.com/rikschennink/) or drop a comment below.