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

Search

Setting up Doka Image Editor with jQuery File Upload

Next step