FilePond

https://pqina.nl/filepond/docs
Admin
FilePond is a flexible and versatile JavaScript library that provides drag-and-drop file uploading...
Tokens:52,299
Snippets:474
Trust Score:9.8
Update:1 month ago
Show doc for...
Tokens:
Raw
### Full FilePond Svelte example with plugins

Source: https://pqina.nl/filepond/docs/getting-started/installation/svelte

A complete example showing plugin registration, component binding, event handling, and CSS imports. Requires installing filepond-plugin-image-preview and filepond-plugin-image-exif-orientation separately.

```svelte
<!-- @copy -->
<script>
    import FilePond, { registerPlugin, supported } from 'svelte-filepond';

    // Import the Image EXIF Orientation and Image Preview plugins
    // Note: These need to be installed separately
    // `npm i filepond-plugin-image-preview filepond-plugin-image-exif-orientation --save`
    import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
    import FilePondPluginImagePreview from 'filepond-plugin-image-preview';

    // Register the plugins
    registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview);

    // a reference to the component, used to call FilePond methods
    let pond;

    // pond.getFiles() will return the active files

    // the name to use for the internal file input
    let name = 'filepond';

    // handle filepond events
    function handleInit() {
        console.log('FilePond has initialised');
    }

    function handleAddFile(err, fileItem) {
        console.log('A file has been added', fileItem);
    }
</script>

<div class="app">
    <FilePond
        bind:this={pond}
        {name}
        server="/api"
        allowMultiple={true}
        oninit={handleInit}
        onaddfile={handleAddFile}
    />
</div>

<style global>
@import 'filepond/dist/filepond.css';
@import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
</style>
```

--------------------------------

### Install with npm

Source: https://pqina.nl/filepond/docs/api/plugins/file-validate-type

Install the filepond-plugin-file-validate-type package using npm.

```bash
npm i filepond-plugin-file-validate-type --save
```

--------------------------------

### Install via npm

Source: https://pqina.nl/filepond/docs/api/plugins/image-exif-orientation

Install the plugin package using npm.

```bash
npm i filepond-plugin-image-exif-orientation --save
```

--------------------------------

### Install Image Preview plugin via npm

Source: https://pqina.nl/filepond/docs/api/plugins/image-preview

Install the plugin package using npm. Run this command in your project directory.

```bash
npm i filepond-plugin-image-preview --save
```

--------------------------------

### Install with npm and register FilePondPluginFileValidateSize

Source: https://pqina.nl/filepond/docs/api/plugins/file-validate-size

Install filepond-plugin-file-validate-size with npm, then import and register FilePondPluginFileValidateSize.

```bash
npm i filepond-plugin-file-validate-size --save
```

```js
// Import FilePond
import * as FilePond from 'filepond';

// Import the plugin code
import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size';

// Register the plugin
FilePond.registerPlugin(FilePondPluginFileValidateSize);
```

--------------------------------

### Manual installation

Source: https://pqina.nl/filepond/docs/api/plugins/image-exif-orientation

Include the plugin and FilePond scripts manually and register the plugin.

```html
<!-- add before </body> -->
<script src="filepond-plugin-image-exif-orientation.js"></script>
<script src="filepond.js"></script>

<script>
    // Register the plugin
    FilePond.registerPlugin(FilePondPluginImageExifOrientation);

    // ... FilePond initialisation code here
</script>
```

--------------------------------

### Manual installation of Image crop

Source: https://pqina.nl/filepond/docs/api/plugins/image-crop

Include the local plugin script and register it before initializing FilePond.

```html
<!-- add before </body> -->
<script src="filepond-plugin-image-crop.js"></script>
<script src="filepond.js"></script>

<script>
    // Register the plugin
    FilePond.registerPlugin(FilePondPluginImageCrop);

    // ... FilePond initialisation code here
</script>
```

--------------------------------

### Install Image crop via npm

Source: https://pqina.nl/filepond/docs/api/plugins/image-crop

Install the plugin package using npm.

```bash
npm i filepond-plugin-image-crop --save
```

--------------------------------

### Install FilePond for Vue via npm

Source: https://pqina.nl/filepond/docs/getting-started/installation/vue

Use npm to install the FilePond core library and the Vue adapter.

```bash
npm install vue-filepond filepond --save
```

--------------------------------

### Install filepond-plugin-image-filter with npm

Source: https://pqina.nl/filepond/docs/api/plugins/image-filter

Install the Image Filter plugin via npm.

```bash
npm i filepond-plugin-image-filter --save
```

--------------------------------

### Install via CDN

Source: https://pqina.nl/filepond/docs/api/plugins/image-exif-orientation

Include the plugin and FilePond scripts via CDN and register the plugin.

```html
<!-- add before </body> -->
<script src="https://unpkg.com/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>

<script>
    // Register the plugin
    FilePond.registerPlugin(FilePondPluginImageExifOrientation);

    // ... FilePond initialisation code here
</script>
```

--------------------------------

### Install filepond-plugin-file-encode via npm

Source: https://pqina.nl/filepond/docs/api/plugins/file-encode

Install the File Encode plugin via npm.

```bash
npm i filepond-plugin-file-encode --save
```

--------------------------------

### Install File Poster plugin via npm

Source: https://pqina.nl/filepond/docs/api/plugins/file-poster

Install the filepond-plugin-file-poster package using npm.

```bash
npm i filepond-plugin-file-poster --save
```

--------------------------------

### Manual installation of Image Resize plugin

Source: https://pqina.nl/filepond/docs/api/plugins/image-resize

Include the plugin and FilePond scripts locally, then register the plugin in a script tag.

```html
<!-- add before </body> -->
<script src="filepond-plugin-image-resize.js"></script>
<script src="filepond.js"></script>

<script>
    // Register the plugin
    FilePond.registerPlugin(FilePondPluginImageResize);

    // ... FilePond initialisation code here
</script>
```

--------------------------------

### Install Image Resize plugin via npm

Source: https://pqina.nl/filepond/docs/api/plugins/image-resize

Install the filepond-plugin-image-resize package using npm.

```bash
npm i filepond-plugin-image-resize --save
```

--------------------------------

### Install FilePond via NPM

Source: https://pqina.nl/filepond/docs/getting-started/installation/javascript

Run this command in your project root to install the FilePond package.

```bash
npm i filepond --save
```

--------------------------------

### prepareFile(query)

Source: https://pqina.nl/filepond/docs/api/instance/methods

Starts preparing the file matching the given query. Returns a Promise that resolves with the file item and the output file `{ file, output }`.

```APIDOC
## prepareFile(query)

### Description
Starts preparing the file matching the given query. Returns a Promise that resolves with the file item and the output file `{ file, output }`.

### Method
prepareFile

### Parameters
- **query** (string|number|File) - Required - The query to identify the file to prepare.

### Response
Returns a Promise that resolves with an object containing `file` and `output`.
```

--------------------------------

### Install react-filepond and filepond with npm

Source: https://pqina.nl/filepond/docs/getting-started/installation/react

Install the FilePond React adapter and core FilePond package via npm. Use this before importing the component in your React project.

```bash
npm install react-filepond filepond --save
```

--------------------------------

### Install filepond-plugin-image-edit with npm

Source: https://pqina.nl/filepond/docs/api/plugins/image-edit

Install the Image Edit plugin via npm.

```bash
npm i filepond-plugin-image-edit --save
```

--------------------------------

### Install via CDN and register FilePondPluginFileValidateSize

Source: https://pqina.nl/filepond/docs/api/plugins/file-validate-size

Add the plugin script and FilePond from unpkg before </body>, then register FilePondPluginFileValidateSize and include FilePond initialisation code.

```html
<!-- add before </body> -->
<script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>

<script>
    // Register the plugin
    FilePond.registerPlugin(FilePondPluginFileValidateSize);

    // ... FilePond initialisation code here
</script>
```

--------------------------------

### Install Image Transform via npm

Source: https://pqina.nl/filepond/docs/api/plugins/image-transform

Command to install the plugin package using npm.

```bash
npm i filepond-plugin-image-transform --save
```

--------------------------------

### Implement FilePond with plugins in Vue

Source: https://pqina.nl/filepond/docs/getting-started/installation/vue

A complete example showing component registration, plugin integration, and data binding.

```html
<!-- @copy -->
<template>
    <div id="app">
        <file-pond
            name="test"
            ref="pond"
            class-name="my-pond"
            label-idle="Drop files here..."
            allow-multiple="true"
            accepted-file-types="image/jpeg, image/png"
            v-bind:files="myFiles"
            v-on:init="handleFilePondInit"
        />
    </div>
</template>

<script>
    // Import FilePond
    import vueFilePond from 'vue-filepond';

    // Import plugins
    import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.esm.js';
    import FilePondPluginImagePreview from 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.esm.js';

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

    // Create FilePond component
    const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview);

    export default {
        name: 'app',
        data: function () {
            return { myFiles: ['index.html'] };
        },
        methods: {
            handleFilePondInit: function () {
                console.log('FilePond has initialized');

                // example of instance method call on pond reference
                this.$refs.pond.getFiles();
            },
        },
        components: {
            FilePond,
        },
    };
</script>
```

--------------------------------

### prepareFiles([query])

Source: https://pqina.nl/filepond/docs/api/instance/methods

Starts preparing all output files or files matching the query. Returns a Promise that resolves with an array of file prepare output objects `{ file, output }`.

```APIDOC
## prepareFiles([query])

### Description
Starts preparing all output files or files matching the query. Returns a Promise that resolves with an array of file prepare output objects `{ file, output }`.

### Method
prepareFiles

### Parameters
- **query** (string|number|File) - Optional - The query to identify files to prepare. If omitted, all files are prepared.

### Response
Returns a Promise that resolves with an array of objects containing `file` and `output`.
```

--------------------------------

### Install Image crop via CDN

Source: https://pqina.nl/filepond/docs/api/plugins/image-crop

Include the plugin script from a CDN and register it before initializing FilePond.

```html
<!-- add before </body> -->
<script src="https://unpkg.com/filepond-plugin-image-crop/dist/filepond-plugin-image-crop.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>

<script>
    // Register the plugin
    FilePond.registerPlugin(FilePondPluginImageCrop);

    // ... FilePond initialisation code here
</script>
```

--------------------------------

### Use FilePond callbacks

Source: https://pqina.nl/filepond/docs/getting-started/installation/svelte

Callbacks can be used exactly like on FilePond itself. This example attaches an oninit callback to handle the init event.

```svelte
<FilePond oninit={handleFilePondInit} />
```

--------------------------------

### Install File Poster plugin via CDN

Source: https://pqina.nl/filepond/docs/api/plugins/file-poster

Add the FilePond and File Poster CSS and JS from unpkg, then register the plugin in a script tag.

```html
<!-- add to document <head> -->
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet" />
<link
    href="https://unpkg.com/filepond-plugin-file-poster/dist/filepond-plugin-file-poster.css"
    rel="stylesheet"
/>

<!-- add before </body> -->
<script src="https://unpkg.com/filepond-plugin-file-poster/dist/filepond-plugin-file-poster.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>

<script>
    // Register the plugin
    FilePond.registerPlugin(FilePondPluginFilePoster);

    // ... FilePond initialisation code here
</script>
```

--------------------------------

### Install manually and register FilePondPluginFileValidateSize

Source: https://pqina.nl/filepond/docs/api/plugins/file-validate-size

Add the local plugin script and FilePond before </body>, then register FilePondPluginFileValidateSize and include FilePond initialisation code.

```html
<!-- add before </body> -->
<script src="filepond-plugin-file-validate-size.js"></script>
<script src="filepond.js"></script>

<script>
    // Register the plugin
    FilePond.registerPlugin(FilePondPluginFileValidateSize);

    // ... FilePond initialisation code here
</script>
```

--------------------------------

### Install filepond-plugin-file-metadata via npm

Source: https://pqina.nl/filepond/docs/api/plugins/file-metadata

Install the File Metadata plugin via npm. Run this command in your project directory to add the plugin as a dependency.

```bash
npm i filepond-plugin-file-metadata --save
```

--------------------------------

### Install jquery-filepond with npm

Source: https://pqina.nl/filepond/docs/getting-started/installation/jquery

Install the FilePond jQuery adapter via npm. Requires jQuery and FilePond core to be included separately.

```bash
npm install jquery-filepond --save
```

--------------------------------

### Install File Rename plugin via npm

Source: https://pqina.nl/filepond/docs/api/plugins/file-rename

Install the plugin package using npm.

```bash
npm i filepond-plugin-file-rename --save
```

--------------------------------

### Manual installation of File Encode plugin

Source: https://pqina.nl/filepond/docs/api/plugins/file-encode

Manually install the File Encode plugin by including the local script files and registering the plugin. The scripts should be placed before the closing </body> tag.

```html
<!-- add before </body> -->
<script src="filepond-plugin-file-encode.js"></script>
<script src="filepond.js"></script>

<script>
    // Register the plugin
    FilePond.registerPlugin(FilePondPluginFileEncode);

    // ... FilePond initialisation code here
</script>
```

--------------------------------

### FilePond.create with files property

Source: https://pqina.nl/filepond/docs/api/instance/properties

Shows how to create a FilePond instance with initial files using the `files` property. The examples demonstrate adding temporary server files, local server files, mock files, and files with metadata.

```APIDOC
## FilePond.create(files)

### Description
Creates a FilePond instance with an initial set of files. The `files` property accepts an array of file references, supporting local and remote URLs, DataURLs, Blobs, File objects, and server file references.

### Method
FilePond.create

### Parameters
#### files (Array) - Required
An array of file objects. Each object contains a `source` and an `options` object.

- **source** (string) - Required - The file reference, such as a server file ID or URL.
- **options.type** (string) - Optional - Set to 'limbo' for temporary server files or 'local' for already uploaded files.
- **options.file** (object) - Optional - Mock file information with `name`, `size`, and `type` properties.
- **options.metadata** (object) - Optional - Initial metadata for the file item.

### Request Example
```js
const pond = FilePond.create({
    files: [
        {
            source: '12345',
            options: {
                type: 'limbo',
            },
        },
    ],
});
```

### Response
Returns a FilePond instance. The instance has a `files` property containing the file items, and methods like `getFile()` to access file items and their metadata.

### Notes
- The `limbo` type directs the load request to the server API restore endpoint.
- The `local` type directs the load request to the server API load endpoint.
- Mocking file information prevents loading actual file data.
- Metadata can be accessed using `getMetadata` on the file item.
```

--------------------------------

### Install Image Size Validation plugin via npm

Source: https://pqina.nl/filepond/docs/api/plugins/image-validate-size

Use this command to install the plugin package into your project.

```bash
npm i filepond-plugin-image-validate-size --save
```

--------------------------------

### Install FilePond Angular adapter with npm

Source: https://pqina.nl/filepond/docs/getting-started/installation/angular

Install the FilePond Angular adapter and its dependency via npm. Use this command in your Angular project to add the required packages.

```bash
npm install filepond ngx-filepond --save
```

--------------------------------

### Register Image Transform plugin via manual installation

Source: https://pqina.nl/filepond/docs/api/plugins/image-transform

Include the local plugin script and register it before initializing FilePond.

```html
<!-- add before </body> -->
<script src="filepond-plugin-image-transform.js"></script>
<script src="filepond.js"></script>

<script>
    // Register the plugin
    FilePond.registerPlugin(FilePondPluginImageTransform);

    // ... FilePond initialisation code here
</script>
```

--------------------------------

### Install File Poster plugin manually

Source: https://pqina.nl/filepond/docs/api/plugins/file-poster

Add the FilePond and File Poster CSS and JS files manually, then register the plugin in a script tag.

```html
<!-- add to document <head> -->
<link href="filepond.css" rel="stylesheet" />
<link href="filepond-plugin-file-poster.css" rel="stylesheet" />

<!-- add before </body> -->
<script src="filepond-plugin-file-poster.js"></script>
<script src="filepond.js"></script>

<script>
    // Register the plugin
    FilePond.registerPlugin(FilePondPluginFilePoster);

    // ... FilePond initialisation code here
</script>
```

--------------------------------

### Install FilePond Svelte Component via npm

Source: https://pqina.nl/filepond/docs/getting-started/installation/svelte

Install the svelte-filepond adapter and the core FilePond package. Use the --save flag to add them to your project's dependencies.

```bash
npm install svelte-filepond filepond --save
```

--------------------------------

### Configure FilePond with instance properties

Source: https://pqina.nl/filepond/docs/getting-started/installation/svelte

Use FilePond instance properties as attributes on the <FilePond> component. This example sets allowMultiple to true, max-files to 3, and server to '/api'.

```svelte
<FilePond allowMultiple={true} max-files={3} server="/api" />
```

--------------------------------

### processFile(query)

Source: https://pqina.nl/filepond/docs/api/instance/methods

Starts processing the file matching the given query.

```APIDOC
## processFile(query)

### Description
Starts processing the file matching the given query.

### Method
processFile

### Parameters
- **query** (string|number|File) - Required - The query to identify the file to process.

### Response
No return value.
```

--------------------------------

### Register Image Size Validation plugin via manual installation

Source: https://pqina.nl/filepond/docs/api/plugins/image-validate-size

Include the local plugin script and register it before initializing FilePond.

```html
<!-- add before </body> -->
<script src="filepond-plugin-image-validate-size.js"></script>
<script src="filepond.js"></script>

<script>
    // Register the plugin
    FilePond.registerPlugin(FilePondPluginImageValidateSize);

    // ... FilePond initialisation code here
</script>
```

--------------------------------

### Supply initial metadata with metadata property

Source: https://pqina.nl/filepond/docs/api/instance/properties

Supply initial metadata to a loaded file using the `metadata` property. The example creates a `date` entry in the file item metadata, accessible via `getMetadata`.

```javascript
const pond = FilePond.create({
    files: [
        {
            // the server file reference
            source: '12345',

            // set type to local to indicate an already uploaded file
            options: {
                type: 'local',

                // file initial metadata
                metadata: {
                    date: '2018-10-5T12:00',
                },
            },
        },
    ],
});

// get the data of the first file
const date = pond.getFile().getMetadata('date');
```

--------------------------------

### Register File Rename plugin via manual installation

Source: https://pqina.nl/filepond/docs/api/plugins/file-rename

Include the local plugin script and register it before initializing FilePond.

```html
<!-- add before </body> -->
<script src="filepond-plugin-file-rename.js"></script>
<script src="filepond.js"></script>

<script>
    // Register the plugin
    FilePond.registerPlugin(FilePondPluginFileRename);

    // ... FilePond initialisation code here
</script>
```

--------------------------------

### FilePond.create with HTML fieldset

Source: https://pqina.nl/filepond/docs/api/instance/properties

Shows how to use HTML to provide initial files to FilePond for progressive enhancement. The example uses checkboxes with data-type attributes to represent already uploaded files.

```APIDOC
## FilePond.create(fieldsetElement)

### Description
Creates a FilePond instance from an HTML fieldset element, gathering initial files from checked checkboxes with `data-type` attributes. This allows file management even without JavaScript.

### Method
FilePond.create

### Parameters
#### element (HTMLElement) - Required
The fieldset element containing file inputs and checkboxes.

### Request Example
```html
<fieldset>
    <legend>Files</legend>
    <ul>
        <li>
            <label>
                <input value="foo.jpg" data-type="local" checked type="checkbox" />
                foo.jpeg
            </label>
        </li>
        <li>
            <label>
                <input value="bar.png" data-type="local" checked type="checkbox" />
                bar.png
            </label>
        </li>
    </ul>
    <input type="file" name="filepond" required multiple />
</fieldset>

<script>
    const fieldsetElement = document.querySelector('fieldset');
    const pond = FilePond.create(fieldsetElement);
    console.log(pond.files); // [{ source: 'foo.jpeg' }, { source: 'bar.png' }]
</script>
```

### Response
Returns a FilePond instance with `files` property containing the gathered file references.

### Notes
- The `data-type` attribute on checkboxes indicates the file type (e.g., 'local').
- Checked checkboxes are included as initial files.
- This approach works without JavaScript for basic file removal and addition.
```

--------------------------------

### Manually install Image Edit plugin

Source: https://pqina.nl/filepond/docs/api/plugins/image-edit

Manually include the Image Edit plugin and FilePond files, then register the plugin. Use this when not using a package manager or CDN.

```html
<!-- add to document <head> -->
<link href="filepond.css" rel="stylesheet" />
<link href="filepond-plugin-image-edit.css" rel="stylesheet" />

<!-- add before </body> -->
<script src="filepond-plugin-image-edit.js"></script>
<script src="filepond.js"></script>

<script>
    // Register the plugin
    FilePond.registerPlugin(FilePondPluginImageEdit);

    // ... FilePond initialisation code here
</script>
```

--------------------------------

### FilePond server configuration with all endpoints

Source: https://pqina.nl/filepond/docs/api/server

Enables full server functionality by supplying all endpoints: process, revert, restore, load, and fetch. FilePond appends the dropped URL to fetch and automatically adds the unique file id to restore and load. Note that restore, load, and fetch are GET requests, process is POST, and revert is DELETE.

```js
FilePond.setOptions({
    server: {
        process: './process',
        revert: './revert',
        restore: './restore/',
        load: './load/',
        fetch: './fetch/',
    },
});
```

--------------------------------

### Set default FilePond options with setOptions

Source: https://pqina.nl/filepond/docs/api/exports

Sets default options for all FilePond instances on the page. The example disables drop and replace, disables instant upload, and configures the server endpoints.

```js
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=',
    },
});
```

--------------------------------

### Register Image Preview plugin via CDN

Source: https://pqina.nl/filepond/docs/api/plugins/image-preview

Add the FilePond and plugin CSS and JavaScript files from unpkg, then register the plugin. Place the link tags in the document head and the script tags before the closing body tag.

```html
<!-- add to document <head> -->
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet" />
<link
    href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css"
    rel="stylesheet"
/>

<!-- add before </body> -->
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>

<script>
    // Register the plugin
    FilePond.registerPlugin(FilePondPluginImagePreview);

    // ... FilePond initialisation code here
</script>
```

--------------------------------

### Get all files with getFiles

Source: https://pqina.nl/filepond/docs/api/instance/methods

Retrieve all files currently in the list.

```js
// returns all files currently in the list
pond.getFiles();
```

--------------------------------

### processFiles([query])

Source: https://pqina.nl/filepond/docs/api/instance/methods

Starts processing all files or files matching the query.

```APIDOC
## processFiles([query])

### Description
Starts processing all files or files matching the query.

### Method
processFiles

### Parameters
- **query** (string|number|File) - Optional - The query to identify files to process. If omitted, all files are processed.

### Response
No return value.
```

--------------------------------

### Listen for FilePond events

Source: https://pqina.nl/filepond/docs/getting-started/installation/vue

Use v-on or the @ shorthand to listen for FilePond events.

```html
<!-- normal -->
<file-pond v-on:init="handleFilePondInit" />

<!-- shorthand -->
<file-pond @init="handleFilePondInit" />
```

--------------------------------

### Listen to FilePond init event

Source: https://pqina.nl/filepond/docs/getting-started/installation/react

Attach a callback to the oninit event to listen for when the pond initializes.

```jsx
<FilePond oninit={() => this.handleInit()} />
```

--------------------------------

### Register plugin with npm import

Source: https://pqina.nl/filepond/docs/api/plugins/file-validate-type

Import and register the File Validate Type plugin with FilePond after installing via npm.

```javascript
// Import FilePond
import * as FilePond from 'filepond';

// Import the plugin code
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';

// Register the plugin
FilePond.registerPlugin(FilePondPluginFileValidateType);
```

--------------------------------

### getFile

Source: https://pqina.nl/filepond/docs/api/instance/methods

Returns a file item from the file list. Can be called without parameters to get the first file, or with an id or index.

```APIDOC
## getFile

### Description
Returns a file item from the file list. Can be called without parameters to get the first file, or with an id or index.

### Method
getFile

### Parameters
- **id** (string) - Optional - The id of the file to retrieve.
- **index** (number) - Optional - The index of the file to retrieve.

### Returns
The file item.

### Example
```js
// returns the first file item
pond.getFile();

// returns the file item at index 1
pond.getFile(1);

// returns the file item with the given id
pond.getFile('imzsdvxar');
```
```

--------------------------------

### Get files with getFile

Source: https://pqina.nl/filepond/docs/api/instance/methods

Access a specific file item by id or index. If no parameter is provided, the first file is returned.

```js
// returns the first file item
pond.getFile();

// returns the file item at index 1
pond.getFile(1);

// returns the file item with the given id
pond.getFile('imzsdvxar');
```

--------------------------------

### Load Image Resize plugin via CDN

Source: https://pqina.nl/filepond/docs/api/plugins/image-resize

Include the plugin and FilePond scripts from unpkg, then register the plugin in a script tag.

```html
<!-- add before </body> -->
<script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>

<script>
    // Register the plugin
    FilePond.registerPlugin(FilePondPluginImageResize);

    // ... FilePond initialisation code here
</script>
```

--------------------------------

### Create a FilePond Instance

Source: https://pqina.nl/filepond/docs/getting-started/installation/javascript

Use the create method to transform a standard file input into a FilePond drop area.

```html
<link href="filepond.css" rel="stylesheet" />
<script src="filepond.js"></script>

<input type="file" />

<script>
    // Get a reference to the file input element
    const inputElement = document.querySelector('input[type="file"]');

    // Create a FilePond instance
    const pond = FilePond.create(inputElement);
</script>
```

--------------------------------

### Register plugin via CDN

Source: https://pqina.nl/filepond/docs/api/plugins/file-validate-type

Load the plugin and FilePond from unpkg CDN and register the plugin before initialising FilePond.

```html
<!-- add before </body> -->
<script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>

<script>
    // Register the plugin
    FilePond.registerPlugin(FilePondPluginFileValidateType);

    // ... FilePond initialisation code here
</script>
```

--------------------------------

### Failed browse call via nested timeout

Source: https://pqina.nl/filepond/docs/api/instance/methods

This example demonstrates that even if triggered by a button, a nested timeout prevents the browse method from executing.

```js
document.querySelector('button').addEventListener('click', () => {
    setTimeout(() => {
        pond.browse();
    }, 5000);
});
```

--------------------------------

### Adjust individual properties directly

Source: https://pqina.nl/filepond/docs/api/instance/methods

Instead of setOptions, you can adjust individual properties directly on the FilePond instance. The example sets maxFiles and required properties.

```javascript
const pond = FilePond.create();
pond.maxFiles = 10;
pond.required = true;
```

--------------------------------

### Instructions object passed to editor

Source: https://pqina.nl/filepond/docs/api/plugins/image-edit

Shows the structure of the `instructions` object passed to the editor's `open` method. It contains crop settings including center, flip, zoom, rotation, and aspectRatio (null means free).

```javascript
{
    crop: {

        // Center point of crop
        center: {
            x: .5,
            y: .5
        },

        // Has the image been flipped
        flip: {
            horizontal: false,
            vertical: false
        },

        // How far to zoom the image
        zoom: 1,

        // Rotation of image
        rotation: 0,

        // Aspect ratio of crop, `null` === free
        aspectRatio: null
    }
}
```

--------------------------------

### Show image preview with FilePond Image Preview plugin

Source: https://pqina.nl/filepond/docs/getting-started/examples/show-image-preview

Use the Image Preview plugin to show a preview of each dropped image. Import and register the plugin, then create a FilePond instance on a file input element.

```javascript
// @sandbox
import { create, registerPlugin } from 'filepond';
import 'filepond/dist/filepond.css';

// Import the Image Preview plugin
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';

// Register the plugin with FilePond
registerPlugin(FilePondPluginImagePreview);

// Get a file input reference
const input = document.querySelector('input[type="file"]');

// Create a FilePond instance
create(input);
```

--------------------------------

### Register File Metadata plugin with npm import

Source: https://pqina.nl/filepond/docs/api/plugins/file-metadata

Import and register the File Metadata plugin in a module-based project. Requires the npm package to be installed first.

```js
// Import FilePond
import * as FilePond from 'filepond';

// Import the plugin code
import FilePondPluginFileMetadata from 'filepond-plugin-file-metadata';

// Register the plugin
FilePond.registerPlugin(FilePondPluginFileMetadata);
```

--------------------------------

### Configure FilePond with instance properties

Source: https://pqina.nl/filepond/docs/getting-started/installation/react

Configure the FilePond component using instance properties as props. Here allowMultiple, maxFiles, and server are set.

```jsx
<FilePond allowMultiple={true} maxFiles={3} server="/api" />
```

--------------------------------

### Set options with setOptions method

Source: https://pqina.nl/filepond/docs/api/instance/methods

Use the setOptions method to override multiple options at once on a FilePond instance. The example sets maxFiles to 10 and required to true.

```javascript
const pond = FilePond.create();
pond.setOptions({
    maxFiles: 10,
    required: true,
});
```
Tokens:
Raw