About media optimisation and editing using the PinturaTransform and/or ImageBitmapTransform extensions.

Block low resolution images

We can use the MediaResolutionValidator to block low quality media from being uploaded.

Automatic image optimisation

The ImageBitmapTransform extension allows us to automatically orient, crop, resize, convert, and compress images.

Image and video editing with Pintura

Using the external PinturaTransform package we can easily integrate Pintura with FilePond.

First we have to install the package.

$ npm install filepond-extension-pintura-transform
 
$ pnpm add filepond-extension-pintura-transform
 
$ yarn add filepond-extension-pintura-transform

Then we import the PinturaTransform extension and set it up like shown below. 

// Import FilePond
import { defineFilePond } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';
import { createFilePondEntryList, appendEntryImageView } from 'filepond/templates/index.js';

// Import the PinturaTransform extension
import { PinturaTransform } from 'filepond-extension-pintura-transform';

// Use Pintura from CDN
const PinturaPackageURL = 'https://unpkg.com/@pqina/pintura@8';
const styles = `${PinturaPackageURL}/pintura.css`;
const scripts = `${PinturaPackageURL}/pintura.js`;

// Add image view to default template
const template = createFilePondEntryList();
appendEntryImageView(template);

// Define the FilePond custom element and configure Pintura
defineFilePond({
    locale,

    // Add and configure PinturaTransform extension
    extensions: [
        [
            PinturaTransform,
            {
                // This hook preloads the Pintura styles, scripts, and optionally other resources when the user interacts with the edit button
                prepare: async () => {
                    await adoptStyles(styles);
                    await import(scripts);
                },
                // This hook receives the source file and expects a `PinturaInstance` or `File` in return
                transform: async (src) => {
                    const { openDefaultEditor } = await import(scripts);
                    return openDefaultEditor({ src });
                },
            },
        ],
    ],

    // Pass image preview template to EntryListView
    EntryListView: {
        template,
    },
});

// This function helps us load style sources asynchronously
async function adoptStyles(src) {
    if (adoptedStyles.has(src)) {
        return;
    }

    const css = await fetch(src).then((r) => r.text());
    adoptedStyles.add(src);
    const sheet = new CSSStyleSheet();
    await sheet.replace(css);
    document.adoptedStyleSheets.push(sheet);
}

const adoptedStyles = new Set();