# Setting up Pintura Image Editor with jQuery File Upload

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

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>

<!-- 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" />

<!-- Pintura Image Editor styles -->
<link rel="stylesheet" href="./pintura/pintura.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>

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

    $(function () {
        'use strict';

        // Create jQuery File Upload
        $('#fileupload').fileupload({
            url: 'server/php/',

            // When editing a file use Pintura Image Editor
            edit: function (file) {
                return new Promise((resolve, reject) => {
                    const editor = openDefaultEditor({
                        src: file,
                        imageCropAspectRatio: 1,
                    });

                    editor.on('process', ({ dest }) => {
                        resolve(dest);
                    });

                    editor.on('close', () => {
                        resolve(file);
                    });
                });
            },
        });
    });
</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>

<!-- 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" />

<!-- Pintura Image Editor styles -->
<link rel="stylesheet" href="./pintura/pintura.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>

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

<script type="module">
    // import Pintura 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 and the shape preprocessor
        markup_editor_locale_en_gb,
        createDefaultShapePreprocessor,

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

    setPlugins(plugin_crop, plugin_finetune, plugin_annotate);

    $(function () {
        'use strict';

        // Create jQuery File Upload
        $('#fileupload').fileupload({
            url: 'server/php/',

            // When editing a file use Pintura Image Editor
            edit: function (file) {
                return new Promise((resolve, reject) => {
                    const editor = openEditor({
                        src: file,
                        imageReader: createDefaultImageReader(),
                        imageWriter: createDefaultImageWriter(),

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

                    editor.on('process', ({ dest }) => {
                        resolve(dest);
                    });

                    editor.on('close', () => {
                        resolve(file);
                    });
                });
            },
        });
    });
</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/)