Used to create a custom transform extension, expects a CreateTransformExtensionOptions object.

Example

Below we use the createTransformExtension function to create an extension that transform HEIC/HEIF images to JPEG.

To further improve the media uploading experience we can combine this extension with the MediaResolutionValidator and ImageBitmapTransform extensions. 

import { defineFilePond, createTransformExtension } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';
import { createFilePondEntryList, appendEntryImageView } from 'filepond/templates/index.js';
import { blobToFile, getFilenameWithoutExtension } from 'filepond/utils';
import { ConsoleView } from 'filepond/extensions/console-view.js';

// Heic/Heif transform
const HeicTransform = createTransformExtension({
    name: 'HeicTransform',
    props: {
        // this is not optional (if we can we should)
        shouldTransform: () => true,
    },
    factory: () => ({
        // Cheap way to test if this is a heic/heif image
        canTransformEntry: (entry) => {
            /(?:heic|heif)$/.test(entry.type) || /\.(?:heic|heif)$/.test(entry.name);
        },

        // Convert heic/heif to jpeg
        transformEntry: async (entry, { onprogress, abortController }) => {
            const { heicTo } = await import('https://cdn.jsdelivr.net/npm/heic-to@1.5.2/+esm');

            const blob = await heicTo({
                blob: entry.file,
                type: 'image/jpeg',
                quality: 0.5,
            });

            return {
                file: blobToFile(blob, `${getFilenameWithoutExtension(entry.name)}.jpg`),
            };
        },
    }),
});

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

// Now we can use `HeicTransform` like this
const elements = defineFilePond({
    locale,

    // Load extensions
    extensions: [HeicTransform, ConsoleView],

    // Pass custom template to EntryListView
    EntryListView: {
        template,
    },
});