Upload the image to a server

Using the store property on the createDefaultImageWriter function we can automatically upload images to a server or other location after processing.

By default the image will be posted as a form field with the name "dest".

import { openDefaultEditor, createDefaultImageWriter } from './doka.js';

// Open the default image editor in a modal
const editor = openDefaultEditor({
    src: './my-image.jpeg',

    // We'll overwrite the image writer so we can upload the image
    imageWriter: createDefaultImageWriter({
        // Here we instruct the editor to post the file object to the server
        store: './upload/',
    }),
});

// Show resulting image preview, log request to console
editor.on('process', ({ dest, store }) => {
    // show image preview
    const preview = new Image();
    preview.src = URL.createObjectURL(dest);
    document.body.appendChild(preview);

    // log store request
    console.log(store);
});

If we want to change the name of the field we can set the store property to an object.

createDefaultImageWriter({
    store: {
        // Where to post to
        url: './upload/',
        // Which fields to post
        dataset: (state) => [['imageFile', state.dest, state.dest.name]],
    },
});

The store property can also be set to a function in which case we gain full control over where and how to store the output image. An example of this can be found in store documentation entry.

To handle multiple images it's best to combine Doka Image Editor with a file upload library like FilePond, Dropzone, Uppy, or jQuery File Upload.

See the installation libraries page for a list of file upload library integration examples.