How to use vue-filepond - 8 common examples

import isEmpty from "lodash/isEmpty"
    import debounce from "lodash/debounce"
    import Unsplash, {toJson} from 'unsplash-js'
    import InfiniteLoading from 'vue-infinite-loading'
    import vueFilePond from 'vue-filepond'

    import 'filepond/dist/filepond.min.css'
    import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css'

    import FilePondPluginImageValidateSize from 'filepond-plugin-image-validate-size'
    import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'
    import FilePondPluginImagePreview from 'filepond-plugin-image-preview'
    import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation'
    import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size'

    const FilePond = vueFilePond(
        FilePondPluginFileValidateType,
        FilePondPluginImagePreview,
        FilePondPluginImageValidateSize,
        FilePondPluginFileValidateSize,
        FilePondPluginImageExifOrientation
    );

    export default {
        name: 'embed-image-modal',

        components: {
            InfiniteLoading,
            FilePond
        },

        data() {

import jwtDecode from 'jwt-decode';

  import vueFilePond, { setOptions } from 'vue-filepond';
  import { FileOrigin } from 'filepond';
  import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
  import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size';
  import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
  import FilePondPluginFilePoster from 'filepond-plugin-file-poster';
  import FilePondPluginGetFile from 'filepond-plugin-get-file';

  import "filepond/dist/filepond.min.css";
  import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
  import 'filepond-plugin-file-poster/dist/filepond-plugin-file-poster.css';
  import 'filepond-plugin-get-file/dist/filepond-plugin-get-file.css';

  const FilePond = vueFilePond( FilePondPluginFileValidateType, FilePondPluginFileValidateSize, FilePondPluginImagePreview, FilePondPluginFilePoster, FilePondPluginGetFile );
  setOptions({
      allowDownloadByUrl: true,
      allowReorder: true,
      labelIdle: i18n.t('field.mediaFile.label.idle'),
      labelInvalidField: i18n.t('field.mediaFile.label.invalidField'),
      labelFileWaitingForSize: i18n.t('field.mediaFile.label.fileWaitingForSize'),
      labelFileSizeNotAvailable: i18n.t('field.mediaFile.label.fileSizeNotAvailable'),
      labelFileLoading: i18n.t('field.mediaFile.label.fileLoading'),
      labelFileLoadError: i18n.t('field.mediaFile.label.fileLoadError'),
      labelFileProcessing: i18n.t('field.mediaFile.label.fileProcessing'),
      labelFileProcessingComplete: i18n.t('field.mediaFile.label.fileProcessingComplete'),
      labelFileProcessingAborted: i18n.t('field.mediaFile.label.fileProcessingAborted'),
      labelFileProcessingError: i18n.t('field.mediaFile.label.fileProcessingError'),
      labelFileProcessingRevertError: i18n.t('field.mediaFile.label.fileProcessingRevertError'),
      labelFileRemoveError: i18n.t('field.mediaFile.label.fileRemoveError'),
      labelTapToCancel: i18n.t('field.mediaFile.label.tapToCancel'),

import FilePondPluginMediaPreview from 'filepond-plugin-media-preview'
    import FilePondPluginImageOverlay from 'filepond-plugin-image-overlay'
    import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation'

    import 'filepond/dist/filepond.min.css'
    import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css'
    import 'filepond-plugin-media-preview/dist/filepond-plugin-media-preview.css'
    import 'filepond-plugin-image-overlay/dist/filepond-plugin-image-overlay.css'
    import 'filepond-plugin-image-edit/dist/filepond-plugin-image-edit.min.css'

    import FilePondPluginImageEdit from 'filepond-plugin-image-edit'
    import FilePondPluginImageCrop from 'filepond-plugin-image-crop'
    import FilePondPluginImageResize from 'filepond-plugin-image-resize'
    import FilePondPluginImageTransform from 'filepond-plugin-image-transform'

    const FilePond = vueFilePond(
        FilePondPluginImageExifOrientation,
        FilePondPluginFileValidateType,
        FilePondPluginImagePreview,
        FilePondPluginImageOverlay,
        FilePondPluginMediaPreview,
        FilePondPluginImageEdit,
        FilePondPluginImageCrop,
        FilePondPluginImageResize,
        FilePondPluginImageTransform
    )

    export default {
        inheritAttrs: false,
        components: {FilePond},
        props: ['field', 'errors', 'columns', 'limit'],
        data() {

content: null,
        images: [],
        uploaded: [],
        is_private: false,
        is_pinned: false,
        tags: []
    };
};

import formErrors from "../mixins/formErrors";
import httpErrors from "../mixins/httpErrors";
import vueFilePond, { setOptions } from 'vue-filepond';

export default {
    components: {
        FilePond: new vueFilePond(),
    },

    mixins: [
        formErrors,
        httpErrors,
    ],

    props: {
        album: {
            type: Object,
            required: false,
            default: () => {}
        }
    },

    data() {

import InfiniteLoading from 'vue-infinite-loading';
import Unsplash, { toJson } from 'unsplash-js';
import debounce from 'lodash/debounce';
import isEmpty from 'lodash/isEmpty';
import vueFilePond from 'vue-filepond';

import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
import 'filepond/dist/filepond.min.css';

import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size';
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginImageValidateSize from 'filepond-plugin-image-validate-size';

const FilePond = vueFilePond(
    FilePondPluginFileValidateType,
    FilePondPluginImagePreview,
    FilePondPluginImageValidateSize,
    FilePondPluginFileValidateSize,
    FilePondPluginImageExifOrientation
);

export default {
    name: 'featured-image-modal',

    components: {
        InfiniteLoading,
        FilePond,
    },

    props: {