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.

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 Doka 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 image-input styles and script.
  2. Copy a PHP script to handle the upload to the media library.
  3. Add the image-input element to the page we want to upload from.

We’ll go over them step by step.

#1 Loading the image-input styles and script

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

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.

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

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

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 image-input element here.

I use Twitter to share new webdevelopment tips and tricks, so Follow me there if you found this interesting and want to learn more.

Rik Schennink

Indie Product Developer

to pqina.nl