# Setting up Pintura Image Editor with Dropzone

For a quick start use the [Dropzone example project](https://github.com/pqina/pintura-example-dropzone) as a guideline.

To set up the editor with Dropzone we use the `useEditorWithDropzone` plugin which is included in the product package.

Before continuing it's highly recommended to read the [JavaScript](../javascript/) installation guide as it clarifies important internal functionality of the image editor.

## Default implementation example

In the default example below we'll use the [openDefaultEditor](../../api/ui/exports/#editor) method to quickly create an image editor.

This creates a "default" editor that has all available plugins loaded and comes preset with all plugin default options and English locale. Each of these settings can be adjusted freely.

```html
<!DOCTYPE html>

<!-- Dropzone styles -->
<link rel="stylesheet" href="https://unpkg.com/dropzone/dist/dropzone.css" />

<!-- Pintura Image Editor styles -->
<link rel="stylesheet" href="./pintura/pintura.css" />

<!-- Dropzone field -->
<div class="dropzone" id="pinturaDropzone"></div>

<!-- Dropzone scripts -->
<script src="https://unpkg.com/dropzone"></script>

<!-- Pintura Image Editor plugin -->
<script src="./useEditorWithDropzone-iife.js"></script>

<script type="module">
    // import Pintura Image Editor functionality
    import { openDefaultEditor } from './pintura/pintura.js';

    // Create a Dropzone
    Dropzone.options.pinturaDropzone = useEditorWithDropzone(
        // Method used to create the editor
        openDefaultEditor,

        // The editor options
        {
            imageCropAspectRatio: 1,
        },

        // Dropzone options
        {
            url: '/post',
            addRemoveLinks: true,
        }
    );
</script>
```

## Advanced implementation example

In this example we'll create a custom editor, using a custom set of plugins, locale, and available options.

While this example is a lot more verbose it does allow us to create a more optimal editor package. The build process will tree-shake unused functionality resulting in a smaller build target.

```html
<!DOCTYPE html>

<!-- Dropzone styles -->
<link rel="stylesheet" href="https://unpkg.com/dropzone/dist/dropzone.css" />

<!-- Pintura Image Editor styles -->
<link rel="stylesheet" href="./pintura/pintura.css" />

<!-- Dropzone field -->
<div class="dropzone" id="pinturaDropzone"></div>

<!-- Dropzone scripts -->
<script src="https://unpkg.com/dropzone"></script>

<!-- Pintura Image Editor plugin -->
<script src="./useEditorWithDropzone-iife.js"></script>

<script type="module">
    // import Pintura Image Editor modules
    import {
        // Image editor
        openEditor,
        createDefaultImageReader,
        createDefaultImageWriter,
        createDefaultImageOrienter,

        // 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 and the shape preprocessor
        markup_editor_locale_en_gb,
        createDefaultShapePreprocessor,

        // Import the default properties
        markup_editor_defaults,
        plugin_finetune_defaults,
    } from './pintura/pintura.js';

    // This registers the plugins with Pintura Image Editor
    setPlugins(plugin_crop, plugin_finetune, plugin_annotate);

    // Create a Dropzone
    Dropzone.options.pinturaDropzone = useEditorWithDropzone(
        // Method to create Pintura Image Editor
        openEditor,

        // Pintura Image Editor editor options
        {
            imageReader: createDefaultImageReader(),
            imageWriter: createDefaultImageWriter(),
            imageOrienter: createDefaultImageOrienter(),

            // Set Markup Editor defaults
            ...markup_editor_defaults,

            // Set Finetune plugin defaults
            ...plugin_finetune_defaults,

            // This handles complex shapes like arrows / frames
            shapePreprocessor: createDefaultShapePreprocessor(),

            // This will set a square crop aspect ratio
            imageCropAspectRatio: 1,

            // 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,
            },
        },

        // Dropzone options
        {
            url: '/post',
            addRemoveLinks: true,
        }
    );
</script>
```

## Next steps

With the editor set up, we can continue to configure the editor to our liking by adjusting the available options exposed by [the editor API](../../api/image-editor/)