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
|
| Enable or disable the image editor plugin for this FilePond instance. |
imageEditorInstantEdit
|
| When true the editor will open immediately when an image is added to FilePond.
|
imageEditorAllowEdit
|
| Enable or disable editing images for this FilePond instance. |
imageEditorWriteImage
|
| Enable or disable image writing for this FilePond instance. If set to false no image is generated.
|
imageEditorIconEdit
|
| The icon used for the edit button. |
styleImageEditorButtonEditItemPosition
|
| The position of the edit button on the file item. |
imageEditor
|
| 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