Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<template>
<div>
<FilePond
v-bind:max-files="4"
v-bind:allow-multiple="true"
v-bind:accepted-file-types="allowedFiletypes"
v-bind:server="server.process"
v-bind:files="files"
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 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: 'file-pond-upload',
components: {
FilePond,
},
data: function() {
return {
files: [],
allowMultiple: true,
allowFileTypeValidation: true,
allowedFiletypes: 'pdf',
fileValidateTypeLabelExpectedTypesMap: {
'application/pdf': '.pdf',
},
server: {
process: {
url: 'http://0.0.0.0:8990/auth/v1/hug/organisations/adidas/benefit/2a0280a5-2b1f-4d28-b6f7-561395688b07/upload-infopack/',
method: 'POST',
withCredentials: false,
headers: {},
timeout: 7000,
onload: null,
onerror: null,
ondata: null
}
}
};
},
methods: {
handleFilePondInit: function() {
this.$refs.pond.getFiles();
}
},
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment