How to use the filepond.create function in filepond

To help you get started, we’ve selected a few filepond examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github pqina / vue-filepond / lib / index.js View on Github external
// 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];
            });
    },
github pqina / angular-filepond / dist / component / filepond.component.js View on Github external
this._ngZone.runOutsideAngular(function () {
            _this._pond = create(_this._element, Object.assign(_this._options, emitters));
        });
        // Copy instance method references to component instance
github pqina / react-filepond / dist / react-filepond.esm.js View on Github external
// 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];
      });
  }
github pqina / ngx-filepond / src / app / modules / filepond / filepond.component.ts View on Github external
this.zone.runOutsideAngular(() => {
      
      // create instance
      this.pond = create(input, {
          // our options
          ...this.options, 

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

    });
github pqina / react-filepond / index.js View on Github external
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];
      });
  }
github pqina / filepond / types / tests.ts View on Github external
import * as FilePond from 'filepond';

const data = { hello: 'world' };
const blob = new Blob([JSON.stringify(data, null, 2)], {
  type: 'application/json'
});
const file = new File(["aaaa"], "something")
const pond1 = FilePond.create();
const pond2 = FilePond.create(new Element())
const pond = FilePond.create(undefined, {
  name: "",
  files: [{
    source: "123",
    options: {
      type: 'limbo'
    }
  },
    "data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==",
    file,
    blob],
  server: {
    process: (fieldName, file, metadata, load, error, progress, abort) => {
      return {
        abort: () => { abort(); }
      }
    },
github pqina / filepond / types / tests.ts View on Github external
import * as FilePond from 'filepond';

const data = { hello: 'world' };
const blob = new Blob([JSON.stringify(data, null, 2)], {
  type: 'application/json'
});
const file = new File(["aaaa"], "something")
const pond1 = FilePond.create();
const pond2 = FilePond.create(new Element())
const pond = FilePond.create(undefined, {
  name: "",
  files: [{
    source: "123",
    options: {
      type: 'limbo'
    }
  },
    "data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==",
    file,
    blob],
  server: {
    process: (fieldName, file, metadata, load, error, progress, abort) => {
      return {
        abort: () => { abort(); }
github pqina / angular-filepond / src / component / filepond.component.ts View on Github external
this._ngZone.runOutsideAngular(() => {
            this._pond = create(this._element, Object.assign(this._options, emitters));
        });
github directus / api / extensions / core / interfaces / blob / input.vue View on Github external
mounted() {
    this.pond = FilePond.create(this.$refs.file);
    document.addEventListener("FilePond:encoded", this.processFile);
  },
  beforeDestroy() {
github directus / api / extensions / core / interfaces / file-upload / input.vue View on Github external
mounted() {
    this.pond = FilePond.create(this.$refs.file);
    this.pond.on("addfile", this.processFile);
  },
  beforeDestroy() {

filepond

FilePond, Where files go to stretch their bits.

MIT
Latest version published 5 days ago

Package Health Score

83 / 100
Full package analysis