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