File Upload

For performing file uploads File Pond is our go-to library. For usage within vue, vue-filepond can be used.

File Pond is also available for other UI libraries. More information can be found under the File Pond Installation section.

The File Pond Plugins allow for customization of the upload experience.

Showcases

Default

Default File Upload

Utility functions

In order to have an easy implementation of vue-file-pond there are some useful utility functions made available.

getTranslations

vue-file-pond requires you to set specific translation using v-bind. This function allows you to set the provided translations based on an iso language code. When no language is specified, nl-be will be taken as default.

<script setup lang="ts">
import { getTranslations } from "@xerius/codey-components";

import vueFilePond from "vue-filepond";
import "filepond/dist/filepond.min.css";
const FilePond = vueFilePond();
</script>

<template>
  <div>
    <file-pond
      v-bind="getTranslations()"
      ...
    />
  </div>
</template>

verifyExtensions

When using the filepond-plugin-file-validate-type plugin, it is possible to check selected extensions more finegrained by providing a check function.

Note: This has no affect on the file types that you can select that is specified by the accepted-file-types prop.

<script setup lang="ts">
import { verifyExtension } from "@xerius/codey-components";

import vueFilePond from "vue-filepond";
/* eslint-disable import/default */ // Incorrect type definition of these plugins
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
/* eslint-disable import/default */

import "filepond/dist/filepond.min.css";
const FilePond = vueFilePond(
  FilePondPluginFileValidateType,
);
</script>

<template>
  <div>
    <file-pond
      accepted-file-types="image/jpeg, image/png, application/pdf, image/jpg"
      :file-validate-type-detect-type="
        (source: any, type: string) => verifyExtension(['png', 'jpg', 'pdf'], source, type)
      "
    />
  </div>
</template>

Example

Below is a full example showing the most common cases. The following packages need to be installed to use the example below:

npm i filepond@4 vue-filepond@7 filepond-plugin-file-encode@2 filepond-plugin-file-validate-size@2 filepond-plugin-file-validate-type@1

<script setup lang="ts">
import { ref } from "vue";
import { getTranslations, verifyExtension } from "@xerius/codey-components";

import vueFilePond from "vue-filepond";
/* eslint-disable import/default */ // Incorrect type definition of these plugins
import FilePondPluginFileValidateSize from "filepond-plugin-file-validate-size";
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
import FilePondPluginFileEncode from "filepond-plugin-file-encode";
/* eslint-disable import/default */

import "filepond/dist/filepond.min.css";
const FilePond = vueFilePond(
  FilePondPluginFileValidateType,
  FilePondPluginFileValidateSize,
  FilePondPluginFileEncode
);

const files = ref<any[]>();
</script>

<template>
  <p class="mb-4">
    This example allows the selection of images (png/jpg) and pdf files. One file can be 1MB in
    size, the total size of all files cannot exceed 10MB
  </p>
  <div id="upload-component" class="p-4">
    <FilePond
      v-bind="getTranslations()"
      name="file-pond"
      :allow-multiple="true"
      accepted-file-types="image/jpeg, image/png, application/pdf, image/jpg"
      max-file-size="1MB"
      max-total-file-size="10MB"
      :file-validate-type-detect-type="
        (source: any, type: string) => verifyExtension(['png', 'jpg', 'pdf'], source, type)
      "
      @input="files = $event"
    />
  </div>

  <div class="mt-8">
    Files:
    <pre v-for="file in files" :key="file.id">
        id: {{ file.id }}
        status: {{ file.status }}
        size: {{
        !file.getFileEncodeBase64String() ? "loading..." : file.getFileEncodeBase64String().length
      }}
      </pre
    >
  </div>
</template>