oa/documentation/plugins/filepond/v-filepond-documentation.md

state

state
flipped false

VFilePond

Vuero ships with the <VFilePond /> component, a custom file upload component. It is based on the FilePond library. Check the code for more details.

<script setup lang="ts">
const onAddFile = (error: any, fileInfo: any) => {
  if (error) {
    console.error(error)
    return
  }

  const _file = fileInfo.file as File
  if (_file) {
    wizardData.logo = _file
  }
}

const onRemoveFile = (error: any, fileInfo: any) => {
  if (error) {
    console.error(error)
    return
  }

  console.log(fileInfo)

  wizardData.logo = null
}
</script>

<template>
  <VField>
    <VControl>
      <VFilePond
        class="profile-filepond"
        name="profile_filepond"
        :chunk-retry-delays="[500, 1000, 3000]"
        label-idle="<i class='lnil lnil-cloud-upload'></i>"
        :accepted-file-types="['image/png', 'image/jpeg', 'image/gif']"
        :image-preview-height="140"
        :image-resize-target-width="140"
        :image-resize-target-height="140"
        image-crop-aspect-ratio="1:1"
        style-panel-layout="compact circle"
        style-load-indicator-position="center bottom"
        style-progress-indicator-position="right bottom"
        style-button-remove-item-position="left bottom"
        style-button-process-item-position="right bottom"
        @addfile="onAddFile"
        @removefile="onRemoveFile"
      />
    </VControl>
  </VField>
</template>