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: about 2 months ago
JSON representation

🔌 A handy FilePond adapter component for Vue

Lists

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



[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/pqina/vue-filepond/blob/master/LICENSE)

[![npm version](https://badge.fury.io/js/vue-filepond.svg)](https://www.npmjs.com/package/vue-filepond)

![npm](https://img.shields.io/npm/dt/vue-filepond)



---



[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)