How to use filepond - 10 common examples

if (!(a.file && b.file)) return 0;

  // Move to right location in list
  if (a.fileSize < b.fileSize) {
    return -1;
  }
  else if (b.fileSize > a.fileSize) {
    return 1;
  }

  return 0;
}



FilePond.setOptions({
  allowDrop: false,
  allowReplace: false,
  instantUpload: false,
  server: {
    url: 'http://192.168.33.10',
    process: './process.php',
    revert: './revert.php',
    restore: './restore.php?id=',
    fetch: './fetch.php?data='
  }
});

FilePond.setOptions({
  server: {
    url: 'http://192.168.0.100',
    timeout: 7000,

// get pond element
        this._element = this.$el.querySelector('input');

        // Map FilePond callback methods to Vue $emitters
        const options = events.reduce((obj, value) => {
            obj[value] = (...args) => {
                this.$emit(value.substr(2), ...args);
            };
            return obj;
        }, {});

        // Scoop up attributes that might not have been caught by Vue ( because the props object is extended dynamically )
        const attrs = Object.assign({}, this.$attrs);

        // Create our pond
        this._pond = create(
            this._element,
            Object.assign(options, attrs, this.$options.propsData)
        );

        // Copy instance method references to component instance
        Object.keys(this._pond)
            .filter(key => !filteredComponentMethods.includes(key))
            .forEach(key => {
                this[key] = this._pond[key];
            });
    },

this._ngZone.runOutsideAngular(function () {
            _this._pond = create(_this._element, Object.assign(_this._options, emitters));
        });
        // Copy instance method references to component instance

// exit here if not supported
    if (!isSupported) return;

    const options = Object.assign({}, this.props);

    // if onupdate files is defined, make sure setFiles does not cause race condition
    if (options.onupdatefiles) {
      const cb = options.onupdatefiles;
      options.onupdatefiles = (items) => {
        this.allowFilesSync = false;
        cb(items);
      }
    }
    
    // Create our pond
    this._pond = create(this._element, options);

    // Reference pond methods to FilePond component instance
    Object.keys(this._pond)
      .filter(key => !filteredMethods.includes(key))
      .forEach(key => {
        this[key] = this._pond[key];
      });
  }

this.zone.runOutsideAngular(() => {
      
      // create instance
      this.pond = create(input, {
          // our options
          ...this.options, 

          // our initial files
          files: this.files
        }
      );

    });

componentDidMount() {
    // exit here if not supported
    if (!isSupported) {
      return;
    }

    // Get files from children (either as array of objects or sources)
    const files = getFilesFromChildren(this.props.children);

    // Create our pond
    this._pond = create(this._element, Object.assign({}, this.props, files));

    // Reference pond methods to FilePond component instance
    Object.keys(this._pond)
      .filter(key => !filteredMethods.includes(key))
      .forEach((key, index) => {
        this[key] = this._pond[key];
      });
  }

const filteredComponentMethods = [
    'setOptions',
    'on',
    'off',
    'onOnce',
    'appendTo',
    'insertAfter',
    'insertBefore',
    'isAttachedTo',
    'replaceElement',
    'restoreElement',
    'destroy'
];

// Test if is supported on this client
const isSupported = supported();

// Setup initial prop types and update when plugins are added
const getNativeConstructorFromType = type =>
    ({
        string: String,
        boolean: Boolean,
        array: Array,
        function: Function,
        int: Number,
        serverapi: Object,
        object: Object
    }[type]);

// Activated props
const props = {};

EventEmitter,
    ViewEncapsulation,
    ElementRef,
    SimpleChanges,
    NgZone
} from '@angular/core';

import {
    OptionTypes,
    create,
    supported,
    registerPlugin as register
} from 'filepond';

// Do this once
const isSupported: boolean = supported();

// Methods not made available to the component
const filteredComponentMethods: Array = [
    'setOptions',
    'on',
    'off',
    'onOnce',
    'appendTo',
    'insertAfter',
    'insertBefore',
    'isAttachedTo',
    'replaceElement',
    'restoreElement',
    'destroy'
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
import { Component, EventEmitter, ViewEncapsulation, ElementRef, NgZone } from '@angular/core';
import { OptionTypes, create, supported, registerPlugin as register } from 'filepond';
// Do this once
var /** @type {?} */ isSupported = supported();
// Methods not made available to the component
var /** @type {?} */ filteredComponentMethods = [
    'setOptions',
    'on',
    'off',
    'onOnce',
    'appendTo',
    'insertAfter',
    'insertBefore',
    'isAttachedTo',
    'replaceElement',
    'restoreElement',
    'destroy'
];
// All the properties that can be bound
var /** @type {?} */ inputs = [];

const filteredComponentMethods = [
    'setOptions',
    'on',
    'off',
    'onOnce',
    'appendTo',
    'insertAfter',
    'insertBefore',
    'isAttachedTo',
    'replaceElement',
    'restoreElement',
    'destroy'
];

// Do this once
const isSupported = supported();

// Setup initial prop types and update when plugins are added
const getNativeConstructorFromType = type =>
    ({
        string: String,
        boolean: Boolean,
        array: Array,
        function: Function,
        int: Number,
        serverapi: Object
    }[type]);

// All the props
const props = {
    id: String
};