Edit images before uploading them to your Wordpress media library
Tags: wordpress, webdev, beginners
Published: 2021-03-26 13:15:46

---
title: Edit images before uploading them to your Wordpress media library
published: true
description: In this short tutorial we’ll use a custom <image-input> element to add image editing and uploading to any WordPress website front-end.
canonical_url: https://pqina.nl/blog/edit-images-before-uploading-them-to-your-wordpress-media-library/
tags: wordpress, webdev, beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b141ng99hdkopu92a28j.jpg
---

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:

```php
<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](https://pqina.nl/blog/edit-images-before-uploading-them-to-your-wordpress-media-library/) so we know what we're going to build.

> This article was originally published on [pqina.nl](https://pqina.nl/). The editing functionality and custom field in this article are provided by [Doka Image Editor](https://pqina.nl/doka/).

## 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/`

```php
// 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.

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

```php
<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](https://pqina.nl/doka/docs/v7/getting-started/installation/image-input/).