Setting up Doka Image Editor with jQuery File Upload

For a quick start use the jQuery File Upload example project included in the product package as a guideline.

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

<!DOCTYPE html>

<!-- jQuery File Upload styles -->
<link
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    rel="stylesheet"
/>
<link href="jquery.fileupload.css" rel="stylesheet" />
<link href="jquery.fileupload-ui.css" rel="stylesheet" />

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

<!-- 

jQuery File Upload HTML snippet

Copy paste HTML snippet from this demo:
https://blueimp.github.io/jQuery-File-Upload/

-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.ui.widget.js"></script>

<script src="https://blueimp.github.io/JavaScript-Templates/js/tmpl.min.js"></script>
<script src="https://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<script src="https://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>

<script src="jquery.fileupload.js"></script>
<script src="jquery.fileupload-process.js"></script>
<script src="jquery.fileupload-image.js"></script>
<script src="jquery.fileupload-audio.js"></script>
<script src="jquery.fileupload-video.js"></script>
<script src="jquery.fileupload-validate.js"></script>
<script src="jquery.fileupload-ui.js"></script>

<!-- Uppy field -->
<div id="drag-drop-area"></div>

<!-- Uppy scripts -->
<script src="https://transloadit.edgly.net/releases/uppy/v1.8.0/uppy.min.js"></script>

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

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

        // The method used to register the plugins
        setPlugins,

        // 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';

    setPlugins(plugin_crop);

    $(function () {
        'use strict';

        // Create jQuery File Upload
        $('#fileupload').fileupload({
            url: 'server/php/',

            // When editing a file use Doka Image Editor
            edit: function (file) {
                return new Promise((resolve, reject) => {
                    const editor = openEditor({
                        src: file,
                        imageReader: createDefaultImageReader(),
                        imageReader: createDefaultImageWriter(),

                        // 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,
                        },
                    });

                    editor.on('process', ({ dest }) => {
                        resolve(dest);
                    });

                    editor.on('close', () => {
                        resolve(file);
                    });
                });
            },
        });
    });
</script>

Next step

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