Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pqina/vue-filepond
🔌 A handy FilePond adapter component for Vue
https://github.com/pqina/vue-filepond
file filepond image-processing upload vue
Last synced: 2 days ago
JSON representation
🔌 A handy FilePond adapter component for Vue
- Host: GitHub
- URL: https://github.com/pqina/vue-filepond
- Owner: pqina
- License: mit
- Created: 2018-03-22T14:28:51.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-09-15T12:19:28.000Z (over 1 year ago)
- Last Synced: 2025-01-02T04:37:52.299Z (9 days ago)
- Topics: file, filepond, image-processing, upload, vue
- Language: JavaScript
- Homepage: https://pqina.nl/filepond
- Size: 3.87 MB
- Stars: 1,953
- Watchers: 27
- Forks: 128
- Open Issues: 44
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Vue FilePond
Vue FilePond is a handy adapter component for [FilePond](https://github.com/pqina/filepond), a JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.
**If you want to use Vue FilePond with Vue 2, please use v6 of this plugin.**
[](https://github.com/pqina/vue-filepond/blob/master/LICENSE)
[](https://www.npmjs.com/package/vue-filepond)
---
[
](https://www.buymeacoffee.com/rikschennink/)
[Buy me a Coffee](https://www.buymeacoffee.com/rikschennink/) / [Use FilePond with Pintura](https://pqina.nl/pintura/?ref=github-filepond) / [Dev updates on Twitter](https://twitter.com/rikschennink/)
---
### Core Features
- Accepts **directories**, **files**, blobs, local URLs, **remote URLs** and Data URIs.
- **Drop files**, select on filesystem, **copy and paste files**, or add files using the API.
- **Async uploading** with AJAX, or encode files as base64 data and send along form post.
- **Accessible**, tested with AT software like VoiceOver and JAWS, **navigable by Keyboard**.
- **Image optimization**, automatic image resizing, **cropping**, and **fixes EXIF orientation**.
- **Responsive**, automatically scales to available space, is functional on both **mobile and desktop devices**.
[Learn more about FilePond](https://pqina.nl/filepond/)
---
### Also need Image Editing?
**Pintura the modern JavaScript Image Editor** is what you're looking for. Pintura supports setting **crop aspect ratios**, **resizing**, **rotating**, **cropping**, and **flipping** images. Above all, it integrates beautifully with FilePond.
[Learn more about Pintura](https://pqina.nl/pintura/?ref=github-vue-filepond)
---
Installation:
**If you're using Vue 2 please run `npm install vue-filepond@^6.0.0`**
```bash
npm install vue-filepond filepond
```
Usage:
```vue
// Import Vue FilePond
import vueFilePond from "vue-filepond";
// Import FilePond styles
import "filepond/dist/filepond.min.css";
// Import FilePond plugins
// Please note that you need to install these plugins separately
// Import image preview plugin styles
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css";
// Import image preview and file type validation plugins
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
// Create component
const FilePond = vueFilePond(
FilePondPluginFileValidateType,
FilePondPluginImagePreview
);
export default {
name: "app",
data: function () {
return { myFiles: ["cat.jpeg"] };
},
methods: {
handleFilePondInit: function () {
console.log("FilePond has initialized");
// FilePond instance methods are available on `this.$refs.pond`
},
},
components: {
FilePond,
},
};
```
When using FilePond with an SSR configuration like Nuxt.js it's best to wrap it in `` tags.
```vue
```
Usage in the browser:
```html
Vue in Browser
new Vue({
el: "#app",
components: {
FilePond: vueFilePond.default(FilePondPluginImagePreview),
},
});
```
[Read the docs for more information](https://pqina.nl/filepond/docs/patterns/frameworks/vue/)
[Live Demo with Code Sandbox](https://codesandbox.io/s/p3v8zoprp7)