Upload files in Vue e FilePond

FilePond è una libreria per Javascript per l'upload dei files.

Non esegue un vero upload sul server, nel senso che deve esserci una API che viene richiamata lato server, ma si occupa della parte lato client.

In questo articolo vediamo come usarla in Vue.

Dobbiamo installare un pò di librerie; possiamo usare npm:

npm i vue-filepond filepond filepond-plugin-file-validate-type filepond-plugin-image-preview

Qui sotto il codice della "pagina":

<template>
    <main>
        <file-pond
                name="test"
                ref="pond"
                label-idle="Drop file o clicca per selezioanre..."
                v-bind:allow-multiple="true"
                accepted-file-types="image/jpeg, image/png"
                v-bind:files="myFiles"
                server="/api/upload"
                v-on:init="handleFilePondInit"/>
    </main>
</template>

<script>
import vueFilePond from "vue-filepond";
import "filepond/dist/filepond.min.css";
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";

const FilePond = vueFilePond(
    FilePondPluginFileValidateType,
    FilePondPluginImagePreview
);

export default {
    name: "app",
    data: function () {
        return {myFiles: []};
    },
    methods: {
        handleFilePondInit: function () {
            console.log("FilePond inizializzato");
        },
    },
    components: {
        FilePond,
    },
};
</script>

Ovviamente alla voce server dovete mettere l'url della vostra API.

Enjoy!