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!
javascript npm vue filepond
Commentami!