DEV Community

Cover image for How to upload files with Vue and FilePond

How to upload files with Vue and FilePond

Rik Schennink on April 12, 2019

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...
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 PQINA

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 PQINA

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

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 PQINA

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
 
george_pollock profile image
george_pollock

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

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