♥

Combine FilePond with Pintura and create the perfect image edit and upload experience.

Learn more about Pintura

File metadata

The File Metadata plugin makes it possible to add initial metadata to file objects without using the file item setMetadata method.

Add metadata by setting a generic fileMetadataObject to the FilePond object or pass custom properties by using data attributes.

Installation

Using npm

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

Now we can add the File Metadata plugin to our project like this.

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

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

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

Using a CDN

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

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

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

Manual installation

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

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

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

Usage

This example adds a custom metadata object to each file.

FilePond.setOptions({
    fileMetadataObject: {
        hello: 'world',
    },
});

Here we can see how to pass the same values using data attributes. Use the file-metadata- prefix, then add the property name.

<input type="file" name="filepond" data-file-metadata-hello="world" />

Properties

true

null