Edit images before uploading them to your Wordpress media library

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

This will be all the code we need on the front-end:

<image-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') ?>">
</image-input>

Let's take a look at the demo so we know what we're going to build.

This article was originally published on pqina.nl. The editing functionality and custom field in this article are provided by Doka Image Editor.

Ready? Let's get started!

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

1. Load the image-input stylesheet and script.
2. Copy a PHP script to handle the image upload.
3. Add the image-input HTML element on the page we want to upload from.

We'll go over them step by step.

#1 Loading image-input the stylesheet and script

We 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 our themes functions.php file this will load the editor styles and scripts. We can add them to the top.

Note that this assumes that both image-input.css and image-input.js are located in theme-folder-name/image-input/

// This loads the Image Input element styles
wp_enqueue_style(
    'image-input-style',
    get_template_directory_uri() . '/image-input/image-input.css',
    array(), false
);

// This loads the Image Input custom element and Image Editor functionality
wp_enqueue_script(
    'image-input-script',
    get_template_directory_uri() . '/image-input/image-input.js',
    array(), false, true
);

Don't close the file, we'll need it for the next step.

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

Below our code that loads the styles and scripts we copy this PHP snippet. It will handle the image upload and move uploaded images to the WordPress media library.

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' )) {
        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)) {
        http_response_code(500);
        die();
    }

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

#3 Add the image-input HTML element

We're nearly done, all that is left is adding the image-input HTML element to the page.

We'll open the webpage we want to allow users to upload from and add the following HTML to the page.

<image-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') ?>">
</image-input>

Note that the my_field name is also used in the PHP snippet, it is used to find our image file.

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

Finally the post-nonce is used to check if the form post was done 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 image-input element here.