This is the archived documentation for Doka Image Editor v7.

Please visit pqina.nl/pintura/docs/ to see documentation for the latest version of Pintura Image Editor.

Can the editor upload to Amazon S3?

Using a function as the value of the store property on the createDefaultImageWriter method we can customize the upload process and upload files to any third-party location.

<!-- Include AWS script, make sure to update the version -->
<script src="https://sdk.amazonaws.com/js/aws-sdk-<version>.min.js"></script>

<script type="module">
    import { openDefaultEditor, createDefaultImageWriter } from './doka.js';

    // Set up S3 connection
    const s3 = new AWS.S3({
        accessKeyId: 'access-key',
        secretAccessKey: 'secret-access-key',
        region: 'eu-central-1',
    });

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

        // Set a custom image writer
        imageWriter: createDefaultImageWriter({
            store: (state, options, onprogress) =>
                new Promise((resolve, reject) => {
                    // Get file object reference
                    const { dest } = state;

                    // Upload to S3
                    const httpUpload = s3.upload(
                        {
                            Bucket: 'my-bucket-name',
                            Key: Date.now() + '_' + dest.name,
                            Body: dest,
                            ContentType: dest.type,
                            ACL: 'public-read',
                        },
                        (err, data) => {
                            // Test if returned error, if so, throw error in UI
                            if (err) return reject('Something went wrong.');

                            // Remember key (store is returned in editor 'process' event)
                            state.store = data.Key;

                            // Resolve with updated state
                            resolve(state);
                        }
                    );

                    // Show S3 upload progress in UI
                    httpUpload.on('httpUploadProgress', onprogress);
                }),
        }),
    });
</script>