Edit Images Before Uploading Them To Your WordPress Media Library

In this short tutorial we’ll use a custom <pintura-input> element to add image editing and uploading to any WordPress website front-end.

Let’s take a look below at what we’re building. Select a file to start editing, click done and the file will be uploaded. The image edit functionality and custom field are provided by Pintura Image Editor.

For privacy reasons the file upload in this demo is simulated.

Let’s get started!

To help our visitors edit and upload images we need to make three small changes to our website.

1. Load the pintura, and pintura-input styles and scripts.
2. Copy a PHP script to handle the upload to the media library.
3. Add the pintura-input element to the page we want to upload from.

We’ll go over them step by step.

#1 Loading the pintura, and pintura-input styles and scripts

First we download the files, we need to download Pintura and download the Pintura Input component files.

Let’s navigate to our themes functions.php file. We can find it in the admin menu by clicking Appearance -> Theme Editor -> Theme Functions.

Alternatively we can open the theme folder and find the functions.php file using an FTP client.

We’ll start by adding the following two lines to the functions.php file of the theme. This will load the editor styles and scripts. We can add the snippet to the top of the file.

Note that this setup assumes that:

• pintura.css and pintura-iife.js are located in theme-folder-name/pintura/
• pinturainput-iife.js is located in theme-folder-name/pintura-input/

// This function will load the pintura scripts
function pintura_enqueue() {

    // This loads the Pintura styles
    wp_enqueue_style(
        'pintura-input-style',
        get_template_directory_uri() . '/pintura/pintura.css',
        array(), false
    );

    // This loads the Pintura scripts
    wp_enqueue_script(
        'pintura-input-script',
        get_template_directory_uri() . '/pintura/pintura-iife.js',
        array(), false, true
    );

    // This loads the Pintura Input custom element
    wp_enqueue_script(
        'pintura-input-script',
        get_template_directory_uri() . '/pintura-input/pinturainput-iife.js',
        array(), false, true
    );
}

// This action will call the Pintura script loader on the front-end
add_action('wp_enqueue_scripts', 'pintura_enqueue')

We’ll need to make some more changes to the functions.php file in the next step.

#2 Set up the PHP script that handles the image upload

Copy the PHP snippet below and paste it just below the code we added in step 1.

This code will handle the image upload and move uploaded images to the WordPress media library.

Note that in this example "my_field" is the name of the file input field being handled, we’ll use it again in step #3. If your field is named differently, or you want to use a different name, make sure to change it everywhere.

add_action( 'wp_ajax_image_upload', 'handle_input_image' );
add_action( 'wp_ajax_nopriv_image_upload', 'handle_input_image' );

function handle_input_image() {

    // Allow this image to be uploaded?
    if (!wp_verify_nonce( $_POST['nonce'], 'my_field' )) {

        // Log error message to console so we know what's up
        echo 'Image upload not allowed';

        // Respond with a 403 forbidden error
        http_response_code(403);
        die();
    }

    // These files need to be included to upload the image
    require_once(ABSPATH . 'wp-admin/includes/image.php');
    require_once(ABSPATH . 'wp-admin/includes/file.php');
    require_once(ABSPATH . 'wp-admin/includes/media.php');

    // Let WordPress handle the upload
    $image_id = media_handle_upload( 'my_field', 0 );

    // Test if upload succeeded
    if (is_wp_error($image_id)) {

        // Log error message to console so we know what's up
        echo $image_id->get_error_message();

        // Respond with a 500 error
        http_response_code(500);
        die();
    }

    // Finished upload, return the image id
    echo $image_id;
    http_response_code(200);
    die();
}

#3 Add the pintura-input HTML element

We’re nearly done, all that is left is adding the pintura-input HTML element to a page.

We’ll open the webpage we want to allow visitors of our website to upload from and add the following HTML to the page.

<pintura-input
  name="my_field"
  store="<?php echo admin_url('wp_ajax.php') ?>"
  post-action="image_upload"
  post-nonce="<?php echo wp_create_nonce('my_field') ?>">
</pintura-input>

If we can’t find wp_ajax.php we can use admin_ajax.php instead.

The image_upload name in the post-action attribute links our field to the add_action hooks both ending with image_upload.

The name of the field my_field is also used in the PHP code to know which field to look for in the sent data.

Finally the post-nonce is used to check if the data was sent in a secure manner.

After refreshing the webpage we’re ready to upload our first image!

If you want to change the behaviour of the editor you can find more information on the pintura-input element here.