Setting up Doka Image Editor with Dropzone

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

To set up the editor with Dropzone we use the useEditorWithDropzone plugin which is included in the product package.

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

<!DOCTYPE html>

<!-- Dropzone styles -->
<link rel="stylesheet" href="https://unpkg.com/dropzone/dist/dropzone.css" />

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

<!-- Dropzone field -->
<div class="dropzone" id="dokaDropzone"></div>

<!-- Dropzone scripts -->
<script src="https://unpkg.com/dropzone"></script>

<!-- Doka image editor plugin -->
<script src="./useEditorWithDropzone-iife.js"></script>

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

        // The plugins we want to use
        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);

    // Create a Dropzone
    Dropzone.options.dokaDropzone = useEditorWithDropzone(
        // Method to create Doka Image Editor
        openEditor,

        // Doka Image Editor editor options
        {
            imageReader: createDefaultImageReader(),
            imageWriter: createDefaultImageWriter(),
            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,
            },
        },

        // Dropzone options
        {
            url: '/post',
            addRemoveLinks: true,
        }
    );
</script>

Next step

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