DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to upload files with Vue and FilePond
Rik Schennink for PQINA

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Now start the development server with the following command.

npm run serve
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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()
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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"/>
Enter fullscreen mode Exit fullscreen mode

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"/>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (8)

Collapse
 
ethosdata profile image
David Diez

Thanks a lot for this! :)

One question: Is there any way to get the relative folder path of the files while dragging&drop files via FilePond? We will need this info to pass it to the server side and replicate the same folder path in our application.

Collapse
 
rikschennink profile image
Rik Schennink Author

Let's move the conversation here: github.com/pqina/filepond/issues/4...

Collapse
 
ajvjunior profile image
Amilton Junior

Congrats for the article. What about AWS S3 direct upload with filepond?

Collapse
 
rikschennink profile image
Rik Schennink Author

Thanks! You can upload to S3 by setting up a custom processing method:
pqina.nl/filepond/docs/patterns/ap...

Collapse
 
ltroya profile image
Luis Troya • Edited on

Thanks for sharing your knowledge. I was trying it, I like how easy it is to use.

I have a question, is there a listener or event to get the uploaded file? I am using it with Vue.

Collapse
 
rikschennink profile image
Rik Schennink Author

Glad to hear that :)

You can use the onprocessfile callback.

Collapse
 
ltroya profile image
Luis Troya

That's all I need, thanks you so much!

Collapse
 
hvitis profile image
hvitis

Great tutorial. I added one for Djangoers, ready-to-go DRF integration:

hvitis.dev/how-to-upload-files-wit...

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.