vue-filepond

repository·master·Indexed 24 days ago

A Vue.js adapter component for FilePond, a JavaScript library for file uploads. It provides functionality for handling file uploads, image optimization, and drag-and-drop within Vue applications. The library supports Vue 3 and Vue 2 (via version 6), and includes instructions for SSR environments like Nuxt.js and CDN usage.

Tokens: 1.5K
Snippets: 6
Records: 9
Agent score: 34%

What's inside vue-filepond

Setup the Vue FilePond example project
master
To set up the example project, install the necessary dependencies using npm.
```
npm install
```
https://github.com/pqina/vue-filepond/blob/master/example/README.md
Install Vue FilePond
master
To use Vue FilePond, you must install both the vue-filepond adapter and the core filepond library.
Note for Vue 2 users: You must install version 6 of the plugin specifically:
```
npm install vue-filepond@^6.0.0 filepond
```
For Vue 3 users:
```
npm install vue-filepond filepond
```
https://github.com/pqina/vue-filepond/blob/master/README.md
Run the Vue FilePond example in development mode
master
To start the development server with hot-reloading enabled, use the serve script.
```
npm run serve
```
https://github.com/pqina/vue-filepond/blob/master/example/README.md
Lint and fix files in the example project
master
To run linting and automatically fix style issues, use the lint script.
```
npm run lint
```
https://github.com/pqina/vue-filepond/blob/master/example/README.md
Use Vue FilePond in SSR (e.g., Nuxt.js)
master
When using Vue FilePond in a Server-Side Rendering (SSR) environment like Nuxt.js, you should wrap the component in <no-ssr> tags to prevent errors during server-side execution, as FilePond requires a browser environment.
```
<template>
  <no-ssr>
    <file-pond />
  </no-ssr>
</template>
```
https://github.com/pqina/vue-filepond/blob/master/README.md
Build the Vue FilePond example for production
master
To compile and minify the project for production deployment, use the build script.
```
npm run build
```
https://github.com/pqina/vue-filepond/blob/master/example/README.md
Install and initialize Vue FilePond
master
To use Vue FilePond, you must initialize it by passing any FilePond plugins as arguments to the default export. This function registers the plugins with the core FilePond library and returns a Vue component named FilePond.
When using the component, you can pass FilePond options as props. The component also automatically maps FilePond's on* callback options to Vue events (e.g., an option onprocessfile becomes an @processfile event).
https://github.com/pqina/vue-filepond/blob/master/lib/index.js

Basic Usage of Vue FilePond in Vue 3

master

To use Vue FilePond in a Vue 3 application, you need to import the adapter, the core FilePond styles, and any FilePond plugins you wish to use. The vueFilePond function acts as a factory that accepts the plugins you want to register.

Key steps:

Import vueFilePond from vue-filepond.
Import FilePond CSS.
Import any plugins and their corresponding CSS.
Initialize the component using vueFilePond(plugin1, plugin2, ...).
Use the <file-pond /> component in your template.

FilePond instance methods are accessible via the component's ref.

<template>
  <div id="app">
    <file-pond
      name="test"
      ref="pond"
      label-idle="Drop files here..."
      v-bind:allow-multiple="true"
      accepted-file-types="image/jpeg, image/png"
      server="/api"
      v-bind:files="myFiles"
      v-on:init="handleFilePondInit"
    />
  </div>
</template>

<script>
// 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 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,
  },
};
</script>

Use Vue FilePond via CDN in the browser

master

You can use Vue FilePond directly in an HTML file by including the necessary scripts and stylesheets from a CDN (like unpkg).

Note that when using the browser-based script approach, you access the component via vueFilePond.default(plugins).

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vue in Browser</title>
    <link rel="stylesheet" href="https://unpkg.com/filepond/dist/filepond.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css" />
  </head>
  <body>
    <div id="app">
      <file-pond></file-pond>
    </div>

    <script src="https://unpkg.com/filepond-plugin-image-preview"></script>
    <script src="https://unpkg.com/filepond"></script>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-filepond@6"></script>

    <script>
      new Vue({
        el: "#app",
        components: {
          FilePond: vueFilePond.default(FilePondPluginImagePreview),
        },
      });
    </script>
  </body>
</html>