vue-filepond | 🔌 A handy FilePond adapter component for Vue | File Upload library

FilePond doesn't read EXIF data it only corrects the orientation header parameter so images can be oriented correctly on older browsers.

You could use Exif-JS combined with FilePond to read EXIF data. https://github.com/exif-js/exif-js

Use the beforeAddFile hook to read the EXIF data and add it to the file item.

This is a plain JavaScript example which should be straight forward to port to Vue.

Figured it out thanks to kissu and reading through filePond's docs.

You cannot upload it locally aka http://localhost/upload, since there is not server waiting for an upload at this endpoint. You need a service for this one and cannot just upload a file like this (to my knowledge). And even if it somehow works, you could not have it working on production since people will not have a localhost when visiting your website.

Looking on the Vue framework documentation page, you need to pass a server prop. Then, you can pretty much configure it to your need or post it yourself when you have the files themselves thanks to this.$refs.pond.getFiles().

The API Server documentation is giving some example of configuration:

The files prop is intended to preload files. It doesn't get updated with files you actually drop onto the component.

To see which files are processed (uploaded), listen to the processfile event. To see which files were added (but not yet processed), listen to the addfile event:

So after trying a lot out, it seems like there's a bug with vue-filepond, where custom Header-Functions are only applied, when uploading files with fileSize > chunkSize.

I opened an issue and Rik provided a workaround for the time being (https://github.com/pqina/vue-filepond/issues/193).

You need to define the server prop on the component. You can use v-bind:server="myServer" and then add it to your component data.