Skip to content

Instantly share code, notes, and snippets.

@jakjr

jakjr/FilePondInput.vue

Created June 9, 2022 19:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jakjr/e351b1746b12fb66f7a426af45164524 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jakjr/e351b1746b12fb66f7a426af45164524 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
FilePondInput.vue
<script setup>
import { onMounted } from "vue";
import { create, registerPlugin } from "filepond";
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size';
import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
import 'filepond/dist/filepond.min.css';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
const props = defineProps({
id: {
type: String,
default: 'filepod_' + Math.floor(Math.random() * 100) + 1
},
labelIdle: {
default: 'Clique ou arraste seus arquivos aqui...',
type: String
}
})
const emit = defineEmits(['update:modelValue'])
registerPlugin(
FilePondPluginFileValidateType,
FilePondPluginFileValidateSize,
FilePondPluginImagePreview,
FilePondPluginImageExifOrientation
)
onMounted(() => {
const fileInput = document.querySelector('#' + props.id);
const pond = create(fileInput, {
storeAsFile: true,
dropOnPage: true,
allowMultiple: true,
credits: null,
labelIdle: props.labelIdle,
labelFileTypeNotAllowed: 'Tipo do arquivo não permitido'
});
pond.on('updatefiles', (files) => {
emit(
'update:modelValue',
files.map(function (filepond) {
return filepond.file
})
)
});
})
</script>
<template>
<input :id="id" type="file">
</template>
<style scoped>
</style>
@jakjr
Copy link
Author

jakjr commented Jun 9, 2022 •
edited
Loading

Vue component to wrap FilePond and transform a simple <input type=file> at a nice multiple file upload place, with drag-and-drop:

Seleção_932

How to Use:

install all you need:
npm install vue-filepond filepond --save
npm i filepond-plugin-file-validate-type --save
npm i filepond-plugin-file-validate-size --save
npm i filepond-plugin-image-exif-orientation --save
npm i filepond-plugin-image-preview --save

At your code:

import FilePondInput from '@/Components/FilePondInput'

<FilePondInput
  v-model="form.anexos"
  accept="application/pdf, image/*"
/>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment