Setting up Doka Image Editor with FilePond

For a quick start use the FilePond example project included in the product package as a guideline.

To set up the editor with FilePond we need to use the FilePondPluginImageEditor plugin which is included in the product package.

This plugin is different from the FilePondPluginImageEdit plugin that is described in the FilePond documentation.

When using Doka Image Editor with FilePond the following plugins are no longer needed and thus have to be removed:

FilePondPluginImageExifOrientation
FilePondPluginImageTransform
FilePondPluginImageCrop
FilePondPluginImageFilter
FilePondPluginImagePreview
FilePondPluginImageResize
FilePondPluginImageEdit

We can use the FilePondPluginFilePoster plugin to show a preview of the image and the FilePondPluginFileValidateType plugin to only allow images.

Before continuing it's highly recommended to read the JavaScript installation guide as it clarifies important internal functionality of the image editor.

If we're using FilePond with a framework like React, Vue, Angular, or Svelte we don't need the framework specific image editor components, we can use the JavaScript version instead.

FilePondPluginImageEditor properties

The FilePondPluginImageEditor plugin adds the following properties to FilePond.

Some of the properties below look similar to the FilePondPluginImageEdit plugin. Doka Image Editor v7 won't work in combination with the old plugin. Please remove the old plugin and replace it with FilePondPluginImageEditor.

Property	Default value	Description
`allowImageEditor`	`true`	Enable or disable the image editor plugin for this FilePond instance.
`imageEditorInstantEdit`	`false`	When `true` the editor will open immediately when an image is added to FilePond.
`imageEditorAllowEdit`	`true`	Enable or disable editing images for this FilePond instance.
`imageEditorWriteImage`	`true`	Enable or disable image writing for this FilePond instance. If set to `false` no image is generated.
`imageEditorIconEdit`	`'<svg>'`	The icon used for the edit button.
`styleImageEditorButtonEditItemPosition`	`'bottom center'`	The position of the edit button on the file item.
`imageEditor`	`null`	The image editor configuration to use.

imageEditor

This property takes an image editor configuration object.

Property	Description
`legacyDataToImageState`	Set to `legacyDataToImageState` function to automatically map legacy Doka Image Editor v6 objects to Doka Image Editor v7 imageState objects.
`createEditor`	Called by the ImageEditor plugin to open the image editor. Receives editor configuration, should return an editor instance.
`imageReader`	Set to an array with two indexes. First index takes the `imageReader` configuration and the second index takes the optional imageReader options object.
`imageWriter`	Set to an array with two indexes. First index takes the `imageWriter` configuration and the second index takes the optional imageWriter options object.
`imageProcessor`	Used to generate poster images, runs an editor in the background, should be set to `processImage`, can be omitted if no image preview is required.
`editorOptions`	Options to pass to the editor. For example the default `imageCropAspectRatio` and the `locale` object.

<!DOCTYPE html>

<!-- FilePond styles -->
<link href="./filepond/filepond.css" rel="stylesheet" type="text/css" />
<link
    href="./filepond/filepond-plugin-file-poster.css"
    rel="stylesheet"
    type="text/css"
/>

<!-- Doka Image Editor styles -->
<link href="./doka/doka.css" rel="stylesheet" />

<!-- File upload field -->
<input type="file" multiple />

<!-- FilePond scripts -->
<script src="./filepond/filepond.js"></script>
<script src="./filepond/filepond-plugin-file-poster.js"></script>
<script src="./filepond/filepond-plugin-file-validate-type.js"></script>

<!-- FilePond image editor plugin -->
<script src="./filepond-plugin-image-editor/FilePondPluginImageEditor.js"></script>

<script type="module">
    // import Doka Image Editor modules
    import {
        // Image editor
        openEditor,
        processImage,
        createDefaultImageReader,
        createDefaultImageWriter,
        createDeafultImageOrienter,

        // Only needed if loading legacy image editor data
        legacyDataToImageState,

        // Import image editor plugins (only crop for this demo)
        setPlugins,
        plugin_crop,
        plugin_finetune,
        plugin_annotate,

        // The main UI and plugin locale objects
        locale_en_gb,
        plugin_crop_locale_en_gb,
        plugin_finetune_locale_en_gb,
        plugin_annotate_locale_en_gb,

        // Because we use the annotate plugin we also need
        // to import the markup editor locale
        markup_editor_locale_en_gb,

        // Import the default properties
        markup_editor_defaults,
        plugin_finetune_defaults,
    } from './doka/doka.js';

    // This registers the plugins with Doka Image Editor
    setPlugins(plugin_crop, plugin_finetune, plugin_annotate);

    FilePond.registerPlugin(
        FilePondPluginFileValidateType,
        FilePondPluginImageEditor,
        FilePondPluginFilePoster
    );

    var pond = FilePond.create(document.querySelector('input'), {
        filePosterMaxHeight: 256,
        imageEditor: {
            // Optional. Maps legacy data objects to new imageState objects
            legacyDataToImageState: legacyDataToImageState,

            // Required. Used to create the editor
            createEditor: openEditor,

            // Required. Used for reading the image data.
            // See JavaScript installation for details on
            // the `imageReader` property
            imageReader: [
                createDefaultImageReader,
                {
                    // createDefaultImageReader options here
                },
            ],

            // Optional. Can leave out when not generating a
            // preview thumbnail and/or output image
            imageWriter: [
                createDefaultImageWriter,
                {
                    // createDefaultImageWriter options here
                },
            ],

            // Optional. Used to generate poster images,
            // runs an invisible "headless" editor instance.
            imageProcessor: processImage,

            // Doka Image Editor options
            editorOptions: {
                // Orients image data so it's shown correctly in older browsers
                imageOrienter: createDeafultImageOrienter(),

                // Set Markup Editor defaults
                ...markup_editor_defaults,

                // Set Finetune plugin defaults
                ...plugin_finetune_defaults,

                // Set locale
                locale: {
                    ...locale_en_gb,
                    ...plugin_crop_locale_en_gb,
                    ...plugin_finetune_locale_en_gb,
                    ...plugin_annotate_locale_en_gb,
                    ...markup_editor_locale_en_gb,
                },
            },
        },
    });
</script>

Next step

With the editor set up, we can continue to configure the editor to our liking with the available instance properties

Search

Setting up Doka Image Editor with FilePond

FilePondPluginImageEditor properties

imageEditor

Next step