### 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>
```

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

### 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();
```

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

### 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>
```

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

### 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.
```

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

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

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

### 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');
```

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

### React Hooks FilePond with Image Preview and EXIF Orientation

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

Use this React component to integrate FilePond with hooks. It registers the Image EXIF Orientation and Image Preview plugins, which must be installed separately with `npm i filepond-plugin-image-preview filepond-plugin-image-exif-orientation --save`. The FilePond instance is configured with `allowMultiple={true}`, `maxFiles={3}`, `server="/api"`, and `name="files"`.

```jsx
// @sandbox
import React, { useState } from 'react';
import ReactDOM from 'react-dom';

// Import React FilePond
import { FilePond, registerPlugin } from 'react-filepond';

// Import FilePond styles
import 'filepond/dist/filepond.min.css';

// 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';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';

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

// Our app
function App() {
    const [files, setFiles] = useState([]);
    return (
        <div className="App">
            <FilePond
                files={files}
                onupdatefiles={setFiles}
                allowMultiple={true}
                maxFiles={3}
                server="/api"
                name="files"
                labelIdle='Drag & Drop your files or <span class="filepond--label-action">Browse</span>'
            />
        </div>
    );
}

// Attach App to DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);
```

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

### 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;
```

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

### 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,
});
```

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

### Enhance an HTML input element with FilePond.create

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

Turns an existing `<input type="file">` element into a FilePond instance. Attributes like `name`, `data-max-files`, and `required` are automatically mapped to options (e.g., `data-max-files` becomes `maxFiles`). The example logs the resulting option values.

```html
<input type="file" name="filepond" data-max-files="10" required />

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

    // create a FilePond instance at the input element location
    const pond = FilePond.create(inputElement);

    // attributes have been set to pond options
    console.log(pond.name); // 'filepond'
    console.log(pond.maxFiles); // 10
    console.log(pond.required); // true
</script>
```

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

### Pass additional options object to FilePond.create

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

Creates a FilePond instance from an input element while also passing an options object. The options object overrides or adds to the attributes (e.g., `maxFiles: 10`, `allowBrowse: false`). The example logs the resulting option values, including `allowMultiple` from the `multiple` attribute.

```html
<input type="file" name="filepond" required multiple />

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

    // create a FilePond instance at the input element location
    const pond = FilePond.create(inputElement, {
        maxFiles: 10,
        allowBrowse: false,
    });

    // attributes and initial options have been set to pond options
    console.log(pond.name); // 'filepond'
    console.log(pond.maxFiles); // 10
    console.log(pond.required); // true
    console.log(pond.allowMultiple); // true
</script>
```

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

### Handle addFile promise

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

The addFile method returns a promise, which is useful when loading remote files. The example shows using then and catch to handle success and error cases.

```javascript
pond.addFile('./my-file.jpg')
    .then((file) => {
        // File has been added
    })
    .catch((error) => {
        // Something went wrong
    });
```

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

### 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);
```

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

### React FilePond component with image plugins and server upload

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

Complete React component that integrates FilePond with image EXIF orientation and preview plugins. It sets an initial local file, configures multiple uploads with a server endpoint, and updates component state with the selected files. Requires installing react-filepond, filepond, and the two plugins separately.

```jsx
// @sandbox
// Import React
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

// Import React FilePond
import { FilePond, registerPlugin } from 'react-filepond';

// Import FilePond styles
import 'filepond/dist/filepond.min.css';

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

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

// Our app
class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            // Set initial files, type 'local' means this is a file
            // that has already been uploaded to the server (see docs)
            files: [
                {
                    source: 'index.html',
                    options: {
                        type: 'local',
                    },
                },
            ],
        };
    }

    handleInit() {
        console.log('FilePond instance has initialised', this.pond);
    }

    render() {
        return (
            <div className="App">
                {/* Pass FilePond properties as attributes */}
                <FilePond
                    ref={(ref) => (this.pond = ref)}
                    files={this.state.files}
                    allowMultiple={true}
                    maxFiles={3}
                    server="/api"
                    oninit={() => this.handleInit()}
                    onupdatefiles={(fileItems) => {
                        // Set current file objects to this.state
                        this.setState({
                            files: fileItems.map((fileItem) => fileItem.file),
                        });
                    }}
                ></FilePond>
            </div>
        );
    }
}

// Attach App to DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);
```

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

### 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>
```

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

### 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');
```
```

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

### 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>
```

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

### 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
    }
}
```

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

### 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);
});
```

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

### 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);
```

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

### 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" />
```

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

### Import and register Image Resize plugin with npm

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

Import FilePond and the plugin, then register the plugin with FilePond.registerPlugin.

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

// Import the plugin code
import FilePondPluginImageResize from 'filepond-plugin-image-resize';

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

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

### Add files with addFile and addFiles

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

Use addFile to add a single file and addFiles to add multiple files. Both accept local/remote URLs, DataURLs, Blobs, or File objects. The addFiles method also accepts an array of file references.

```javascript
// Adding a single file
pond.addFile('./my-file.jpg');

// Adding multiple files
pond.addFiles('./my-file.jpg', './my-documents.zip');

// It also accepts arrays
pond.addFiles(['./my-file.jpg', './my-documents.zip']);
```

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

### Destroy FilePond instance by element reference

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

Destroys a FilePond instance, resetting the HTML to its original state. The example shows creating an instance from an input element and then destroying it by element reference.

```html
<intput type="file" name="filepond" required multiple>
    <script>
        const inputElement = document.querySelector('input[type="file"]');

        // create the FilePond instance
        FilePond.create(inputElement);

        // destroy the FilePond instance by element reference
        FilePond.destroy(inputElement);
    </script></intput
>
```

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

### Import FilePondModule and register plugin in app.module.ts

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

Import the FilePondModule and register the file type validation plugin in your Angular module. Note that plugins are not automatically installed; you must import and register them manually.

```js
// @copy
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

// import filepond module
import { FilePondModule, registerPlugin } from 'ngx-filepond';

// import and register filepond file type validation plugin
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
registerPlugin(FilePondPluginFileValidateType);

@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        FilePondModule, // add filepond module here
    ],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}
```

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

### Register plugin manually

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

Load the plugin and FilePond from local script files and register the plugin before initialising FilePond.

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

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

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

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

### Register Image Preview plugin with npm import

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

Import FilePond, the plugin code, and plugin styles, then register the plugin. Requires a module bundler like Webpack; otherwise, the CSS must be embedded manually.

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

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

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

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

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

### Add files with option object for index

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

The last argument of addFile and addFiles can be an option object to determine the index in the items list where the file(s) should be added. The example shows adding a single file, multiple files, and an array of files with an index option.

```javascript
// Adding a single file with option object
pond.addFile('./my-file.jpg', { index: 0 });

// Adding multiple files with option object
pond.addFiles('./my-file.jpg', './my-documents.zip', { index: 0 });

// Supplying files as an array with option object
pond.addFiles(['./my-file.jpg', './my-documents.zip'], { index: 0 });
```

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

### FilePond server configuration for upload-only

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

Configures FilePond for asynchronous uploading only, pointing the process endpoint to './process' and disabling fetch and revert. This setup prevents reverting uploads and fetching remote files, and also disables restoring or loading previously uploaded files.

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

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

### Set server property to a URL for async upload

Source: https://pqina.nl/filepond/docs/getting-started/examples/async-upload

Use the `server` property set to a URL string to POST files to that endpoint. The example posts to `/upload` on the same server. FilePond also sends optional file metadata as a JSON string using the same field name.

```js
// @copy
import { parse } from 'filepond';
import 'filepond/dist/filepond.css';

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

// Create a FilePond instance and post files to /upload
create(input, {
    server: '/upload',
});
```

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

### Load filepond-plugin-image-filter from CDN

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

Load the Image Filter plugin and FilePond from a CDN, then register the plugin before initialising FilePond.

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

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

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

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

### File Encode plugin output JSON object

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

Example of the JSON object that the File Encode plugin stores in a hidden input field. It includes the file id, name, type, size, metadata (e.g., resize and crop settings), and the base64-encoded data string.

```js
{
    "id": "b56kpu6u9",
    "name": "encoded-file.png",
    "type": "image/png",
    "size": 123456,
    "metadata": {
        "resize": {
            "mode": "force",
            "size": {
                "width": 200,
                "height": 200
            }
        },
        "crop": {
            "rect": {
                "x": 0.19234,
                "y": 0,
                "width": 1,
                "height": 0.61213
            },
            "aspectRatio": 1
        }
    },
    "data": "iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAA..."
}
```

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

### browse()

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

Opens the browse file dialog. Note: this only works if the user initiated the callstack that ends up calling the `browse` method.

```APIDOC
## browse()

### Description
Opens the browse file dialog. Note: this only works if the user initiated the callstack that ends up calling the `browse` method.

### Method
browse

### Parameters
None.

### Response
No return value.
```

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

### Integrate Doka.js with FilePond image edit plugin

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

Configure FilePond with the image edit plugin and Doka.js as the editor. Requires the image preview plugin to be registered. Sets a default crop aspect ratio, resizes images to width 200, opens the editor instantly on image drop, and provides crop aspect ratio options for Free, Portrait, Square, and Landscape.

```js
// Please note that for the image edit plugin to function
// we also need to register the image preview plugin.

FilePond.create(document.querySelector('input'), {
    // default crop aspect ratio
    imageCropAspectRatio: 1,

    // resize to width of 200
    imageResizeTargetWidth: 200,

    // open editor on image drop
    imageEditInstantEdit: true,

    // configure Doka
    imageEditEditor: Doka.create({
        // Doka.js options here ...

        cropAspectRatioOptions: [
            {
                label: 'Free',
                value: null,
            },
            {
                label: 'Portrait',
                value: 1.25,
            },
            {
                label: 'Square',
                value: 1,
            },
            {
                label: 'Landscape',
                value: 0.75,
            },
        ],
    }),
});
```

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

### addFiles(source [, options])

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

Adds multiple files to the FilePond instance. Accepts multiple file references or an array of file references. Returns a Promise.

```APIDOC
## addFiles(source [, options])

### Description
Adds multiple files to the FilePond instance. Accepts multiple file references or an array of file references. Returns a Promise.

### Method
addFiles

### Parameters
- **source** (string|Blob|File|Array) - Required - One or more file references, or an array of file references.
- **options** (object) - Optional - An option object to determine the index in the items list where the files should be added.

### Request Example
```js
// Adding multiple files
pond.addFiles('./my-file.jpg', './my-documents.zip');

// It also accepts arrays
pond.addFiles(['./my-file.jpg', './my-documents.zip']);

// Adding multiple files with option object
pond.addFiles('./my-file.jpg', './my-documents.zip', { index: 0 });

// Supplying files as an array with option object
pond.addFiles(['./my-file.jpg', './my-documents.zip'], { index: 0 });
```

### Response
Returns a Promise.
```