v8.38.0

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".

<!DOCTYPE html>

<link rel="stylesheet" href="./pintura.css" />

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        imageWriter: {
            // We instruct the editor to post the file object to the server
            store: './upload/',
        },
    });
</script>

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

<!DOCTYPE html>

<link rel="stylesheet" href="./pintura.css" />

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        imageWriter: {
            store: {
                // Where to post the files to
                url: './upload/',

                // Which fields to post
                dataset: (state) => [
                    ['imageFile', state.dest, state.dest.name],
                ],
            },
        },
    });
</script>

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 Pintura 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.